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.