Jump to content
Search Community

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

Vivodionisio test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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) {

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


  • Like 2
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...