Jump to content
Search Community

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

Michael31 test
Moderator Tag

Go to solution Solved by Carl,

Recommended Posts

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', {
    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

Link to comment
Share on other sites

  • Solution

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 


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