[A single step animation (with reverse possibility)]

Thanks for the suggestion! I think I'll go with that, because I also need callbacks on Reverse start and end, and in that case it's probably better to have a separate reversed animation.

[A single step animation (with reverse possibility)]

Thanks for your replies Jonathan and Carl!

 

That's my bad, I had to explain my issue a bit further. I want some of my animations to have only 1 iteration on mobile devices. Repainting the whole document is very costly so I decided to still provide them with animation, but only with 1 frame of it.

 

So, I have overlay and content that animate at the same time, on mobile devices overlay should change with no animation in a specific order:

 

Overlay visible → Content starts animating → Content animation finishes.

 

When reversed:

 

Overlay hidden → Content starts animating → Content animation finishes.

 

I've made a codepen for better understanding, as you suggested:

 

 

Basically Carl's method is the same as Negative Stepped easing method, but they both don't provide much control of what's happening in reversed state.

 

I can understand why Negative Stepped easing method doesn't work for me, because it steps from bottom (as a ladder), but I need it to step from top.

 

My example is a lot simplified from what I am actually using, it has a lot of callbacks on both Tweens and Timeline, that's why my Callback hell method is called so.

[A single step animation (with reverse possibility)]

Hello!

Is it possible to make a single step animation with GSAP?

 

I've been trying SteppedEase.config(-1) easing, but it always gets strange results and I need something I can control.

 

TweenLite.set() (or tweens with 0 duration) doesn't work in this case, because I want to use a .reverse() option, which doesn't work with .set().

 

I wish we had something like TweenLite.setFromTo(), but couldn't find anything even close to that.

 

Edit: here is an example Pen 

See the Pen zBQRGz by CyberAP (@CyberAP) on CodePen