Animation is starting before anim.play and the animations are not smooth at all.

[Aimack]

Thank you for helping, in advance.

I've two questions.

 

1. The animation is starting even before I am using anim.play(). I suppose that this is because the anim.to is getting initiated before itself. But I can't solve this issue.

 

2. The animation is not smooth at all even after adding easing. When I am zooming in the browser, it is smoother but when at 100% zoom level, it is stuttering.

See the Pen RwJERjP by Aimack (@Aimack) on CodePen

[mvaneijgen]

Hi @Aimack welcome to the forum!

 

You could set your timeline to be paused initially, this way it will only play if you trigger it.

 

The y property will animate in pixels by default, so you can just feed it a number instead of a string. I can't really see the stuttering you're talking about. You do however animate a really small animation (4 pixels) over a  really long time (1 second), if you decrease the time it will feel a lot smoother. 

 

I've also add another property to your timeline called reversed: true, this way you can do the following in the click handler anim.reversed() ? anim.play() : anim.reverse(); if the timeline is reversed, play it or otherwise reverse it. 

 

A side note, but a really important one when working with GSAP (and CSS in general), never use transition: all; you never want to transition everything, in your case you just want to transition the background-color. Also if you have transitions on your elements and you want to animate them with GSAP this is not something that can work, in that case it is always better to remove the transitions from CSS and let GSAP handle them. Hope it helps and happy tweening! 

 

See the Pen NWzeRYO?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen

[Aimack]

Thank you so much @mvaneijgen. Picked up a few things from your post. Today is my second day with GSAP, thoroughly enjoying the experience.

[mvaneijgen]

Ha, cool to hear! Your code looks really clean for your first few days! Keep it up.