Create smooth anim like in example

[eugenedrvnk 0 Likes (Newbie)]

I'm trying to make animation like this. First of all, i wanna create smooth move of green div like in example. Here is my try :  

If compare my and example's animation, in example it's more smoothly. How can i make my anim more similar to an example?

See the Pen VwwqaBp by eugenedrvnk (@eugenedrvnk) on CodePen

[OSUblake 18,533 Likes (Superhero)]

Don't animate left and top. Use x and y. And animating width is also slow. Sometimes, you can animate scaleX instead of width, but that can be tricky if there are children inside the container.

 

You can also set will-change:transform; in your CSS.

https://developer.mozilla.org/en-US/docs/Web/CSS/will-change