{"id":3097,"date":"2021-12-08T15:49:37","date_gmt":"2021-12-08T15:49:37","guid":{"rendered":"https:\/\/rengga.dev\/blog\/?p=3097"},"modified":"2023-06-12T14:39:03","modified_gmt":"2023-06-12T14:39:03","slug":"css-tutorial-animxyz","status":"publish","type":"post","link":"https:\/\/rengga.dev\/blog\/css-tutorial-animxyz\/","title":{"rendered":"CSS Tutorial – AnimXYZ"},"content":{"rendered":"

Rengga Dev<\/strong><\/a> <\/span>– There are\u00a0quite a few CSS animation libraries. They tend to be a pile of class names that you can apply as needed like \u201cbounce\u201d or \u201cslide-right\u201d and it\u2019ll\u2026 do those things. They tend to be pretty opinionated with nice defaults, and not particularly designed around customization.<\/p>\n

It looks like\u00a0AnimXYZ<\/a>\u00a0is designed to be highly customizable, calling itself \u201cthe first composable CSS animation toolkit.\u201d<\/p>\n

You use as many of the different composable bits as you need to get the in\/out animation you want. Play with their builder and you\u2019ll see output like:<\/p>\n

<div\r\n  class=\"square-group\"\r\n  xyz=\"tall-2 duration-6 ease-out-back stagger-1 skew-left-2 big-25% fade-50% right-5\"\r\n>\r\n  <div class=\"square xyz-out\"><\/div>\r\n  <div class=\"square xyz-out\"><\/div>\r\n  <div class=\"square xyz-out\"><\/div>\r\n<\/div><\/pre>\n
The class name\u00a0xyz-out<\/code>\u00a0becomes\u00a0xyz-in<\/code>\u00a0to trigger the opposite animation.<\/p>\n
All those attribute values are reminiscent of\u00a0Tailwind<\/a>. To use Tailwind effectively, the build process runs\u00a0PurgeCSS<\/a>\u00a0to remove all unused classes, which will serve a tiny fraction of the complete set of classes Tailwind offers. I think of that because the processed stylesheet of AnimXYZ is\u00a0~9.7 kB<\/a>\u00a0compressed, which is larger than the file size Tailwind uses as an\u00a0example<\/a>\u00a0on their marketing page.\u00a0The point being, if classes were used, there would probably be a more straightforward way of purging the unused classes<\/strong>, which I bet would make the size almost negligible. Perhaps the JavaScript framework-specific usage is more clever.<\/p>\n
body {\r\n  background: #171c33;\r\n  margin: 0;\r\n}\r\n\r\n.square-group {\r\n  display: flex;\r\n  gap: 1rem;\r\n  align-items: center;\r\n  justify-content: center;\r\n  height: 100vh;\r\n}\r\n.square {\r\n  background: #57cbf2;\r\n  width: 8vw;\r\n  height: 8vw;\r\n}<\/pre>\n
But those criticisms aside, it\u2019s cool! Not only are there smart defaults that are highly composable, you have 100% control via CSS Custom Properties.<\/p>\n
const squares = document.querySelectorAll(\".square\");\r\n\r\nsetInterval(() => {\r\n  squares.forEach((square) => {\r\n    square.classList.toggle(\"xyz-in\");\r\n    square.classList.toggle(\"xyz-out\");\r\n  });\r\n}, 1200);<\/pre>\n