How I can do that more fancy?

[eche]

Hello. I'm new in GSAP.

 

Can check my pen and advice me any idea how I can do my animation more fancy.

If you will see any performance issue or architecture mistake, please let me know.

See the Pen xxaEVWE?editors=1010 by echebotarev (@echebotarev) on CodePen

[Rodrigo]

Hi @eche and welcome to the GreenSock forums!

 

I played with your example (nice job by the way! 👍 it's always great to see what GSAP users come up with 🎉) and the only thing I would change is not animating the height of the elements. Animating height/width/margin/padding/top/left etc is not really performant. Perhaps keep the animation on the Y transform and give the container an overflow hidden property, it should create the same effect, and after changing the z-index value to a lower one, move the element to it's final y position.

 

Beyond that I don't see anything that I would change. Normally you can micro-optimize stuff for hours and you'll get super fancy code, but it might not be the most readable code and easier to follow. Always think that in six months you or someone else will look at this and has to get a clear idea of what's going on instead of going: "What the hell is going on here?!". Like @mvaneijgen says: "If it works it works"  

 

Happy Tweening!