[How to enable or create observer before the page content loaded in react typescript?]

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

[The animation lagging when scroll hard and mobile device [ScrollToPlugin & ScrollTrigger]]

18 hours ago, MakeUp said:

Hi, try setting will-change: transform on the CSS of your moving elements

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

[The animation lagging when scroll hard and mobile device [ScrollToPlugin & ScrollTrigger]]

18 hours ago, Rodrigo said:

Hi,

 

Did  you try normalizeScroll(true)?

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

[The animation lagging when scroll hard and mobile device [ScrollToPlugin & ScrollTrigger]]

6 hours ago, Rodrigo said:

Hi,

 

This seems more related to the way touch devices handle scroll.

 

Try using normalizeScroll and see how it goes:

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.normalizeScroll()

 

gsap.registerPlugin(ScrollTrigger, ScrollToPlugin);

ScrollTrigger.normalizeScroll(true);

Also you could try a more specific snap configuration in your ScrollTrigger instance (scroll down until the snap section and see the object configuration). Basically you want to snap to an array of values [0, 1] so it goes to the start or end point of the ScrollTrigger instance:

https://greensock.com/docs/v3/Plugins/ScrollTrigger

 

Hopefully this helps.

Happy Tweening!

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.

[The animation lagging when scroll hard and mobile device [ScrollToPlugin & ScrollTrigger]]

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

 

 

[How to keep scroll to the end of section when pin the container?]

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

[How to keep scroll to the end of section when pin the container?]

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

[How to make reusable component counter up animation in react typescript]

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.

 

[How to make reusable component counter up animation in react typescript]

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): 

See the Pen NWRGwYQ by snorkltv (@snorkltv) on CodePen

 

Current project: https://codesandbox.io/s/rough-pine-u48v3u?file=/src/App.js

See the Pen App.js by s (@s) on CodePen

[How to make footer fixed with at bottom and height change when scroll down]

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: 

See the Pen oNXZJzj by chriscoyier (@chriscoyier) on CodePen

[How to disable scroll trigger when observer is enable or waiting for all animation ended in react]

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

[How to Wait For Animation Finish Before Allowing New Scroll Events in react typescript?]

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