Retrieving ScrollTrigger instances in React

[Tagliavia]

Hi everyone and thanks for GSAP.

 

I'm using ScrollTrigger in a React Project, but struggling with debugging some issues.

At the moment I'm trying to see all ScrollTriggers instances that are active by console.log(ScrollTrigger.getAll()), but no output is printed to the console.

Any pointers regarding this would be appreciated.

[GreenSock]

Welcome to the forums, @Tagliavia. 

 

If an empty Array is being returned at that point, that means there are no ScrollTriggers. It's super difficult to troubleshoot blind, though - if you still need some help, please provide a minimal demo (please don't include your whole project - just try to isolate things in the simplest possible example) and we'd be happy to take a peek. 

[Tagliavia]

Thank you for the quick reply and sorry for being AFK for so long.
Looks like create react app development mode might have some issues with GSAP. After shutting down and restarting scrollTrigger instances appeared in the console.

 

In the time being i'm actually testing the library to get a better understanding of it in a basic create react app project. 
 

Here is the github repo: https://github.com/rtagliavia/gsap-playground.git

 

So far animations work as expected if each item has a unique  ID or className that is not repeated in the code, but trigger position is giving me some headaches.

 

When setting start at center center, marker for start is way higher than element to be animated.

 

[GreenSock]

50 minutes ago, Tagliavia said:

Looks like create react app development mode might have some issues with GSAP. After shutting down and restarting scrollTrigger instances appeared in the console.

My guess is that maybe it's a hot reloading thing (unrelated to GSAP/ScrollTrigger itself). GSAP definitely works great in React. For some tips, see:

 

52 minutes ago, Tagliavia said:

So far animations work as expected if each item has a unique  ID or className that is not repeated in the code, but trigger position is giving me some headaches.

You might want to look at gsap.utils.selector() to help you scope your selections. Super handy.

 

I don't have time at the moment to download your project and try to get a local dev environment going - typically it's much better to provide your minimal demo in an in-browser environment like CodeSandbox.io. Here's a starter template: https://codesandbox.io/s/gsap-react-starter-ut42t

 

If the start/end values seem off, the most common problem is dynamically adding things to the DOM that shift around the layout AFTER the page has loaded. Just call ScrollTrigger.refresh() after you're done doing anything with the DOM - that tells ScrollTrigger to recalculate all the start/end values.