Scrolltrigger react issues in pin

[Mohd Ahmad]

i am creating two pins in a page (react app) and it is causing layout issue.

see demo https://codesandbox.io/s/suspicious-jepsen-pm1vmo

[Cassie]

Hey Mohd.

I'm not really sure where to start with this demo - sorry. There's a huge amount going on, several sections, text animations and a few pins plus an image spinning around in 3D space. Could you explain a little more clearly what we're meant to be looking at and what the 'layout issues' are?

 

[Mohd Ahmad]

got to animations/anim.js

the first timeline is on line 12 and another is defined in line line 33

first one is causing problem

[Cassie]

Not enough information - what is the problem? What are you expecting to happen and what is actually happening?

 

Please take the time to explain your issue properly. Thanks

[SteveS]

I work with react and GSAP quite a lot recently and I can't say that I 've ever seen someone structure a project like this. In general you want to avoid using class selectors in react and opt for react refs. You still can use class selectors, but it would be better to use some built in gsap functionality with gsap.utils.selector(). You should also be splitting your functionality into different components. There's not need to import a massive file on animations when you can let each section manage their animations independently.

Aside from that, it's true that your demo isn't very helpful.