react and gsap – three phase animation, but reverse() not working

[Vivodionisio]

Hi! : )

 

I've created a minimal demo but my pen isn't working. I've tried to set it up as you have in one of your own examples using jsx, so I'm a but flummoxed on that. Can my github repo substitute? If so its https://github.com/Vivodionisio/item-animation-minimal

 

This is what it would look like initially...

 

I've been at this for quite a while, but alas, going nowhere! What I have is six box components laid out in a row. Each box contains two divs, a grey box div and a coloured modal div. Initially you can only see the grey box div, but when this gets clicked the modal comes into view, assuming the position and dimensions of the grey box (using boundingClientRect), but for larger height which extends from the bottom. Now the modal is visible it can be clicked in order for it to fully expand. Upon expansion a close button appears to reverse that expansion, which is the bit that isn't working. It needs to go back to the position from whence it came. 

 

I've tried a few different approaches, and I've read the best practices outlined in one of your Greensock articles (very helpful), but still can't crack it.

 

Thanks in advance for any help/input!

 

 

See the Pen OJQMEbL?editors=0110 by saulnewbury (@saulnewbury) on CodePen

[Cassie]

Hey there!

 

A working template would be a great start - here's a codeSandbox starter that may be useful.

https://codesandbox.io/s/gsap-bonus-plugins-react-starter-je6ln

One you've got that working I'm sure someone will be able to jump in and advise

[Vivodionisio]

Hi @Cassie, 

 

Thanks for the sandbox starter. And btw, love the animated logo... looking forward to checking out your tutorial on that. 

 

Okay, so this should be a working example now... 

https://codesandbox.io/s/sharp-wright-vutdo0?file=/src/styles.css

[OSUblake]

He Vivo,

 

You probably need to get the root of your problem and make sure your expandModal and contractModal don't get called at the same. That's what happening right now, so as soon as you click to close, it also expanding it. For now, you could just exit the function.

 

 

function expandModal() {
    console.log("expanding modal");

    if (isExpandedRef.current) {
      return;
    }

    isExpandedRef.current = true;
    t2.current = gsap.timeline();
    t2.current
      .to(modalRef.current, {
        scaleY: 2.6,
        scaleX: 2.6,
        top: "30px",
        left: "50%",
        xPercent: -50
      })
      .to(btnRef.current, { autoAlpha: 1 }, "<");
  }

 

[Vivodionisio]

Aha. Plain old event bubbling, of course. Not a quirk of gsap working with react as I imagined. Thank you so much!