Jump to content


A lot of repetition can't be good!

Recommended Posts

Hey fellow GreenSockers!


I'm trying to make a homepage slider using ScrollTrigger for the first time. In a practical way I'm nearly there, but my code has a lot of repetition, so that can't be good. #designercode :) Besides that, when you scroll fast the text is stacking up and is becoming a bit of a mess. What the best approach to fix this?


Could someone please review (and perhaps optimise a bit) my code?


Thank you in advance!


See the Pen QWNppzX by jnhltmn (@jnhltmn) on CodePen

Link to comment
Share on other sites

Hi Jan

I had a recent ScrollTrigger thread



 and if you take a look at it then ZachS came up with some js which puts this kind of animation in a loop.

I think you might find it helpful. 

  • Like 1
Link to comment
Share on other sites

Thanks Richard! I will look in to that one!
I found out you can prevent a lot of repetition with scrolltrigger and gsap defaults. So my code is a bit cleaner now! :)


See the Pen rNeyQQP by jnhltmn (@jnhltmn) on CodePen

  • Like 1
Link to comment
Share on other sites

Hey jnhltmn. 


This is definitely a time when you should use loops. I highly recommend my article on animating efficiently. Since you want to connect elements that are in two different containers then you should use the indexes or use a data attribute to delineate which elements should be paired. 


An issue with your current approach is that if a user scrolls quickly the effect breaks, showing multiple texts at once. This is because the tweens conflict. You could fix this by either restructuring your timeline so that each only affects one element, using a single timeline and scrubbing through it on scroll, or doing more proper checking of whether or not previous animations are finished before running a new animation. 


I'd probably do something like the below demo. There's obviously still room for improvement, especially regarding the start/end with respect to the thumb heights and perhaps also the timing of the callbacks to limit overlap.

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

  • Like 1
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.