Scroll snap failing if animation not finished

[leandronn]

Hi everyone. 
I'm kinda new to gsap. So, apologies if this is not a gsap problem.
I'm trying to create an effect (exampled here) of the sections snapping and pinning. Using react.
It was going great until I tried to animate some of the section contents. 
These are the concerns:
1. If the animation isn't finished, and I scroll, then I can't go "back" to the previous section (happens on the first one as the next question explains why I haven't animated the following sections)
2. How should I do to wait until the "snapping" has happened to start animating the content of the section

Here's a codesandbox (Codepen did not let me create the react project) that shows the problem. To replicate it, as soon as the animation starts, scroll down. don't let it finish. Then, try to go up.
CodeSandbox

Thanks in advance.
 

[Rodrigo]

Hi @leandronn and welcome to the GSAP Forums!

 

Indeed this doesn't seem related to GSAP IMO. I have no experience with CSS scroll-snap so I couldn't really tell you what's the issue. Maybe is related to the height of the element at the moment the scroll starts or maybe is something else, honestly I don't know, but GSAP is definitely not in control of that part so that is not something GSAP is mishandling something or anything of the sort and I don't know how that a simple animation translating an element on the Y axis could cause such behaviour.

 

Maybe you could look into the Observer Plugin and drop scrolling altogether:

https://gsap.com/docs/v3/Plugins/Observer/

 

Sorry I can't be of more assistance.

Happy Tweening!

[leandronn]

7 minutes ago, Rodrigo said:

Hi @leandronn and welcome to the GSAP Forums!

 

Indeed this doesn't seem related to GSAP IMO. I have no experience with CSS scroll-snap so I couldn't really tell you what's the issue. Maybe is related to the height of the element at the moment the scroll starts or maybe is something else, honestly I don't know, but GSAP is definitely not in control of that part so that is not something GSAP is mishandling something or anything of the sort and I don't know how that a simple animation translating an element on the Y axis could cause such behaviour.

 

Maybe you could look into the Observer Plugin and drop scrolling altogether:

https://gsap.com/docs/v3/Plugins/Observer/

 

Sorry I can't be of more assistance.

Happy Tweening!

Hi Rodrigo. Thank you for your answer and time. At first I thought this was something related with snapping. But if you remove the gasp animations on the component, it does not happen. That’s why I think it has some relation to gasp. 

[Rodrigo]

Yep I see that but I can confirm that is totally unrelated to GSAP:

https://codesandbox.io/p/sandbox/section-snapping-with-section-animation-gsap-forked-dnkkwq?file=%2Fsrc%2Fcomponents%2FTesting.js%3A14%2C25

 

That is a fork of your demo using CSS transitions and the result is the same. I'm afraid that this is more related to the combination of transforms and scroll-snap that is beyond my knowledge. I'll look into this by removing react from the equation and keep everything as simple as possible. You can post in Stackoverflow or something like that in order to see if you can find something as well, but I can't promise you much though since we have to keep this forums focused on GSAP related issues and use our time on that primarily.

 

Happy Tweening!

[leandronn]

21 minutes ago, Rodrigo said:

Yep I see that but I can confirm that is totally unrelated to GSAP:

https://codesandbox.io/p/sandbox/section-snapping-with-section-animation-gsap-forked-dnkkwq?file=%2Fsrc%2Fcomponents%2FTesting.js%3A14%2C25

 

That is a fork of your demo using CSS transitions and the result is the same. I'm afraid that this is more related to the combination of transforms and scroll-snap that is beyond my knowledge. I'll look into this by removing react from the equation and keep everything as simple as possible. You can post in Stackoverflow or something like that in order to see if you can find something as well, but I can't promise you much though since we have to keep this forums focused on GSAP related issues and use our time on that primarily.

 

Happy Tweening!

Thank you so much for your time! If I found something, I'll post it for fellow devs.