Simple opacity fade doesn't work in React?
I've been running into a lot of issues using .from and .to with opacity tweens with React so I did a simple example to demonstrate. .from seems to just stop before the full tween when used in react and .to doesn't animate.
Opacity Tween stops in React (You can switch .from to .to and still no dice)
https://codesandbox.io/s/proud-dawn-uic35x
Same tween works in Vanilla - CodePen
Solution:
This thread now addresses a larger issue between first ren
Ok -
With strict mode, if you do a cleanup, use useLayoutEffect and add immediateRender:false on your from tweens it works. https://codesandbox.io/s/eloquent-cloud-56ghy5?file=/src/App.js
useLayoutEffect(() => {
let from = gsap.from(elem0.current, {
rotation: 360,
immediateRender: false
});
let to = gsap.to(elem0.current, {
opacity: 0,
delay: 1
});
return () => {
from.kill();
to.kill();
};
});
