SpoinkJS

The simplest thing I could come up with while waiting for the css animation-timeline view().

Download

How to use it

Import the lib

<head>
  <script defer src="spoink.js"></script>
</head>

Create animations in your CSS, as you would, and put them on your elements, as you would.

@keyframes spin{
  0% {
  transform: rotate(0);
  }
  100% {
  transform: rotate(360deg);
  }
}

#my-spinning-sign{
  animation: spin 1s;
}

And finally, put a spoink class only on the elements you want to animate on view.

<a 
  id="my-spinning-sign" 
  class="spoink" 
  href="https://www.youtube.com/watch?v=l4mTNQLsD0c">
  🍾🍾🍾
</a>

Why?

Because it's a straight and simple stupid solution to a common need.

It's 624 bytes (no minification, no compression) of javascript you can read.

I miss the old web in which you could just F12 your way into learning cool stuff.

If you wanna do smart stuff look at animeJS, motion.dev, and GSAP.