leandronn
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by 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.
-
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.
Scroll snap failing if animation not finished
in GSAP
Posted
Thank you so much for your time! If I found something, I'll post it for fellow devs.