ScrollTrigger when going back up

[fernandocomet 3 Likes (Newbie)]

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

[akapowl 5,494 Likes (Superhero)]

 

 

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