Jump to content
GreenSock

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

Problem with isReversed in a burger animation

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

I saw this pen :

See the Pen vYOrQXb by GreenSock (@GreenSock) on CodePen



it seems a better approach for what I'm trying to achieve, and maybe it's gonna be easier to translate in a React way :) 

Link to comment
Share on other sites

I've tried soooo many things 😪

Link to comment
Share on other sites

Hey deodat. Unfortunately helping you with the React port of your CodePen is out of scope for these forums. With that being said, if you make a minimal demo of the issue in React (using something like CodeSandbox) often times people will help you out anyway in these forums :) 

Link to comment
Share on other sites

Hey Zach, thanks for the reply. 
To be honest, I was a little lazy on this, hoping someone will spot some foolishness in my code.

But now I'm gonna make this demo on CodeSandbox for my mental health :) 

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

I'm glad you got it figured out.

 

Note that ease: 'Back.inOut.config(2.3)' is invalid. It should be something like ease: 'back.inOut(2.3)'.

  • Like 2
Link to comment
Share on other sites

Indeed !!! thanks Zach :)

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.
×