scrollTrigger loop animations

[braymay]

Hi there,

I've finally worked out how to make this animation:
horizontal rule (1px div block) animates in on scroll with an x axis animation.

I have multiple horizontal rules on my page—same set up and same class—and of course they all load in from the first animation. 

I've looked at a lot of tutorials etc on youtube and scrubbed this forum dry and cant seem to figure out the best way to make each load in on their own without doing separate classes.

 

I've checked the ScrollTrigger tips and found this: Since each of the elements would get triggered at a different scroll position, and of course their animations would be distinct, just do a simple loop instead, like this

 

I have no idea what to write in terms of the code to made this work.
Can anyone help at all?

Cheers,

B

 

Here is my site for reference.

https://studiounknownv2.webflow.io/

 

 

See the Pen EaYpWGa by braymay (@braymay) on CodePen.

[mvaneijgen]

Hi @braymay welcome to the forum and thanks for being a club member 🎉

 

The fix for this is just a simple Javascript loop. Have it loop over each element on the page and run the piece of code you've wrote for each element it sees. I've made use of a .forEach() loop https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach and then used the GSAP selector utility https://gsap.com/docs/v3/GSAP/UtilityMethods/selector() to scope the .main-horizontal-rule to the current myWrapper 

 

I've also updated your tween to use xPercent instead of x, seen that you want to use percent values. 

 

Hope it helps and happy tweening! 

 

See the Pen qEWyjgv?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen.

[braymay]

@mvaneijgen Thank you so much for the speedy reply!! Something I've tried to do but wasn't 100% sure on how.

This works perfectly and I can edit it as I like int terms of easing, start, end etc

Appreciate it 🙏