Sridhar Katakam

Genesis and WordPress Tutorials

Typing Animation in Genesis using iTyped

by 7 Comments

In the comments section of Typed.js in Genesis, a user asked:

Hi Sridhar. I would like to use typed.js in the Header 1 section of the Centric Pro theme. I’ve added typed.js to Centric’s js directory. Should I follow the instructions above or do I need to make adjustments? I’ve imported the theme’s demo content to my site (http://littleoneslittlewords.com/); the H1 content is currently a text widget, and I would like to be able to animate its content with typed.js. (I have a very beginner skill set – so I appreciate your guidance!)

This tutorial provides the steps to use the newer iTyped Javascript for animated typing of the heading text in Home 1 section of Centric Pro.

Even though the tutorial has been written for Centric Pro child theme, it should work with a few adjustments in any Genesis child theme.

Step 1

Upload ityped.min.js to child theme's js directory.

Step 2

Edit Centric Pro's front-page.php.

a) Add the following in centric_enqueue_home_scripts():

To view the full content, please sign up for the membership.

Already a member? Log in below or here.

  • That worked PERFECTLY! I can’t thank you enough for your prompt and thorough reply – I’m blown away, THANK YOU!

    A few (novice!) questions:

    1) One of my words contains an apostrophe. When I enter the apostrophe, the effect stops working; when I remove it, the effect works. I’ve tried copying and pasting other apostrophes within the Notepad file (i.e., punctuation that was used earlier in that line), as well as typing it directly – nothing seems to work. Any suggestions?

    2) Thank you for the tip on deleting previous lines and typing new ones! If I would like the first line to stay and then hit return and type a new sentence, what should I do? (Please see: littleoneslittlewords.com – I’d like to use the effect on all three lines that are displayed.)

    3) On a similar note: How do I adjust the font/styling? I’m assuming it’s within the text widget (like how the line says “H1” right now)? Is there anyway to customize fonts and colors? Or will I just need to choose between the different header/body options (like “H1”)?

    4) If I’d like the cursor to blink 2-3 times before hitting enter and starting the second line – is that possible?

    5) Lastly, is there any way to delay the start of the effect? (Say: If I wanted the page to load and then wait a second before beginning?)

    Again, thank you SO INCREDIBLY MUCH. I was shocked when I saw a reply within hours of my question – and your level of detail in addressing my comment is beyond impressive. THANK YOU, THANK YOU, THANK YOU 🙂

    Reply

  • You are welcome.

    1) Escape the single quote. Use \' instead of '. Ex.: strings:['I don\'t want just words.'],

    The other way is to enclose the string in double quotes instead of single quotes like this:

    strings:["I don't want just words."],

    2) See https://github.com/luisvinicius167/ityped/issues/21#issuecomment-292763308

    3) You can add your desired styling for the #ityped (or #ityped1, #ityped2 etc.) selector in style.css.

    Ex.:

    #ityped {
    color: yellow;
}

    To change the font size of the heading text, you could do

    .home-widgets-1 h1 {
    font-size: 24px;
}

    4) You might want to ask in https://github.com/luisvinicius167/ityped/issues

    5) startDelay parameter is supposed to work. See https://github.com/luisvinicius167/ityped#the-gist. But it doesn’t in my testing. You might want to post in the script’s GitHub Issues section.

    Reply

  • Thank you! I’ve posted in the GitHub Issues section and will update with any resolution. Thank you again!

    Reply

  • Hi Sridhar,

    I haven’t heard anything back from GitHub yet, so I’ve made some changes to avoid needing multiple lines. My only issue now is trying to add a longer pause between each entry. (The code is provided, under “Type Pausing”, at: https://github.com/mattboldt/typed.js/blob/master/README.md). I know this is more of a GitHub question, but if it wouldn’t be too much trouble I was hoping you might be able to advise as to what I need to put where in the following code (which is currently in my Front Page.php):

    Initialize iTyped on #ityped.
    */
    function sk_footer_scripts() {
    ?>

    <

    script>
    ityped.init(‘#ityped’, {
    strings:[‘I don\’t want just words.’, ‘If that\’s all you have for me,’, ‘you\’d better go.’, ‘F. SCOTT FITZGERALD’, ‘* welcome :)’],
    typeSpeed: 130, // 55 is the default
    // showCursor: true,
    startDelay: 999,
    onFinished: function(){
    document.querySelector(‘.ityped-cursor’).style.visibility = ‘hidden’
    }

    Everything I’ve tried on my own has failed to work. Thank you so much!

    Reply

  • Thanks for this Sridhar!

    Just like PrayersAndApples said, this works perfectly. I even got brave and tried adding it to a different Genesis theme – DigitalPro – works great there too!

    The StartDelay didn’t work for me either though 🙁 Hoping for a solution over at GitHub.

    Adrian

    Reply

  • Hi Sridhar,

    For some reason, the typed.js effect isn’t showing up in Internet Explorer? I’ve tested it in Firefox, Safari, Chrome, and Microsoft Edge and it looks great – but the typing doesn’t show up in Internet Explorer (see: http://littleoneslittlewords.com). Any suggestions?

    Thanks!

    Reply
    • >