Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Guest LeoSan

How to create scroll effect like this website using greensock.

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

 

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

Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

@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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×