auto-animate
auto-animate copied to clipboard
formkit
A zero-config, drop-in animation utility that adds smooth transitions to your web app. You can use it with React, Vue, or any other JavaScript application.
Unfortunately I'm stuck working on this Ember app, and under the surface of it's CLI, it's using Webpack 5. I'm attempting to use the Native JS implementation of AutoAnimate, and...
If you use gap property on a grid or a flexbox and try to auto-animate a remove it weirdly jumps around. Here's a reproduction in codepen: https://codepen.io/paoloricciuti/pen/YzaRyNV
When the wrapper is positioned at the bottom, a bug is shown in the animation when removing an item. [Reproduction with Vue](https://sfc.vuejs.org/#eNp9k81u4jAQx19lNpemUmKH7u4lQEUfYC973ewhJA4Y/CXboVSId9+xDWnaSisk5Bn/5zdfziV7MYacRpbV2cp1lhsPjvnRPDeKS6Othwto9UuPyrO+AMsGuMJgtYQHjHqYVO3o9QsarWe365kHZY3qtHIeuGfSwTqA8j+LAp4K+F7AjwJ+/n28ayyT+sRQlKtHWD9DHoPIqRVj8M4sMnDhmc2jImrDAb6t16AeZzxsKeAmxTvsUw3vhQqOf6lOBE0jyBNk1lwelIlX4LD60baea1XDoqoquIYyVjSNFoeKBuY3AgPRAliNIuRYN1nANBk4/yYYmltte2aRYs7gtOA9yvolGO14wg/8HByW7/a+hmoJW+29lvH4ynu/x9inypyXTRYzYS7B4VQO2iI+zomrNA1MWx/Z28096TFiOyJTwaYTvDvifVpNGnfUNT79ogC8vi1vAtBEuFdABU9t01Gkw9cMuCxE/45LC0OZMVZ0Gl5WZOnplbI15OC0wid8CUjsIl5gWzVET/DNNhb8Tbb33ria0lGZ4450WtINjkYeuadBW7ZJvFmQilTllvmWLChXPTsTeUB2cSfjd/CR6IYufFIHR7TdUTwRi2+HS0aYk+XW6lfHLJb8kUHReWK2tAxzWGb/x/wk/cIN2Gujrtn1H2MwTKk=)
When I add duplicate elements to the first of the array, the animation does not take effect on the first element.
It should fix the `Subsequent animation flickers after scrolling scrollbar manually` case from https://github.com/formkit/auto-animate/issues/16. This issue will remain in the case of https://auto-animate.formkit.com/#plugins.
Straightforward and easy to use library so far. I was however testing out animations on tables, sorting (rows moving) and removing filters (adding rows) work great. But removing rows, collapses...
Can this lib work in Angular? Maybe i will add a Pull Request for Docs for Angular or a Wrapper what do you think?
Repro: - [Vanilla JS](https://flems.io/#0=N4IgZglgNgpgziAXAbVAOwIYFsZJAOgAsAXLKEAGhAGMB7NYmBvAHgAcA+AIxjFoCcYAAkYAPYiwD0nADpoWAVygcpSjnPYcMYRvxExxU2fIxDCgsAF4ZIGx0FRaGACZSM6tJRBwYsasQh6BEQQABZEAAYQAF8KdGxcEPwAKwQqOgYmYjwILDYBYiEMBWJaAEE0XIxGITB+WiwhAHISYjY4RElJBTQ2AGsAc3w6LEkAAT5+LD6IYkli0oBaDEqsapgxgEZ8CJ3FnmIMfE3JCDRnA3wsVKa5OQy4QqUhSyFnWmoFHAZ8AEcFGD8ACeAGVfDB-AIABRNJRNACUdzQZX4-AwQPwdQaUOAQlgaAGxEIiCEAGYhNF4ZiBABRDDUQhQqHwl4cITAORCIQPQpQCAvN4fL5ZYaCdY02DfYgwvkIzncoKFLjENAC96fKWimDiyVZGFcEqlNBy1VCZVofAuZw0gBuWQAMhBHkxATDqHzqH0mhQhMzWXiIPhBFhaHbmYjTeb8GJiABheiMBgCpruiCekS0ITB0MwW6mvmWthsJjOWOEaDOKHmiNcpSF4vnMsVqF8iOUpELcqrdZQpQ+3HOBRogL0EmbCITikRrw+PwjtDBECbcJRaIAXWiQA) - [React](https://flems.io/#0=N4Igxg9gdgzhA2BTEAucD4EMAONEBMQAaEAMwEskZUBtUKTAW2TQDoALAF0fmPSk6IBqEAB585AG4ACcvgC8AHRA5sygHyiA9BMnq+eJGE7lo1NAAYUAJgsgAvkXpMWIVgCtqJSAKGcR5IzYEABOnNKYAK6cEACCUIGYgtKkIRCM0gDkXJy4KFpakVDYANYA5qyQjFoAAqShjCXknFpRMQC0mAmMSYg1AIysFkPtAEaInJis-VrkUPiIAB6sjJ6ZilAbpEXGplDSsdjYABQAlNLAG9LSPjDhNM2IjDBE0nicAJKCzwC60vLSABKiEwxlYkTwAGVJoJjjR+q9rK8AMw-U5XG5mcIhJ4QSSIL5Pf7SY5Qc7ydQY67vQnPY7HbA4yTk9TSRmISSsCjwQQhemPRgs2TfaQAQnkALJ6M2+0xsHu8HIdz+AIhiFi0Ti3V6x2A0nwkRCST2KGk-QsFuk9mlGJxnEN+2OVOkokpsuu11E2HU43qOOkgkWnG03udnsi8GkONI8mAiru9jdHuTFwFMBWOH53yFTvdKc9iukJUQAE9YwLE2H8y7RtEYvtoABhRVgEqxs7-Vk4xh4gnfY4C06JsAtkoBiBR3H47S1zj1pPVz1aRUL-OnIdV7QR1cer3qTCkXkBpbBrShvOezDSdjRpQgDQ4+AQTD4bSYHfaBfS+wbDbA0GcAAIgA8gAsqwOLzIgfKiIc2DSFo6ivKoNpQNsUC7NA0hqhqMTxIksIQNgJhmMSwDWhcGK3OEiBIMwAjEv+YJqsCpCkhG8DStcTGcOCeAAKKkKQiDGPSQqXHm5CkCStFPH4lSGpB4RzHcXRgIgEDSQAEgAKqBAAy-F0X4XEpm0WoEYgxyyfRvFgIpfivERJGwKZjjSDQNl+GitoTA6HleQIPwbD+UB8FU2CUNBIijJg4y8CQhgiS55ggMiACsKB2PYPwkIqUAlOYdAgAwzAiDiAF8IavBoDkeQFEUpQVFUWgVcYhSMPgrUgmCCz4k+2C2R4XggJwJbYK4MBgCE5DEQ4TglS45U9Zw7T4OkVUhDVIB1TA+SFMU5SVOk3UAWtJ2RJ1p3GOdjCsH1tFEUNnh8GNE0iFNM1zTl9hAA) - [Vue](https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHNjcmlwdCBzZXR1cD5cbmltcG9ydCB7IG9uTW91bnRlZCwgcmVmIH0gZnJvbSAndnVlJ1xuaW1wb3J0IGF1dG9BbmltYXRlIGZyb20gJ2F1dG9BbmltYXRlJ1xuXG5jb25zdCBpdGVtcyA9IHJlZihbMSwgMiwgM10pXG5jb25zdCByZW1vdmUgPSAobikgPT4gKGl0ZW1zLnZhbHVlID0gaXRlbXMudmFsdWUuZmlsdGVyKChpdGVtKSA9PiBpdGVtICE9PSBuKSlcblxuY29uc3QgbGlzdCA9IHJlZigpXG5vbk1vdW50ZWQoKCkgPT4gYXV0b0FuaW1hdGUobGlzdC52YWx1ZSwgeyBkdXJhdGlvbjogMTAwMCB9KSlcbjwvc2NyaXB0PlxuXG48dGVtcGxhdGU+XG4gIDxwPmJlZm9yZSB0ZXh0PC9wPlxuICA8dWwgcmVmPVwibGlzdFwiPlxuICAgIDxsaSB2LWZvcj1cIml0ZW0gaW4gaXRlbXNcIiA6a2V5PVwiaXRlbVwiPlxuICAgICAgPGJ1dHRvbiBAY2xpY2s9XCJyZW1vdmUoaXRlbSlcIj5cblx0XHRcdFx0Y2xpY2sgdG8gcmVtb3ZlXG4gICAgICA8L2J1dHRvbj5cbiAgICA8L2xpPlxuICA8L3VsPlxuICA8cD5hZnRlciB0ZXh0PC9wPlxuPC90ZW1wbGF0ZT4iLCJpbXBvcnQtbWFwLmpzb24iOiJ7XG4gIFwiaW1wb3J0c1wiOiB7XG4gICAgXCJhdXRvQW5pbWF0ZVwiOiBcImh0dHBzOi8vdW5wa2cuY29tL0Bmb3Jta2l0L2F1dG8tYW5pbWF0ZUAxLjAuMC1iZXRhLjEvaW5kZXgubWpzXCIsXG4gICAgXCJ2dWVcIjogXCJodHRwczovL3NmYy52dWVqcy5vcmcvdnVlLnJ1bnRpbWUuZXNtLWJyb3dzZXIuanNcIixcbiAgICBcInZ1ZS9zZXJ2ZXItcmVuZGVyZXJcIjogXCJodHRwczovL3NmYy52dWVqcy5vcmcvc2VydmVyLXJlbmRlcmVyLmVzbS1icm93c2VyLmpzXCJcbiAgfVxufSJ9), not a problem for some reason! 😲 No idea why, I'm not very familiar with Vue Adding an `else` branch here might...
