Appearing footer

[popland]

I'm trying to make something that apparently is easy, but i cant get out;

basically i have a link at the bottom of the page, when i click the link i would like a footer appear sliding up, and when in the footer i click another link, the footer slide back.
I made up 2 animations (im working in react) to which i pass the div to animate 

 

<div className="fixed bottom-0 left-0 mb-2 ml-2 text-sm uppercase">

        <div className="flex">

          <div className="relative">

            <button onClick={handleColophon} disabled={disabled}>

              {state.menuName}

            </button>

          </div>

        </div>

      </div>

<div

        className="fixed bottom-4 left-0 w-3/4 h-32 hidden"

        ref={(el) => (cWrapper = el)}

      >

        <div

          className="relative  text-sm uppercase  bg-gray-200 h-full p-5 m-2 overflow-hidden "

          ref={(el) => (clf = el)}

        >

          <div className="flex">

            <div className="relative">

              Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos eum

              iste temporibus magnam assumenda quas ad dolorum quaerat corrupti

              et odio vitae iure aspernatur aperiam, deleniti cum! Consequatur,

              rem quibusdam!

            </div>

            <div className="">

              <button onClick={handleColophon}>CLOSE</button>

            </div>

          </div>

        </div>

      </div>

 

export const ColophonOpen = (clf) => {

  gsap.from(clf, {

    duration: 0.7,

    y: 300,

    ease: 'power4.inOut',

    transformOrigin: 'left bottom',

  });

};

 

export const ColophonClose = (clf) => {

  gsap.to(clf, {

    duration: 0.7,

    y: 150,

    ease: 'power4.inOut',

  });

};

 

also, the animated div is inside another fixed position div that is shown before the animation and hidden after.

 

The animation works correctly for just two cycle, it starts hidden, when i click the button it slides up, when i click the close button it slides up, but then it doesnt slide up again;

i think it is something that have to do with y and transformOrigin

 

this is the div after the first click (it slides up):

<div class="relative  text-sm uppercase  bg-gray-200 h-full p-5 m-2 overflow-hidden " style="height: 100%; opacity: 1; transform-origin: 497.5px 64px; transform: translate(0px, 0px);"><div class="flex"><div class="relative">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos eum iste temporibus magnam assumenda quas ad dolorum quaerat corrupti et odio vitae iure aspernatur aperiam, deleniti cum! Consequatur, rem quibusdam!</div><div class=""><button>CLOSE</button></div></div></div>

and this is the div after i click close (sliding down)

<div class="relative  text-sm uppercase  bg-gray-200 h-full p-5 m-2 overflow-hidden " style="height: 100%; opacity: 1; transform-origin: 497.5px 64px; transform: translate(0px, 150px);"><div class="flex"><div class="relative">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos eum iste temporibus magnam assumenda quas ad dolorum quaerat corrupti et odio vitae iure aspernatur aperiam, deleniti cum! Consequatur, rem quibusdam!</div><div class=""><button>CLOSE</button></div></div></div>

then clicking again to show, i see that translate changes, but the revert to 0,150 and the div stays hidden

 

any suggestion?

[ZachSaucier]

Hey popland and welcome to the GreenSock forums.

 

Can you please create a minimal demo of the issue using something like CodePen or CodeSandbox for us to take a look at? That will help us help you:

 

[popland]

33 minutes ago, ZachSaucier said:

Thank you!

i will try to make a codepen, extracting the part i need only

Hey popland and welcome to the GreenSock forums.

 

Can you please create a minimal demo of the issue using something like CodePen or CodeSandbox for us to take a look at? That will help us help you:

 

 

[popland]

1 hour ago, ZachSaucier said:

Here is a link to a little demo

https://codesandbox.io/s/lingering-dream-72ywz

the link is on the bottom of page, the colophon appear, then disappear, then never reappear

 

 

[ZachSaucier]

Hmm. When I click "Colophon" it opens. Then I click "CLOSE" and it closes. And then I do it again and they both work... Does the demo not recreate the issue? Or am I missing something?

[popland]

I played with it a bit and have it to work, but i dont know if this is the exact method,

since the footer is absolute position i thought it would need a both "from" and a "to" animation, but even if it works, im not still sure i coded it the right way

 

[ZachSaucier]

I see.

 

Some thoughts:

• You don't need the css object wrapper in your tweens. GSAP automatically detects which properties are CSS ones. 
• It's often best to set up animations beforehand and use control methods inside of your event listeners to control them like this article about animating efficiently covers. 
• Using a timeline would perhaps be helpful. That also would allow you to use defaults. Both are talked about in the article linked to above.

I can't comment much about your React setup as I haven't used React much.

[popland]

Thank you, i will surely chek that link