Change repeat of homepage animated text from infinite to 1

Hi,

I am afraid CSS code could not work to stop the loop of typing animation as it is handled over jQuery script.

Try the steps:

1. Download js/main.js and js/main.min.js files in your website’s root folder > wp-content/themes/ignis with FTP or sFTP program
2. Open the js/main.js
3. Paste to replace the entire code in the js/main.min.js file
4. Find this code block:

/* Typed */
(function($) {
	    $('.typed-element').typed({
	        typeSpeed: 75,
	        loop: true,
	        backDelay: 2000,
	        stringsElement: $('.typed-strings')
	    });
})( jQuery );

Change the loop option to false. So it will look like this:

/* Typed */
(function($) {
	    $('.typed-element').typed({
	        typeSpeed: 75,
	        loop: false,
	        backDelay: 2000,
	        stringsElement: $('.typed-strings')
	    });
})( jQuery );

5. Upload the js/main.min.js to update the changes
6. Clear cache before reloading your site

Please note that you’ll redo these steps each time you update the theme. Because all theme’s files are replaced when updating.

I hope this helps.

Regards,
Kharis

Hey Kharis

Thank you so much for taking the time to help with this! I really appreciate it ??

Two questions

1 – I created a child theme for this site. Can I duplicate the js files into the child theme and edit them there? I’ve tested this and it doesn’t seem to work, but just wanted to check…

2 – could you please clarify step #3 above? What exactly should I be pasting into js/main.min.js?

Thanks again ??

Hi,

Thank you for getting back.

Try adding this code into your child theme’s functions.

function ignis_child_dequeue_script() {
    wp_dequeue_script( 'ignis-main' );
}
add_action( 'wp_print_scripts', 'ignis_child_dequeue_script', 100 );

function ignis_child_main_scripts() {
	wp_enqueue_script( 'ignis-child-main', get_stylesheet_directory_uri() . '/js/main.min.js', array('jquery', 'imagesloaded'),'', true );
}
add_action( 'wp_enqueue_scripts', 'ignis_child_main_scripts', 9999 );

The add /js/main.min.js to your child theme folder.

Copy the entire code from ignis/js/main.js, and paste it into /js/main.min.js in your child theme. In it, find this code block:

/* Typed */
(function($) {
	    $('.typed-element').typed({
	        typeSpeed: 75,
	        loop: true,
	        backDelay: 2000,
	        stringsElement: $('.typed-strings')
	    });
})( jQuery );

and replace with:

/* Typed */
(function($) {
	    $('.typed-element').typed({
	        typeSpeed: 75,
	        loop: false,
	        backDelay: 2000,
	        stringsElement: $('.typed-strings')
	    });
})( jQuery );

I hope this reply helps.

Regards,
Kharis

Thanks so much Kharis!

One more question, sorry! My child theme isn’t named ‘ignis-child’. Does that matter – should I replace ‘ignis-child’ with the name of the theme in the functions code?