Thumbs Up to Layout

[AndrewPixel]

Today I needed to change a gird element's style from align-self center to align-self end. I spent some time getting the current position of the element blah blah blah... my code sort of worked. Then I decided to try the "new" layout capability in anime.js.

A brief look at the docs and then I used createLayout with my own animateLayout function: "Surely this won't work?" Well, to my surprise, it worked first time, exactly the way I was hoping it would. I then added a spring and was pleasantly surprised that it continued to work well.

Congratulations on making something easy that I wasn't looking forward to handcoding.

[pratikrath126]

Hey! That's awesome to hear—the createLayout API can feel like magic when it works first try! Thanks for sharing your experience; testimonials like this help others discover the feature. Cheers to the anime.js team for making it so intuitive!

[juliangarnier]

Please stop the slop

[juliangarnier]

Today I needed to change a gird element's style from align-self center to align-self end. I spent some time getting the current position of the element blah blah blah... my code sort of worked. Then I decided to try the "new" layout capability in anime.js.

A brief look at the docs and then I used createLayout with my own animateLayout function: "Surely this won't work?" Well, to my surprise, it worked first time, exactly the way I was hoping it would. I then added a spring and was pleasantly surprised that it continued to work well.

Congratulations on making something easy that I wasn't looking forward to handcoding.

Thank you for sharing this ❤️

[AndrewPixel]

Sadly when I tried it in my production code, running the layout animation changed the CSS on some of the other elements within the same grid. One innocent bystanding DIV that contained text became invisible with scale(0).

[juliangarnier]

Sorry I missed you reply, did you manage to get your animation working?
It sounds like configuration issue.
Feel free to open an issue with a reproduction demo!