Krix

When using Observer in React, it does not prevent the scroll or touch event at the beginning before page content is loaded. So when I scroll or touch before the observer is created, the page will scroll down. Is there any way to know when the observer prevents default is active to not let the user scroll? Tks for spending time on my topic. This situation happens in mobile devices. You can watch the video I demo at here: https://drive.google.com/file/d/18FOc1qc-5xf-tIKMLJGDFu6-0UG4E_w9/view And I also attach the example project link: https://codesandbox.io/s/blissful-moore-s9qzj5?file=/src/pages/page1/index.tsx

Do you mean to add that CSS variable to all the elements that have animation?

Sorry for my late response, the normalizeScroll reduces lagging animation.

Thanks for your response, I tried the snap with values [0,1] but it has a delay time (even though I set the delay time as 0) and it does not scroll immediately.

My case is when the user scrolls the first time, no matter whether short or long, the animation must be finished. And revert the animation when going backward. But somehow when I scroll hard, the heading is lagging. You can test it on a mobile device and see the difference. video: https://drive.google.com/file/d/17V6gMXfMVGqWCzZppKC5TwgKmZBSbC_g/view?usp=drivesdk Codesanbox link: https://codesandbox.io/p/sandbox/charming-hill-ss2m8s

@Cassie, sorry to bother you but can you spend a moment thinking about my problem.

In my case, each section has a dynamic height and I expect to when the current section scroll to the end of it, the fadeout animation will play and fade in the next section. But when I pin the container, the section that has more than 100vh will pin and not scroll to the end. use can see the example project here: https://codesandbox.io/s/cool-shape-lnywsh?file=/src/App.tsx

Hi @Cassie, thank you for interesting of my question and I appreciated it. When I testing same code in codesandbox and looking back to my local code I just found out my issue only happen in local and I already fixed it.

I had tried some example in forum and youtube in react but it not work right. My expect is when counter in viewport it's will play once and not play when enterback or enter again. One of them(examples): https://codepen.io/snorkltv/pen/NWRGwYQ Current project: https://codesandbox.io/s/rough-pine-u48v3u?file=/src/App.js

This animation in example codepen is my expect but other component must have background-color for hiding the footer. I want to make a footer that only show in viewport and if other above components have transparent background it would work fine. codepen: https://codepen.io/chriscoyier/pen/oNXZJzj

My expect is when the user scroll to the lottie section, it will keep the viewport at that section and play like 50 frames for 1 scroll, continue until the end of lottie frame. Then the scroll behavior will back to normal. If user enter back it will animating in backward way. use can see the example project here: https://codesandbox.io/s/prod-fire-3jyss6?file=/src/LottieAnimation.jsx

I would like to ignore all scroll events until the currently acting timeline is finished. What would you all recommend? example: https://codesandbox.io/s/laughing-cache-y51p4z?file=/components/Main.js