Width animation for the elements on scroll

[HectorSS 0 Likes (Newbie)]

Hello masters, I need help to create an animation like this: https://monosnap.com/file/d9JYlNbcmfA3Zbcn1vwOFoNjM9kCC6

 

I don't mean marquee text. I mean lines and text which appears on the scroll. Can someone help me to implement that? I will be happy to see any ideas and demos.

 

Regards,

Sergey

[GreenSock 18,876 Likes (Superhero)]

Welcome to the forums, @HectorSS.

 

Sure, that's pretty easy with ScrollTrigger. I'd strongly recommend reading the docs, watching the video...

And then you can poke through a ton of demos at https://greensock.com/st-demos and use one as a jumping-off point.

 

Have fun! If you get stuck, feel free to post back here with a minimal demo and a GSAP-specific question and we'd be happy to help. 

[HectorSS 0 Likes (Newbie)]

1 hour ago, GreenSock said:

Welcome to the forums, @HectorSS.

 

Sure, that's pretty easy with ScrollTrigger. I'd strongly recommend reading the docs, watching the video...

And then you can poke through a ton of demos at https://greensock.com/st-demos and use one as a jumping-off point.

 

Have fun! If you get stuck, feel free to post back here with a minimal demo and a GSAP-specific question and we'd be happy to help. 

 

thank you, but I checked this video before. Basically I need to know approach for my design. I understand that I need to create layers, but I still not sure if they all should be with position absolute and should I change WIDTH with different speed ?

[Rodrigo 5,888 Likes (Superhero)]

Hi,

 

I don't see any width animation on that video, just some elements being animated in the Y axis with some opacity and a marquee. Maybe you refer to the icons at the left, but that is done with clip-path or masking an SVG.

For the line I would use the DrawSVG Plugin:

It would be good that you posted a minimal demo showing what you have so far in your project, so we can know exactly what the issue is. Unfortunately we don't have the time resources to build fully working projects and demos for every user, so hopefully those resources are enough to get you started.

 

Happy Tweening!