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:
http://codepen.io/CyberAP/pen/zBQRGz
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.