Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

deodat

ShockinglyGreen
  • Posts

    14
  • Joined

  • Last visited

Community Answers

  1. 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, ]);  
×