ScrollTrigger How to specify a specific leave position and onLeaveBack position ?

[Michael31]

I'd like to make my square rotate when its parent reach the vertical middle of my screen. So far so good.
But, I would also like to reset this animation again once its parent is completely off the viewport. 

 

My tween looks like that, it's not working because I only handle the enter & enterBack position correctly :

gsap.to('.square', {
  rotation:180,
  opacity:1,
  duration:2,
  scrollTrigger:{
    trigger:'.container',
    start:'top 50%',
    end:'bottom 50%',
    toggleActions: "play reset play reset",
  }
})

 

To resume:

- I want to play my animation when I enter "top 50%" and when I enterBack "bottom 50%"

- I want to reset my animation when I leave "bottom top" and when I leaveBack "top bottom"

Is it possible to handle this in one only tween ? Thank you very much

 

See the Pen BavNPNm by Micha-l-Garcia (@Micha-l-Garcia) on CodePen

[Carl]

As I understand your question you could use 2 ScrollTriggers. We refer to this technique as an “offscreen reset” 

 

I go over this a few times in my ScrollTrigger course, but here is a simplified demo

 

See the Pen abQdKLN by snorkltv (@snorkltv) on CodePen

 

I use the grey area to show what happens off screen but you can change those values to match the top and bottom of the viewport 

 

here’s a more advanced example where the headers all roll towards you as they enter the viewport from top and bottom using the same basic technique. They all reset to the light grey side when they leave the screen too. 
 

 

See the Pen YzvjGom by snorkltv (@snorkltv) on CodePen

 

hope this helps 

 

[Michael31]

Thanks for your answer and your examples.

It helped a lot yes, it works like a charm.