ScrollTrigger & Flip with Nextjs

[Zoran Vitez]

Hi there!

 

I've been trying for hours to get this this amazing demo from codrops that uses ScrollTrigger and Flip to work in Nextjs, but I'm getting strange behavior, -as you can see in this codesandbox. Could anyone help me understand why in Nextjs it behaves the way it does?

 

Thank you!

[Rodrigo]

Hi @Zoran Vitez and welcome to the GreenSock forums!

 

Yeah Codrops demos are not exactly the simplest things to get done and you should start with the basics, with just one section and perhaps split each section and it's corresponding Flip animation into it's own component. I know that in React world doing stuff with the smallest amount of code is cool, but there is nothing wrong in a little redundancy, especially when things are not working as expected.

 

Unfortunately your example is quite large and we don't have the time resources to go through all that code and see what could be the issue.

 

In the mean time this example created by Jack should provide a solid starting point:

 

Hopefully this helps.

Happy Tweening!

[Zoran Vitez]

Hi @Rodrigo, thanks for the welcome and the suggestions

 

I simplified everything down and noticed a silly mistake - ref'd the wrong element.

 

Now I got it to work, but only if reactstrictmode is disabled. I updated the codesandbox link above (it's super simple now in case you'd like to have a look)

 

I'm using ctx.revert in useLayoutEffect to fix the issue that reactstrictmode surfaces, but I guess it's not applied to Flip calls.

Am I right in my assumption that using gsap.context only works with calls made directly to gsap.to, and I just need to manually revert the Flip.to call?

 

Thank you!

[Rodrigo]

Hi,

 

Actually Flip.from() creates and returns a GSAP Timeline. As long as that is called inside a GSAP Context instance, when that instance is reverted so will be any GSAP instance created inside of it, that includes a timeline returned from a Flip.from() method.

 

The issue in your example is that the triggerFlipOnScroll method doesn't returns the GSAP instance created by Flip, so that particular instance ends up outside the scope of the GSAP Context instance and hence is never reverted. This should resolve the issue with StrictMode:

const triggerFlipOnScroll = (galleryEl) => {
  // Create the Flip animation timeline
  const tl = Flip.to(flipstate, {
    ease: "none",
    absoluteOnLeave: true,
    absolute: false,
    scale: false,
    simple: true,
    scrollTrigger: {
      markers: { startColor: "green", endColor: "red", fontSize: "12px" },
      trigger: galleryEl,
      start: "center center",
      end: "+=300%",
      pin: galleryEl.parentNode,
      scrub: true,
    },
    stagger: 0,
  });
  return tl;
};

 

Hopefully this helps.

Happy Tweening!

[Zoran Vitez]

Hey Rodrigo, thank you for explaining that. Unfortunately that didn't help. I tried moving everything from the function directly inside the gsap.context() call and that didn't help either. Any other ideas?

 

 

Thank you for your time!

 

[Rodrigo]

Hi,

 

You can store your GSAP Context in a ref and in your layout effect use ctx.current. Then add the method to GSAP Context and use it in your handler, something like this:

let ctx = gsap.context((self) => {

  // use any arbitrary string as a name; it'll be added to the Context object, so in this case you can call ctx.onClick() later...
  self.add("onClick", (e) => {
    gsap.to(...); // <-- gets added to the Context!
  });

}, myRefOrElement);

// now the Context has an onClick() method we can tap into and any animations in that function will get added to the Context
myButton.addEventListener("click", (e) => ctx.onClick(e));

In react it would look a bit like this:

const ctx = useRef();

const myHandler = () => {
  ctx.current.myMethod();
};

useLayoutEffect(() => {
  ctx.current = gsap.context((self) => {
    self.add("myMethod", () => {
      // Run and create your Flip instances here
    });
  });
  return () => ctx.current.revert();
}, []);

Hopefully this helps.

Happy Tweening!

[Zoran Vitez]

Hey, the issue I have is that context.revert doesn't seem to work with reactstrictmode turned on. It just leaves the animation in its final state, as you can see in the sandbox https://codesandbox.io/p/sandbox/gsap-scrolltrigger-nextjs-starter-forked-2prgvp. I can see that it does do something, becuase without context.revert the behavior is even worse. There seems to be a bug. Everything works fine if I guarantee the animation is loaded only once manually.

How can I address that with the handler you suggested?

[Rodrigo]

Hi,

 

19 hours ago, Zoran Vitez said:

the issue I have is that context.revert doesn't seem to work with reactstrictmode turned on

That's just not possible. One of the reasons and uses of GSAP context was react strict mode. GSAP context has been used in hundreds of not thousands of react/next apps and the forums would be swamped with threads by users complaining about it.

 

Right now I'm on my phone so I can't do much but I saw in a quick glance of your CSS that you have some CSS transition in some classes. If those affect the same elements you're animating with GSAP, then that's going to cause an issue.

 

Finally your example has a lot of CSS styles, if you could simplify it as much as possible it would help. Also give Flip.from a try instead of Flip.to and see how that works.

 

Happy Tweening!