How do I start the animation after the component has been displayed?

[Ricardo Carvalho]

Hi!

 

I'm using GSAP in React. I have two components, each with its own animation, but when displaying the second component (intro component), I feel the animation isn't fluid. I confess I don't know if I'm making a mistake in starting the second animation, or if I need to put it in context or even combine timelines.

 

Can you give me some insight into this problem?

 

P.S.: I will still add other animations that I intend to use scroll plugins on the page.

https://stackblitz.com/edit/gsap-react-basic-f48716-eqt3eypg?embed=1&file=src%2Fcomponents%2Fintro%2Findex.js

[Rodrigo]

Hi @Ricardo Carvalho and welcome to the GSAP Forums!

 

What exactly is not working as you expect. As far as I can see everything GSAP related is doing exactly what is supposed to do. I don't see anything that is not working properly and the animations are performing well and look fluid to me.

 

Happy Tweening!

[Ricardo Carvalho]

Hi @Rodrigo so me the first text show off nowhere, and that's why I said the animation is not fluid. I think I should include some timeline or context, but I don't know If I am doing the right thing, and I said this because I want to include the animation on Scroll but I don't know how this logic will be

[Rodrigo]

Just a typo here:
 

const textInstance = new SplitText('.text', {
  type: 'line',
});

The type configuration accepts strings, but is always plural: "lines, words, chars". So in your demo using this seems to work:

const textInstance = new SplitText('.text', {
  type: 'lines',
});

https://gsap.com/docs/v3/Plugins/SplitText/#type

 

Hopefully this helps

Happy Tweening!