Jump to content
Search Community

Reset animation when the animated element is scrolled out of the browser viewport

sreeju1 test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi,

 

The library is great.  Loves to use it to create animations.

 

I was using it will scrollMagic library. I wanted to know if there is any way I can detect if the animated element is scrolled out of the browser viewport when the user scrolls the page up so that the animation can be reset. Right now when it is scrolled down the animation is playing in the reverse direction. I just want the animated element stays in its final state as long as it is in the screen and when the user scrolls up and the element goes out of the viewport I want to reset it so it can play again when it is scrolled down. 

just like the title animation in http://carv.ai

Link to comment
Share on other sites

Hi sreeju1 :)

 

Welcome to the GreenSock forum.

 

Manfred is right, this is more of a ScrollMagic question and we need to keep our focus here on GSAP. That being said, I think you'd benefit by looking at the Custom Actions demo:

 

http://scrollmagic.io/examples/basic/custom_actions.html

 

You'd need to check the direction of the scroll and its progress and then run some custom logic. There would be numerous ways to play the tween again when certain conditions are met. You could set the progress() of the tween back to 0, restart() it or simply play(0) again from the beginning. 

 

Happy tweening.

:)

  • Like 3
Link to comment
Share on other sites

I'm noticing nearly every ScrollMagic question results in a post by Blake saying something like: "Here's how to do it without ScrollMagic."

 

Maybe we should be wrapping Blake's code into a new function or a competing plugin with a cool name like 'Blake-n-Scroll' ?

  • Like 4
Link to comment
Share on other sites

Haha! So true. I don't feel like learning a new API that I will probably never use, so I just come up with my own solutions. But I must say, it seems like we handle a lot of scroll magic questions, so maybe it's time for an official GSAP scrolling utility. That way we can offer better support for scrolling questions on this forum.

  • Like 3
Link to comment
Share on other sites

  • 5 months later...
On 11/04/2017 at 7:26 AM, OSUblake said:

Haha! So true. I don't feel like learning a new API that I will probably never use, so I just come up with my own solutions. But I must say, it seems like we handle a lot of scroll magic questions, so maybe it's time for an official GSAP scrolling utility. That way we can offer better support for scrolling questions on this forum.

 

This would be awesome! Please do. 

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