Jump to content


ScrollTrigger when going back up

Moderator Tag
Go to solution Solved by akapowl,

Recommended Posts

I don´t understand this. 


I want to play the animation:

- When page loads

- When user goes back up (scrolling)


But these parameters: start and end, what do they mean? 


See the Pen QWQRLEO by fernandocomet (@fernandocomet) on CodePen

Link to comment
Share on other sites

  • Solution



3 hours ago, fernandocomet said:

But these parameters: start and end, what do they mean? 


Have you taken a look at the ScrollTrigger docs, @fernandocomet - they do have some quite good explanations for the start and end of ScrollTriggers.


What you'll also want to have a look at is toggleActions



toggleActions String - Determines how the linked animation is controlled at the 4 distinct toggle places - onEnter, onLeave, onEnterBack, and onLeaveBack, in that order. The default is play none none none. So toggleActions: "play pause resume reset" will play the animation when entering, pause it when leaving, resume it when entering again backwards, and reset (rewind back to the beginning) when scrolling all the way back past the beginning. You can use any of the following keywords for each action: "play", "pause", "resume", "reset", "restart", "complete", "reverse", and "none".



In combination, here's a way of how I would approach it:

With the start being when that trigger element hits the top of the window, do nothing on Enter - and with the end being when the bottom of that element hits the top of the window, reset the tl onLeave - this way you will always reset it back to its starting state as soon as the element gets out of view. onEnterBack (when scrolling back up and that container comes into view again) restart the tl, and onLeaveBack again do nothing.


[🤔Technically you wouldn't even have to reset onLeave in this very scenario because you are going to restart anyway onEnterBack, and when you do, the section will not even be visible. Doesn't hurt to leave it in, though.]


let tl = gsap.timeline({  
  scrollTrigger: {    
    trigger: '.limitless',
    start: "top top",
    end:"bottom top",
    markers: true,
    toggleActions: "none reset restart none", 


Since you also want  it to play when the page loads, you could just add a load event listener and play the tl when the page loads.


If you want it to behave different, you should tweak start/end/toggleActions to your liking.


I hope this helps. Happy tweening!


See the Pen xxYNRmx by akapowl (@akapowl) on CodePen


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