herougan

The div's height should have been set to auto. My mistake.

https://stackblitz.com/edit/react-rzanw4?file=src%2FApp.js,src%2Fstyle.css Hi, in the attached link, there are 3 divs and a sandwiched pinned animation. When the 3 divs are within the same outer div, it behaves as expected. Div1, then below that is the animation and the spacing, then Div2, then Div3. The green div should be below the blue div. But when div3 is placed outside the component, it randomly gets sucked into the middle. I'm not sure what is causing this because the padding seems correct. Thank you.

Thank you so much! I was wondering why the examples I read had the "Context" thingy. I just thought some people needed a handle to revert all animations at once. I'll go read up on it.

https://stackblitz.com/edit/react-nehjjp?file=src%2FApp.js,src%2Fstyle.css I want to create an animation where as you scroll, the image is pinned on the screen with images overlayed over that slowly reveal the image behind. However, after the animation is done, there is extra pinSpacing at the bottom and so the images skip to the bottom. I expect that when the animation ends, it should be at the end of the page, and there is no more to scroll down. On another note, when refreshing, the animation does not appear at the start but slightly in front. Scrolling with the animation past the end then back resets it correctly. I read this on the FAQ: "Why does my "scrub" animation jump on initial load? Or my non-scrub animation start playing? ..." but I don't understand the answer "Most likely the ScrollTrigger’s start value is before the starting scroll position. This usually happens when the start is something like "top bottom" (the default start value) and the element is at the very top of the page. If you don’t want this to happen simply adjust the start value to one that’s after a scroll position of 0."