Multiple paragraph splitText

[SuckMyKiss]

Hi GSAP community! Hope you're doing well!

 

I would like have an answer about multiple paragraph animated with the SplitText module in react environment. In fact, i'm tryin to make a dialog box with multiple paragraph that I split to make an effect like in a video game. My problem is I would like to remove the previous paragraph before the new one start his animation so that it'll appear at the top of the dialog box. I made a codesandbox (sorry i didn't find a way to make it works with codepen) here : https://codesandbox.io/s/adoring-currying-12sedl?

 

Is there a way to do that ?

 

Thanks in advance.

 

[Rodrigo]

Hi @SuckMyKiss and welcome to the GreenSock forums!

 

First thanks for being a Club GreenSock member and supporting GreenSock!

 

I only see one dialog in your setup, so I updated it a bit with this:

https://codesandbox.io/s/nostalgic-brook-nz98yp?file=/src/components/Hero.jsx

 

Hopefully that's enough to get you started.

Happy Tweening!

[SuckMyKiss]

Hi Rodrygo, thanks for the welcome and the answer!

 

There is 2 dialogs in my sandbox (2 <p> tag) and I would like to remove the first text ('It's so damn hot!') to leave the place to the second one. 

 

Unfortunately, I can't acces to the sandbox you linked, got this error :

 

 

Have a nice day!

[Rodrigo]

Hi,

 

Yeah IDK what the problem was with codesandbox. I created and updated the example using Stackblitz (I recommend you creating your demos with that instead):

https://stackblitz.com/edit/vitejs-vite-dhb5im?file=src%2Findex.css,src%2FApp.jsx&terminal=dev

 

Hopefully this helps,

Happy Tweening!

[SuckMyKiss]

Hi Rodrigo,

 

Thanks a lot for this example, it works perfectly and learnt a bit more on gsap synthax!