(React.js) Refactor Timeline simple text animation.

[Gustavo Máximo 2 Likes (Newbie)]

Hi, I'm new to GreenSock and so far I'm loving it, however I'm still confused on what would the best practices for some scenarios.

 

I have the following code:

 

import React, { useRef, useState } from 'react';
import gsap from 'gsap';

export const Example = () => {
    const [text, setText] = useState('wow');
    const element = useRef(null);

    const onMouseOverHandler = () => {

        const tl = new gsap.timeline();

        tl.to(element.current, {
            duration: 0.1,
            call: () => {
                setText('G');
            }
        })
            .to(element.current, {
                duration: 0.1,
                call: () => {
                    setText('Gu');
                }
            })
            .to(element.current, {
                duration: 0.1,
                call: () => {
                    setText('Gus');
                }
            })
            .to(element.current, {
                duration: 0.1,
                call: () => {
                    setText('Gust');
                }
            })
            .to(element.current, {
                duration: 0.1,
                call: () => {
                    setText('Gusta');
                }
            })
            .to(element.current, {
                duration: 0.1,
                call: () => {
                    setText('Gusta');
                }
            })
            .to(element.current, {
                duration: 0.1,
                call: () => {
                    setText('Gustav');
                }
            })
            .to(element.current, {
                duration: 0.1,
                call: () => {
                    setText('Gustavo');
                }
            });
    };

    return (
        <div ref={element} onMouseOver={onMouseOverHandler}>
            {text}
        </div>

    );
};

Notice the repeated .to's I'm using just to add a new letter.

If I wanted to increase the text content it would end up with even more repetitions.

 

Is there any other more elegant way of doing what I'm trying to do here?

 

Thanks.

[ZachSaucier 7,046 Likes (Superhero)]

Hey Gustavo and welcome to the GreenSock forums.

 

There's usually multiple ways to do things. The easiest way to do what you're wanting would be to use GSAP's TextPlugin. The next easiest way would be to use a loop - I talk about how to do that sort of thing in my article about animating efficiently. The article also covers other functionality that can help you write the code you have more efficiently.

 

Side note: You don't need the new before gsap.timeline. 

[Gustavo Máximo 2 Likes (Newbie)]

Thank you for the quick response @ZachSaucier

 

I was able to achieve the same behavior with GSAP's TextPlugin with the following code:

 

import { TextPlugin } from 'gsap/dist/TextPlugin';

gsap.registerPlugin(TextPlugin);

gsap.to(element.current, {
	duration: 1,
	text: 'Gustavo',
	ease: 'none'
});

 

Now that the basics are clear I'll focus on making the animation more fluid / behave the way I want.

 

Thanks.