daniel.mt Posted July 25, 2020 Share Posted July 25, 2020 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 More sharing options...
ZachSaucier Posted July 25, 2020 Share Posted July 25, 2020 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. 1 Link to comment Share on other sites More sharing options...
daniel.mt Posted July 26, 2020 Author Share Posted July 26, 2020 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 More sharing options...
webenaco_Dev Posted March 21 Share Posted March 21 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 More sharing options...
GSAP Helper Posted March 22 Share Posted March 22 @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! 1 Link to comment Share on other sites More sharing options...
webenaco_Dev Posted March 22 Share Posted March 22 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now