Jump to content
Search Community

Need Assistance Implementing Dynamic Scroll Effects

Luka Mutić test
Moderator Tag

Go to solution Solved by Carl,

Recommended Posts


 I would like to seek some advice as a junior frontend developer who is currently learning about the greenSock library. I have come across a situation where I believe the library could be implemented, but I am unsure of how to do so.

Whilst browsing the website at this link, I noticed the "work process" section and how it dynamically responds to scrolling. I am hoping to learn how to replicate this effect through coding.


It would be greatly appreciated if you could offer any assistance.

Best regards.

Link to comment
Share on other sites

This is very nice effect. I could see myself using this in a tutorial sometime soon.


in addition to what @Cassie suggested I would add that it would help to have a better understanding of what you know about GSAP and ScrollTrigger, as it could be a challenge if you are just starting with GSAP. 


Are you looking for us to give you the full solution or just help you with where you are stuck?


The animation of the orange line could be done a few ways, perhaps an SVG stroke or a colored div moving inside another element with overflow hidden.


If you inspect the page your referenced you will see that each of those sections has its own orange line that moves.


I don't have a ton of time now to build this whole thing but I can give you this starting point:


See the Pen XWxJqGQ?editors=1010 by snorkltv (@snorkltv) on CodePen


After you've read the ScrollTrigger Docs (watch the full video)  ScrollTrigger Getting Started in 3 Easy Steps I'd encourage you try to wire the animation I provided to a ScrollTrigger. Fork the demo and post it here if you get stuck. 


hint: use scrub:true


the repeat is only on the animation so you can see how it works.




  • Like 3
Link to comment
Share on other sites

  • 5 months later...

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.
  • Create New...