ScrollTrigger, REACT and Vertical scrolling effect

[steen hjalmar larsen 4 Likes (Newbie)]

Having trouble getting ScrollTrigger in REACT to work
Creates a Vertical scrolling effect that works in vanilla javascript, but not in REACT ("https://codesandbox.io/s/gsap-scroll-4nl2tv?file=/src/App.js")
Have now spent mage days troubleshooting, any help would be greatly appreciated

See the Pen jOzbEWm by shl (@shl) on CodePen

[Cassie 5,659 Likes (Superhero)]

Hey there - have you read our React articles?
 

 

Start there and if it doesn't help - pop back!

[steen hjalmar larsen 4 Likes (Newbie)]

Yes I have looked at quite a few of the examples from
"Getting Started with GSAP + React" and "GSAP + React, Advanced Animation Techniques"
but have not been able to find any solution to my problem.
It seems strange that my React code does not work as all DOM elements are loaded when I use useEffect

[GreenSock 18,894 Likes (Superhero)]

It looks like you set the container to display: flex which turns off pinSpacing by default because padding/spacing works differently in that context. So just set pinSpacing: true to override that default: 

 

https://codesandbox.io/s/gsap-scroll-forked-q8x1nl?file=/src/App.js

 

I also noticed that you forgot to add an empty dependency array to the useEffect() which I think is required in React, otherwise it'll get called every time the component renders. 

[steen hjalmar larsen 4 Likes (Newbie)]

Thank you so much it worked 😀
Strange that it works with Vanilla JS without pinSpacing: true. where I also use display: flex

[GreenSock 18,894 Likes (Superhero)]

28 minutes ago, steen hjalmar larsen said:

Strange that it works with Vanilla JS without pinSpacing: true. where I also use display: flex

Actually that isn't true - look at the console: 

See the Pen XWEXzoM?editors=0010 by GreenSock (@GreenSock) on CodePen

[steen hjalmar larsen 4 Likes (Newbie)]

15 hours ago, GreenSock said:

Actually that isn't true - look at the console: 

 

 

You are right that there is a difference in what is registered as a parent node
In Vanilla JS it is "#root", while in React it is first "#root" and then it changes to ".pin-spacer"
Can see that GSAP changes the DOM

 

THANK YOU once again for your responsec 💕