Animations with scrollTrigger not working after build, using create-react-app

[Gonzalop]

I created an app with some appear animations using scrollTrigger, they work fine when using a development server (npm start), but after creating the build it works like once every 20 refreshes, sometimes less sometimes more.

If I remove the scrollTrigger the animations do work.

I see in the devTools that animations occur when scrolling, but they are different from the ones happening when it works fine. It's as if the animations sometimes break.

here's one of the animations

useEffect(() => {
        gsap.from(containerRef.current, {scrollTrigger: {
            trigger: containerRef.current,
            start: 'top center+=220',
            toggleActions: 'play reverse play reverse'
        }, opacity: 0, y: -20, duration: 1})
    }, [])

 

[elegantseagulls]

It seems to me like perhaps your content isn't loaded when your scrollTrigger is being setup, so it's firing at the wrong spot. Does resizing your browser fix the issue? If so, this is likely the culprit, and you'll need to be sure to run ScrollTrigger.refresh() once all dom content (including lazy loaded images) are loaded.

[Gonzalop]

10 hours ago, elegantseagulls said:

It seems to me like perhaps your content isn't loaded when your scrollTrigger is being setup, so it's firing at the wrong spot.

It does fire at the right spot, it's just that the animation ''breaks''.

Resizing the browser doesn't fix it, and I'm using useEffect to make sure the component is redered before setting the animations. And I have no lazy loaded images.

Not sure why I can't upload media here but this here is when it works fine, and this here is when it goes wrong.

[elegantseagulls]

Are you registering your plugins gsap.registerPlugin(ScrollTrigger)? It's really tough to debug this without a minimal demo showing your setup.

[GreenSock]

It's virtually impossible to troubleshoot without a minimal demo, but there was a regression in 3.9.1 related to a very particular scenario with .fromTo()/.from() tweens which may be affecting you here, so I'd recommend checking to see if downgrading to 3.9.0 or earlier solves things for you. The regression has already been patched in the next release, but that likely won't be officially out for several weeks. 

[Gonzalop]

See the Pen NWwdRJO by gonzzoli (@gonzzoli) on CodePen

Thats the general structure of all components using the animations, it still happens in the codepen here that it sometimes works and sometimes doesn't (and I need to refresh the page until it works). The weird thing is that either all animated components in my app work or none at all, even if they are independent from each other. I'll try downgrading and see if that solves it, thanks!

[Gonzalop]

Okay so I just tried downgrading to 3.8.0 and now it works fine every time I try it. Wouldn't have thought of it, thanks!!

[chacrasoftware]

getting this issue after the update with ScrollSmoother, on dev the animation on scrolltrigger works fine, but after build the trigger position is correct but the animation just jumps to the end, I'm using NextJS 13 and GSAP@latest, removing ScrollSmoother works too, but we need that plugin

[Rodrigo]

Hi,

 

It's really hard for us to pinpoint an issue without a minimal demo. We have this ScrollSmoother & Next template:

https://stackblitz.com/edit/nextjs-efumgr

 

Please fork it and make it look as your project (try to keep it as small as possible) so we can have a better idea of what could be happening.

 

Happy Tweening!

[chacrasoftware]

Hi @Rodrigo

 

here is the demo and it shows the same issue I am having,

 

https://stackblitz.com/edit/nextjs-aqmmjs?file=components/layout-wrapper.js

 

if you notice the second box when the trigger happens the animation just jump to end.

 

it happens only with the following.

1. initial mount -> after save (hot reload) it will work fine

2. when using timeline. if swapped with regular tween will just work fine

3. disable/uncomment the ScrollSmoother instance will just work fine

[Rodrigo]

Hi,

 

Thanks for the demo. I'll look into it and get back to you ASAP.

 

Please stand by.

Happy Tweening!

[Rodrigo]

Hi,

 

The issue lies in the fact that you are creating your ScrollTrigger instances before creating the ScrollSmoother instance. This is a logic situation since React renders child component first. There are three possibilities for this:

1. In the layout component that has the ScrollSmoother instance create a prop and pass it to the children using cloneElement and toggle it when the route changes in order to prevent issues for using the same Smoother instance with different setups.
2. Use a state in the layout component and use conditional render. Only render the children when the Smoother has been created.
3. Use React Context to have a mini API that allows you to communicated different components without props drilling and or conditional render.

I made an example using the last approach:

https://stackblitz.com/edit/nextjs-hcqury?file=pages%2F_app.js,components%2Flayout-wrapper.js,context%2FSmootherContext.js,pages%2Findex.js

 

Hopefully this helps.

Happy Tweening!

[chacrasoftware]

Hi @Rodrigo

 

Appreciated the response! really helpful!

 

Question regarding the React Context approach, checking for smootherReady is now required for all the components that uses ScrollTrigger correct?

 

again, big thanks! ❤️

[Rodrigo]

Hi,

14 hours ago, chacrasoftware said:

checking for smootherReady is now required for all the components that uses ScrollTrigger correct?

It would be ideal in order to re-create the ScrollSmoother instance to adapt to the new content height and traverse trough the elements and see if there is any data-speed or data-lag. In that case you should check Next router for route changes in the layout component, once the content is rendered in the DOM create the ScrollSmoother instance and then the ScrollTrigger in the page content. You can leverage the same React Context for doing that in a super simple way.

 

Let us know if you have more questions.

Happy Tweening!

[chacrasoftware]

Hi @Rodrigo just wanted to clarify, when you said check for the router change, do I also need to set back the toggleSmootherReady to false on the useEffect return method?

 

const {pathName} = useRouter();

useIsomorphicLayoutEffect(() => {
    let ctx = gsap.context(() => {
      ScrollSmoother.create({
        wrapper: '#smooth-wrapper',
        content: '#smooth-content',
        smooth: 1,
        effects: true,
        smoothTouch: 0,
      });
    });
    toggleSmootherReady(true);

    return () => {
        toggleSmootherReady(false);
    	ctx.revert();
    }
  }, [pathName]);

 

[Rodrigo]

6 hours ago, chacrasoftware said:

do I also need to set back the toggleSmootherReady to false on the useEffect return method?

If you'll be using that approach, indeed it'll be a good idea in order to tell the pages that is OK to create the ScrollTrigger instances.

 

Happy Tweening!