How to create scroll effect like this website using greensock.

[Guest LeoSan]

 

https://panike.pt/sustentabilidade/

Above website has really nice animation. If you see at the left side bullets. Those bullets gets filled with red when we scroll down and hover on them. They used top and translateY css property to achieve this but I am new to greensock and trying to create using greensock. Could you please help me. Thanks

See the Pen JyLEPB by LeoZoe (@LeoZoe) on CodePen

[Carl]

That's a pretty cool site and a pretty tricky effect there. Seems there is some sort of masking going on to allow the red line to travel through the white lines and be "inside" two different white lines at the same time. Using SVG it could be done like shown below:

See the Pen KvRgMo?editors=0010 by GreenSock (@GreenSock) on CodePen

 

 

Please understand that we really have to keep our support focused on the GSAP API. It just isn't feasible for us to recreate advanced effects on award-winning websites or investigate them and try to explain all that is going on. The one you referenced is fairly intricate and what I've shown above barely scratches the surface of what you need to do. I would encourage you to start with some much simpler projects. If you are interested in scroll-driven animation look into ScrollMagic after you are more comfortable with GSAP.

[Guest LeoSan]

@Carl Thank you for your help and kind suggestion. You will be glad to hear, I am already learning GSAP API and also creating my own projects using this. I don't want to ask this to do this by someone. But it was very important task for me to finish in 2 days. I tried my best but I really need time to go through GSAP API then I will be able to create my one and help others. Again Thank you so much.