Jump to content


How I can do that more fancy?

Go to solution Solved by Rodrigo,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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!

  • Like 4
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.