Jump to content
GreenSock

G. Scott

ScrollTrigger - toggleAction reset outside of viewport

Recommended Posts

Loving ScrollTrigger but seem to have hit a bit of a snag. Is it possible to reset the animation when the element is below the viewport, instead of below the start position? So for example if I wanted to animate the width of an element from 0 to 100% when it reached 50% up the screen, I'd like it to remain at that width until I scroll back up and the element is completely out of view below the viewport, and then reset/restart. As it is, in this example setting the last toggleAction parameter to reset causes the element to disappear while its still in the viewport. It would be a similar issue if I wanted to fade in an element when it enters the screen. It would be nice to be able to trigger the fade-in a little ways up the screen, and remain on the screen until the user scrolled back up past the element again, and then have it fade in all over again if they started scrolling down again.

  • Like 1
Link to comment
Share on other sites

Hey G. Scott. You can do this sort of thing by setting up a timeline animation paired with scrub or by using toggleActions perhaps paired with an endTrigger (without scrub) depending on the exact effect that you're looking to create. Can you please create a minimal demo that clearly shows when you're wanting? Then we can help you get things setup as necessary :) 

 

Link to comment
Share on other sites

Sorry for the delay... busy week.

 

Anyway, here is a very rough codepen to show you what I mean. When you scroll down, the pink highlight width animates (0->100%) when it is about 20% up from the bottom... perfect! Now when you scroll back up, you will see the line reset (width = 0) at the same point that it started. That is NOT what I want. I want the pink highlight to remain STATIC until until I have scrolled far enough back up that it is out of the view port again. THEN it should reset and animate all over again when I scroll back down. Basically I like to animate objects once they are up a little from the bottom of the viewport.

 

See the Pen xxVwGxO by g3logic (@g3logic) on CodePen

 

Link to comment
Share on other sites

Ah! yes that will do the trick! I really should have thought of that considering that was basically what I was doing with my own code before ScrollTrigger. Guess thats why you're a superhero haha. Thanks for taking the time! (And sorry about the "minimal demo"... been running on empty:-)

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