help Toggle width with play() and reverse()

[modulareverything]

I have a React component that I'm trying to toggle the width of when a button is clicked. When the button is clicked again, it goes back to the original width.

 

The problem is the original width could be anything, depending on the viewport size as it's responsive. On small devices it's 75%, large it's 25% with a few others in the middle. There's also another animation that animates the opacity and position of the element I'm targeting here.

 

Here's what I have so far;

 

 

useEffect(() => {
  const tween = gsap.to(slashRef.current, {
    width: '100%',
    ease: 'power3',
    paused: true,
  });

  if (menuOpen) {
    tween.play();
  } else {
    tween.reverse();
  }
}, [menuOpen]);

 

I've tried starting it as paused, and when the `menuOpen` is true it animates the width fine. When it's `false` it's not reversing it back to its original position as I would expect — clearly I'm missing something.

 

I've tried a bunch of different approaches using state and ref to set the original width and trying to access that but I've had no joy so far. I'm sure it's something simple I'm missing.

 

Thanks for any help,

Chrish

 

[ZachSaucier]

Hey ccld and welcome to the GreenSock forums!

 

To me this sounds like an issue where the animation value is cached when it's instantiated and it doesn't match the value when you are actually wanting it to animated. Without seeing a demo of the issue it's pretty hard to know if that's the case though  

 

Can you please create a minimal demo using something like CodeSandbox so that we can take a look for ourselves? 

[OSUblake]

That creates a new tween whenever menuOpen changes. You need something like this.

 

https://codesandbox.io/s/clever-austin-bhltw?file=/src/App.js

 

[modulareverything]

That's perfect @OSUblake — these were definitely the gaps in my knowledge. Thanks for filling them in!

[modulareverything]

How could you add a delay to this? I tried adding delay: 0.25 to the tween but it didn't do anything

 

Edit: delayedCall() seems to do the trick

Edited May 6, 2020 by ccld
Solved

[OSUblake]

Hm... delay is when it first starts, but that tween has already started, it's just reversed.

 

You can use a timeline instead.

tween.current = gsap.timeline()
  .to(box.current, { x: 300 },0.25);