imjs

In the pin is good enough. Could you please share how? Zach, I have another question - since I am pinning the div, gsap is doing all the calculation on the height, and padding value of the pin-spacer, after the component is mounted, correct? In my app, this animation is located in a lower section of a page (rather big page). If the user has a slower internet, and the user started scrolling before all the components of the page is fully rendered. What happens then is that the calculation is off, the section is overlapping with the section before/after it. I currently wrapped the animation in a setTimeout but it is not ideal. Any advice for this issue?

Hi Zach, Thanks for replying. Firstly, I forgot to add `scrub: true` to my initial demo. It is now added. Secondly, the end goal is how it is after your edits, without the jumping. Is there any other way to set it up?

I have a scroll animation, where the 3 cat images will scroll into alignment on the background image. I only want the animation to run once. So I added `once: true` to scrollTrigger. But I also want to remove the white space (created by pin-spacer) when the user scroll back up. It will just be the background image with 3 cats, no additional white space above. Any suggestions? Another question, if you start scrolling quickly before the background image is fully loaded, you will see that the image will overlap with the section after. How to avoid this issue?

Yes, refresh. Not hot reload. I added a setTimeout as you recommended. I will keep you updated on how things turn out.

Hello, I am building a website using Gatsby/react. I created a scroll parallax animation using ScrollTrigger (see simplified version in codepen) The issue is... when the page is first-time loaded, all is good. But if I refresh the page, the animation is all messed up. More specifically, the starting point of the trigger is higher than it was (no longer at the center of the trigger div). And then, the animation ends up overlapping with the div that comes in front it. When animation ends, it jumps back down. I was NOT able to recreate the issue in codepen and suspect that it is related to Gatsby's Scroll Restoration or caching behavior. I know it is hard to investigate when I can't reproduce the error in codepen. I just wonder if anyone had experience dealing with Gatsby and scroll-related animation and dealt with similar issues, and maybe can point me to the right direction. Secondly, does the start position of a ScrollTrigger re-calculated when a page refresh? According to the doc, it only does so on window/scroller resize.

@akapowl Yes, it is what I wanted! Thank you so much Paul?

Hi @PointC, Thanks for your reply and the tips. Thanks for fixing the duration. The issue I intended (sorry it was not clear) to fix is...how to make the scroll "harder" . Now, the whole animation speed is depending on how fast I scroll. The faster I scroll, the faster the animation ends. And with a normal user's scrolling speed, the animation ends quickly. I want to slow down that scrolling speed. You almost have to work for it, (like you have to scroll two strokes to make the element move a bit), really scroll a lot to make the elements of the equation come to their final position. It is a bit hard to explain, sorry about that. A good reference would be typeform.com on the scrolling speed.

I want to slow down the speed of equation elements ('methods', '+', etc) coming into their final position. I tried changing the duration and y values, they have no impact. If I change the markers start and ending position. The final image will then clash into the section that comes after. Any suggestions?