gsap animation is not triggering.

[parkjihyo]

i'm kinda noobie in react and gsap,while i'm working with gsap in react i ran into the problem useeffect rendering twice in react strict mode.so to avoid that i wrote a clean up function,but now my animation is not working.also can someone provide a gsap react link of which an image expands with scroll?

here is my codesanbox link of the project.

 

https://codesandbox.io/p/sandbox/frosty-river-678j9j?file=/src/components/About.jsx:35,13

[mvaneijgen]

You can directly call scale: 0.3 in your tween instead of transform: `scale(0.3)`, GSAP has made all transform properties directly accessible.

 

I've commented out your locomotive scroll and everything works perfectly. Getting locomotive scroll to work is not really something we can help with, seen that it is a third party library. I can how ever recommend our own smooth scroll library, aptly named ScrollSmoother (https://greensock.com/docs/v3/Plugins/ScrollSmoother), this will work out of the box with GSAP and ScrollTrigge! 

 

That said there are a lot of older topics around Locomotive scroll, if you must use that plugin https://greensock.com/search/?q=locomotive scrolltrigger&quick=1&type=forums_topic&nodes=11

 

Hope it helps and happy tweening! 

 

https://codesandbox.io/p/sandbox/beautiful-kepler-vdqcjp?file=/src/components/About.jsx:30,50

[parkjihyo]

6 hours ago, mvaneijgen said:

You can directly call scale: 0.3 in your tween instead of transform: `scale(0.3)`, GSAP has made all transform properties directly accessible.

 

I've commented out your locomotive scroll and everything works perfectly. Getting locomotive scroll to work is not really something we can help with, seen that it is a third party library. I can how ever recommend our own smooth scroll library, aptly named ScrollSmoother (https://greensock.com/docs/v3/Plugins/ScrollSmoother), this will work out of the box with GSAP and ScrollTrigge! 

 

That said there are a lot of older topics around Locomotive scroll, if you must use that plugin https://greensock.com/search/?q=locomotive scrolltrigger&quick=1&type=forums_topic&nodes=11

 

Hope it helps and happy tweening! 

 

https://codesandbox.io/p/sandbox/beautiful-kepler-vdqcjp?file=/src/components/About.jsx:30,50

thanks a lot mate.,let me try the changes you've said.