Since you're pin contains your next animation, it's not longer tied to a viable scroll position. You might look at this for its "containerAnimation" or "isInViewport":
You have overflow hidden on your html/body, but are trying to use window.scrollTo, which is contradictory. Have you looked at using GSAP's scrollTo functionality/plugin? I also see multiple scroll bars in the CodePen, so I'm guessing that's also causing an issue.
For your end value you spelled 'center' incorrectly, and your end value is triggering before your start value the way you have it setup.
#designExt {
max-width: 100vw;
overflow: hidden;
height: 100vh;
display: flex;
flex-wrap: nowrap;
position: relative;
}
Updating the css to this seemed to work for me, unless I'm misunderstanding your question.
You shouldn't need to limit the overflow on the body.
Your fromTo needs more information, but it looks to me like you can just use a to animation for this. Example:
gsap.to(
".right-door",
{
opacity: 0.85,
scrollTrigger: {
trigger: ".right-door",
scrub: true,
start: "top top"
},
xPercent: -50
}
);
I think that's just browser behavior for when you remove content in Safari... I'd suggest also manually setting your scroll position immediate after you remove the content.
Removing the button and taking the paused: true off the animation seems to play the animation just fine.
The nature of setting things up like this, it's hard for React to know how many children/sub-children there are. That said, we set something similar to this up a long time ago, but I'm having trouble re-piecing it together in my head... this was when we were using pure components and lifecycles instead of hooks.
You can setup animation components and import those into your other components in to avoid repeating code.
Also, we've found using https://greensock.com/docs/v3/GSAP/gsap.registerEffect() and making the effects into hooks works pretty well across bigger projects.
You shouldn't need to use TimelineLite anymore (as of version 3.0). You can now just use gsap.timeline(). Also, you can write eases as strings now, so no need to import those (unless it's a special ease).
More info here:
I cannot replicate with my browsers, but I'd imagine you've got some overflow on another element that's causing the body to try to scroll separately from the scroller in your setup. have you tried removing the overflow-x and overflow-y styles from the .fl-tests class?