Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Hugo Priet

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

Recommended Posts

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

Link to comment
Share on other sites

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!

 

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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.

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×