Need Assistance Implementing Dynamic Scroll Effects

[Luka Mutić]

 Hello,
 

 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.

[Cassie]

Hi there!

Welcome.

 

Sounds like you're looking for ScrollTrigger effects, I'd recommend looking at the demos at https://greensock.com/st-demos and https://codepen.io/collection/DkvGzg and https://codepen.io/collection/AEbkkJ - you may be able to use one of those as a jumping-off point.

Also our 'getting started' guide is a good place to start!

 

[Carl]

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.

 

 

 

[Carl]

update. I did end up making a complete tutorial on this effect and it's on YouTube:

 

 

Here's the finished demo too:

See the Pen 36e8db0379aa8cbac7608b0ff0d1f46d by snorkltv (@snorkltv) on CodePen