Click event trigger animation

[SA5]

Hi there,

 

I am super amazed with greensock library, thanks for creating such an awesome library.

 

Trying to create basic button click / slide down animation. Example shown in codepen, for the first time when I click on open and close button it works without any issue, but its stop working when I try to click on the button again, anyone have ideas where I did wrong and point me to the right direction.

 

Thanks in advanced.

 

See the Pen EaOrNP by anon (@anon) on CodePen

[GreenSock]

It's not so much that you did something "wrong", but you stumbled upon a tricky case. There's an easy solution, but let me explain a few things first...

 

One of the nice things about GSAP is that it doesn't force you to always tell it BOTH starting and ending values. You can just feed it ending values and it'll read the current values as the starting values. The tricky thing here is that you set a transform: translateY(-100%) in the CSS and when GSAP reads the "transform" property, the browser always spits back a matrix() which does NOT distinguish percentages at all. For example, let's say your <div> is 100px tall and you apply a transform: translateY(-100%), the matrix() will basically say it's 100px up. 

 

Another really neat thing about GSAP is that it simultaneously accommodates two distinct types of translation - px-based "x" and "y" as well as percent-based "xPercent" and "yPercent". You can layer these on top of each other for very useful effects. For example, set xPercent:-50, yPercent:-50 to get the origin centered on the element, and then use "x" and "y" to move it around wherever you want so that the center of the element is precisely placed regardless of the element's size. 

 

So in your case, you had two "y" tweens, one that had a percent, and one that didn't. As a convenience, if GSAP sees a "%" in a normal "x" or "y" tween, it'll automatically treat it like you meant "xPercent" or "yPercent". Ultimately, your tweens ended up animating 2 distinct types of transforms, but obviously you didn't intend that. Your "100%" tween ran once, arrived at 100%, and then the other tween animated the regular "y", so the next time you tried tweening to "100%", nothing happened because it was already at 100% from the last time.

 

The solution is to first use a set() to tell GSAP about the percentage-based and px-based values to properly distinguish them. Remember, it can't discern your percentage-based value that you set in the CSS because the browser reports them as a px-based matrix(). But when you set transforms using GSAP, not only is it much faster to animate them, but it records them internally in the proper way so that you don't lose that %-based data. 

 

Then, you should use yPercent to animate instead of y. Here's a revised fork that shows it working:

 

http://codepen.io/anon/pen/azQXGp

[SA5]

Thank you so much for your detailed explanation, it makes much more sense to me know =D