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

[nafiul09]

Hi there,

So I am creating animation and kind of stuck. I don't know how to reverse the animation when the end of the targeted elements hits the bottom of the screen.

Please let me know how can I able to achieve this.

Thanks,
Nafiul

 

See the Pen OJaMNEa by nafiul09 (@nafiul09) on CodePen

[Rodrigo]

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!

[nafiul09]

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.

[mvaneijgen]

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

[nafiul09]

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

Thanks,
Nafiul

[Carl]

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.

[Carl]

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.