Jump to content
Search Community

Problem with isReversed in a burger animation

deodat test
Moderator Tag

Go to solution Solved by deodat,

Recommended Posts

Hello,

I'm trying to replicate the animation you can see in this codepen in a React environnement (Gatsby), but I'm unable to pass in the condition where isReversed is equal to false and I don't understand why.
Here is my codesandbox where I replicate the problem in a minimal demo : 
https://codesandbox.io/s/modest-williamson-vw78t

So I can't reverse the animation on click.


Thanks for your precious advices,

Deodat

See the Pen OJRYXdV by deodat (@deodat) on CodePen

Link to comment
Share on other sites

  • Solution

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

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...