Jump to content
Search Community

How can I reverse the scroll stringer animation when trigger element hits the bottom of the screen

nafiul09 test
Moderator Tag

Recommended Posts

Hi Nafiul,


You want this to happen when the user is scrolling up, or down or both?


The simplest way is to set the end point of the ScrollTrigger to the bottom of the element hitting the bottom of the viewport:

scrollTrigger: {
  trigger: $(this),
  start: "top 90%",
  end: "bottom bottom",
  toggleActions: "play none reverse none",
  markers: true

Here is a fork of your codepen:

See the Pen zYMrKdb by GreenSock (@GreenSock) on CodePen


Hopefully this helps.

Happy Tweening!

  • Like 2
Link to comment
Share on other sites

So I already know this. But I want to reverse the animation only if end point hits the bottom of the screen but if scroll up again then animation will play agin. Here is a very small video to explain what I basically want to do.

Link to comment
Share on other sites

Hi @nafiul09 do you mean that you want to animate the trigger again when onEnterBack? This is what the toggle actions are for. Check the docs https://greensock.com/docs/v3/Plugins/ScrollTrigger.



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".


So you want the third value to reverse? toggleActions: "play none none reverse" > toggleActions: "play none reverse reverse". If I'm understanding you correctly. Hope it helps and happy tweening! 


See the Pen WNYrEvj?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen


Link to comment
Share on other sites

@mvaneijgen I think you didn't understand what I said first and what I mean 2nd. 

So first thing first animation will start once Start point hits the Scroller-start (while scrolling down) and then the animation will reverse as soon End point hits the Scroller-start/Bottom of the page (while scrolling up) and lastly when the End point hit the Scroller-start or enter the page again then the animation will start again (while scrolling down).

In short Start -> Scroller-start = Animation start, End <- Scroller-start/Bottom of the page = Reverse animation, and last End -> Scroller-start/Bottom of the page = Animation play again
(->) = Scroll down
(<-) = Scroll up

I hope I explained it better now. Please let me is it possible with one scroll trigger or I have add another trigger to do that. I think you understand what I mean here.


Link to comment
Share on other sites

Sorry, but I'm not exactly following the effect you're after, but I'm confident anything is possible by using 2 ScrollTriggers per element/animation.


Please see this demo. Notice that each 3d header "rolls 90 degress towards the dark grey side" when it enters the viewport from top AND bottom.

Also note that each header is showing the dark grey side when it leaves the viewport but resets to the light grey side when it comes back in.

this is referred to as an "off-screen reset". 


See the Pen YzvjGom?editors=0010 by snorkltv (@snorkltv) on CodePen


I have extensive step-by-step videos in my ScrollTrigger course, but hopefully this demo helps a bit.

  • Like 3
Link to comment
Share on other sites

I went ahead and made a much simpler demo for the off-screen reset.

Imagine the grey bars were an area above and below the viewport, completely out of view.

You will see that the header doesn't fade out until fully in the grey area


See the Pen abQdKLN?editors=0010 by snorkltv (@snorkltv) on CodePen


I know this may not be the exact effect you are looking for but hopefully it helps illustrate the power of multiple ScrollTriggers for 1 trigger.



  • Like 3
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.
  • Create New...