Help getting a ScrollTrigger animation to work in React

[evan.oneil]

I am still at the early stages of learning React, but I was wondering if anyone had resources or suggestions on how to get this to work in React. I've picked up that using

gsap.registerPlugin(ScrollTrigger); 

is a neccesary first step, but beyond that I'm struggling to find a way to port this over to React. I would greatly appreciate any help, thank you!

See the Pen gOmZYqL by evanoneil (@evanoneil) on CodePen

[OSUblake]

Hi Evan!

 

Love your avatar. Best browser ever!

 

Your code probably isn't going to port over to React that well, but that animation is definitely doable. For get started with React and ScrollTrigger, I would recommend checking out this article first, and then if have any more questions, please hesitate to ask.

 

If you need to make a React demo,  you can use codesandbox.

 

[evan.oneil]

Thanks for the quick reply! I have read through that article a few times and been experimenting, I'm struggling to know where to start with getting the pin function to work. I tried to modify the example from that article with something basic of getting the Greensock logo to pin to the second slide, but no luck so far. Here's the codesandbox of this initial effort.

 

Do you have any suggestions of resources I could look into for using the pin function in react or thoughts on how I can get it working?

 

Thanks!

[OSUblake]

Pinning works fine. Your end was messing with it, that's all.

 

A new selector utility was added in 3.7.0, which can help clean all those element.querySelectors.

 

https://codesandbox.io/s/scrolly-4-forked-2hybo?file=/src/App.js