ScrollTrigger instance in React Component doesn't recognize the scroller and needs window resizing to fire.

[Hugo Priet]

Good morning (or whatever), mighty wizards! I'm trying to reproduce a UI animation I found on Dribble with React & Greensock (as per it is my hobby), and I'm using FLIP and ScrollTrigger. So far so good on the FLIP part because it is properly amazing, but I'm having a bit of a struggle with a specific ScrollTrigger instance.

Let me explain: I have a collection of (selected) items in my app state, and I render them starting with a FLIP animation inside a scrolling container. I have state values linked to css custom properties to update things like opacity, pointer-events, and in this case the overflow property of the container.

This way, the element can FLIP into its container, and then revert to overflow : scroll because obviously.

Inside my selected item component, I set up a ScrollTrigger instance with ScrollTrigger.create in order to have only the three items in view to toggle "active" class during scroll. Here's the main issue: I struggle to understand why, and I've been on it for a while, the main idea works flawlessly because I tried to minimally reproduce it here:

See the Pen VwMNweb by smoothdev35 (@smoothdev35) on CodePen

 

But! In my complete demo, the trigger only seems to fire if I resize my codepen window! Going through the forum, I figured it meant the trigger is reacting to the body rather than the selected scroller. I'm not sure if it has to do with forwarding refs, memoizing something, persist something through re-render,  some obscure hook I'm unaware of, my styling changes based on state, or if it is simply a blatant beginner mistake I'm not able to see! Either way, I would be extremely thankful if someone could help me on this one!

See the Pen BawJgWe by smoothdev35 (@smoothdev35) on CodePen

[OSUblake]

Hi Hugo,

 

There's over 800 lines of code in that demo. If you can reduce that down to a minimal demo that reproduces the issue, we'd be more than happy to take a look. Thanks!

 

[Hugo Priet]

Hi @OSUblake, thank you for your quick answer! Here you go , I updated the minimal one and here's the issue : when you add an element to the collection, it doesn't toggle the "active" class based on the trigger when rendered, only if I resize the window. It works perfectly with a static array.

Here it is:

See the Pen VwMNweb?editors=0100 by smoothdev35 (@smoothdev35) on CodePen

[OSUblake]

Is this what you're looking for?

 

See the Pen XWeLXoR by GreenSock (@GreenSock) on CodePen

 

[Hugo Priet]

!! Did I just need the Refresh?! Thank you! That was exactly what I was looking for!

[elegantseagulls]

8 minutes ago, Hugo Priet said:

!! Did I just need the Refresh?! Thank you! That was exactly what I was looking for!

Yes, resizing the screen causes a ScrollTrigger.refresh(), so basically you're doing the same thing when you add each.