deodat's post in Problem with isReversed in a burger animation was marked as the answer
Ok, so I've found a solution which is to integrate my timeline in a useState like this :
(but it's not very clear to me why this works... )
const [tlBurger] = useState(
gsap.timeline({
paused: true,
reversed: true,
defaults: {
duration: 0.5,
ease: 'Back.inOut.config(2.3)',
},
})
);
const burgerRef = useRef();
const waveTopRef = useRef();
const waveMidRef = useRef();
const waveBotRef = useRef();
const flatTopRef = useRef();
const flatMidRef = useRef();
const flatBotRef = useRef();
useEffect(() => {
tlBurger
.to(waveTopRef.current, { morphSVG: flatTopRef.current }, '<')
.to(waveMidRef.current, { morphSVG: flatMidRef.current }, '<')
.to(waveBotRef.current, { morphSVG: flatBotRef.current }, '<')
.addLabel('hover')
.to(waveMidRef.current, {
duration: 0.3,
scaleX: 0,
transformOrigin: 'right center',
ease: 'none',
})
.to(waveTopRef.current, { y: 10 }, '-=0.1')
.to(waveBotRef.current, { y: -10 }, '<')
.to(waveTopRef.current, {
rotation: 45,
transformOrigin: 'center center',
})
.to(
waveBotRef.current,
{ rotation: -45, transformOrigin: 'center center' },
'<'
);
}, [
tlBurger,
waveTopRef,
waveMidRef,
waveBotRef,
flatTopRef,
flatMidRef,
flatBotRef,
]);
