Jump to content
Search Community

ScrollTrigger waiting for animation before leaving.

daniel.mt test
Moderator Tag

Recommended Posts

Hi. Is there any way to delay scrolling to a section and wait for the leave animation to finish / the current animation to reverse ? I'm trying to achieve something similar to fullpage with some buttons that will send the user to that clicked section but without going through previous sections / scrubing through other panels ( hope this makes sense ) .

 

So my idea is to set the scrollTo duration to 0 and just jump to that section and let the scrolltrigger wait for the current panel to finish its animation and to let the next panel to start its own. 

See the Pen JjGVGyQ by vesemir (@vesemir) on CodePen

Link to comment
Share on other sites

Hey vesemir. As you likely found out, this isn't really a great use case for ScrollTrigger. 

 

You can immediately snap to a section like this 

See the Pen abdNRxX by GreenSock (@GreenSock) on CodePen

 

Jumping over sections is an added step of not using ScrollTrigger's built in functionality. Honestly I'd likely just hook into the wheel event and do custom logic to show the navigated-to section.

  • Like 1
Link to comment
Share on other sites

6 hours ago, ZachSaucier said:

Hey vesemir. As you likely found out, this isn't really a great use case for ScrollTrigger. 

I thought so . I just hoped that I missed something during my walkthrough through demos and docs. Thanks for clearing this up. 

Link to comment
Share on other sites

  • 3 years later...
On 7/25/2020 at 11:10 PM, ZachSaucier said:

Hey vesemir. As you likely found out, this isn't really a great use case for ScrollTrigger. 

 

You can immediately snap to a section like this 

 

 

Jumping over sections is an added step of not using ScrollTrigger's built in functionality. Honestly I'd likely just hook into the wheel event and do custom logic to show the navigated-to section.

Hi Zach Saucier,

I'm working on a project where I have a series of sections (e.g., "rooms" like your example) that I navigate through by scrolling. My goal is to add animations to elements within these sections that not only animate in as I scroll down to them but also perform a reverse animation as I'm about to leave the section to move on to the next one.


Here's the desired user experience:

I load the page, and the text in the first section animates in.
As I start scrolling down towards the second section, I want the text in the first section to perform an exit animation before the page actually moves to the next section.
Upon entering the second section, the text there animates in, and the process repeats for each subsequent section.

Is this achievable using ScrollTrigger? I'm looking for a way to trigger the exit animation of the current section's elements before scrolling into the next section, essentially giving control over the transition between sections. I'm using this code of yours as a start.


Any guidance or examples on how to implement this would be greatly appreciated.
Thank you in advance for your help!

Link to comment
Share on other sites

@webenaco_Dev I'm not sure I fully understand what you're trying to do here, but you might want to look at Observer plugin if you want to just sense scroll-like behavior and have total control of transitions, timing, etc. From what you described, you wanted to make sure some animation runs BEFORE the scroll-based animation is allowed to continue which means it can't logically be directly linked with the native scroll position, therefore you may want to remove native scroll altogether and just fire things off using Observer and use JS to "scroll" (but it's not really scrolling). 

 

Good luck!

  • Like 1
Link to comment
Share on other sites

16 hours ago, GSAP Helper said:

@webenaco_Dev I'm not sure I fully understand what you're trying to do here, but you might want to look at Observer plugin if you want to just sense scroll-like behavior and have total control of transitions, timing, etc. From what you described, you wanted to make sure some animation runs BEFORE the scroll-based animation is allowed to continue which means it can't logically be directly linked with the native scroll position, therefore you may want to remove native scroll altogether and just fire things off using Observer and use JS to "scroll" (but it's not really scrolling). 

 

Good luck!

thanks, suggesting me to approach Observer allowed me to find the solution! :)

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