Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Gustavo Máximo

(React.js) Refactor Timeline simple text animation.

Go to solution Solved by ZachSaucier,

Recommended Posts

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.

Link to comment
Share on other sites

  • Solution

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. 

  • Like 2
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×