ScrollTrigger help

[dmitriyr54]

Hey guys, I really could use your help with the ScrollTrigger plugin.

 

I'm trying to create an animation, where the text is appearing from the middle of the screen, and when its opacity is 1 (from 0) and scale is also 1 (from 10), I want this text to create a single row in the top left corner.

 

I have probably used not the most appropriate tools to achieve my goal. And because this is my first animation of such kind, I would like to get some advices about how can I improve it from more experienced members of the community.

See the Pen WNaQBBK by sukaachesvobodno (@sukaachesvobodno) on CodePen

[Rodrigo]

Hi @dmitriyr54 and welcome to the GreenSock forums!

 

There are a couple of issues. The first is the CSS you're using for this. Then is the fact that you're creating a ScrollTrigger instance for every element, when you could achieve the same result far easier with just one timeline and a single ScrollTrigger instance.

 

Maybe this is closer to what you're looking for:

See the Pen gOBPYXg by GreenSock (@GreenSock) on CodePen

 

Basically what I'm doing here is positioning all the letters and emoji first and then create the animation for them while pinning their container. I use staggers in order to create the effect of the letters animating one by one and add a delay to the second one that's equal to the default duration.

 

Hopefully this helps.

Happy Tweening!

[dmitriyr54]

10 hours ago, Rodrigo said:

Hi @dmitriyr54 and welcome to the GreenSock forums!

 

There are a couple of issues. The first is the CSS you're using for this. Then is the fact that you're creating a ScrollTrigger instance for every element, when you could achieve the same result far easier with just one timeline and a single ScrollTrigger instance.

 

Maybe this is closer to what you're looking for:

 

 

 

Basically what I'm doing here is positioning all the letters and emoji first and then create the animation for them while pinning their container. I use staggers in order to create the effect of the letters animating one by one and add a delay to the second one that's equal to the default duration.

 

Hopefully this helps.

Happy Tweening!

Thank you so much, your decision really helped me.