Cool. We're finally back at the creativity level of Macromedia Flash websites a few decades ago.
Now we just need someone to write an a visual IDE that makes this as approachable to non-programmers as Macromedia Flash was.
Anime.js – A lightweight JavaScript animation library
71–80 of 133 posts
Re: Anime.js – A lightweight JavaScript animation library
#72Mostly obsolete with CSS tweening. You can do non-blocking animation timelines without any library if you use async javascript. Click me to change color every second, then remove. // Locality of Behavior me = document.currentScript.parentElement; me.addEventListener("click", async event => { me = event.target me.style.transition = "background 1s" await sleep(1000) me.style.background = "red" await sleep(1000) me.styl…
Bad practice, requestAnimationFrame is preferred for such purposes:
https://developer.mozilla.org/en-US/docs/Web/API/window/requ...
https://stackoverflow.com/questions/38709923/why-is-requesta...
...and based on that I'm afraid you shouldn't be giving out advice on doing animations
Re: Anime.js – A lightweight JavaScript animation library
#73Earlier quoted context omitted.
Isn't the WebAnimations API available in modern browsers?
Sure but in many situations a vanilla async function gives you the same result without the extra layer.
There is no "extra layer" -- it is a browser API supported by every browser by bow, which means that it should be treated the same say as settimeout
Re: Anime.js – A lightweight JavaScript animation library
#74Looks like a project with 45k stars, where the latest update was Oct 2020. Why the HN post without a submission comment? Slick site I guess?
Slick front page with one of the best documentation pages I've come across. A sprawling v4 rewrite is in the works and Julian seems to have been picking up steam on it lately.
Re: Anime.js – A lightweight JavaScript animation library
#75Mostly obsolete with CSS tweening. You can do non-blocking animation timelines without any library if you use async javascript. Click me to change color every second, then remove. // Locality of Behavior me = document.currentScript.parentElement; me.addEventListener("click", async event => { me = event.target me.style.transition = "background 1s" await sleep(1000) me.style.background = "red" await sleep(1000) me.styl…
Bad practice, requestAnimationFrame is preferred for such purposes: https://developer.mozilla.org/en-US/docs/Web/API/window/requ... https://stackoverflow.com/questions/38709923/why-is-requesta... ...and based on that I'm afraid you shouldn't be giving out advice on doing animations
He's not using the timer to do per-frame calculations - the GPU does the interpolation using the `transition` property. He's just using the timer for setting the target state.
Re: Anime.js – A lightweight JavaScript animation library
#76Mostly obsolete with CSS tweening. You can do non-blocking animation timelines without any library if you use async javascript. Click me to change color every second, then remove. // Locality of Behavior me = document.currentScript.parentElement; me.addEventListener("click", async event => { me = event.target me.style.transition = "background 1s" await sleep(1000) me.style.background = "red" await sleep(1000) me.styl…
Isn't the WebAnimations API available in modern browsers?
Yes. But, that doesn't mean implementing these things is any easier. Maybe if you're sliding an element in and out, the WebAnimations API would suffice. If you're wanting to do advanced animation, you will end up creating your own library. With anime.js, you have better control over your animations. You can pause, play, reverse, and seek animations, as well as control their speed. It provides a powerful timeline feature which allows you to chain animations and control their sequence, something that is not available in the Web Animations API. You can also do things like line drawing and morphing, as well as animate CSS properties, SVG, DOM attributes and JavaScript Objects.
You can do most things natively, if you have the time and luxury of reinventing the wheel.
Re: Anime.js – A lightweight JavaScript animation library
#77One less known use case for this is creating animated UI demos, which as a dev I find harder to do using video editing software.
I used it to create the simple demo on the rcmd frontpage: https://lowtechguys.com/rcmd
This is the code, where I'm just animating elements of an SVG I previously created with Sketch: https://github.com/FuzzyIdeas/lowtechguys/blob/main/src/rcmd...
I'm also doing the same thing for the Lunar frontpage: https://lunar.fyi/
But because Lunar's demo is a lot more resource intensive, I pre-rendered it into a video, and heavily optimized it for each screen size, in H.265, WEBM and H.264.
One of the biggest hurdles in Lunar's case was how to make the video have transparent regions. With Anime.js you are able to animate individual elements, placed around static text and buttons, which you can't do with videos.
Alpha support in videos is not so good, so I had to create a full-page video (in both portrait and landscape) with the right background color, and placed it as a background layer with a low z-index.
Finding the right video compression parameters to avoid background grain was not easy.
Re: Anime.js – A lightweight JavaScript animation library
#78One less known use case for this is creating animated UI demos, which as a dev I find harder to do using video editing software. I used it to create the simple demo on the rcmd frontpage: https://lowtechguys.com/rcmd This is the code, where I'm just animating elements of an SVG I previously created with Sketch: https://github.com/FuzzyIdeas/lowtechguys/blob/main/src/rcmd... I'm also doing the same thing for the Lunar…
rcmd looks cool. Good work. I use Windows + Number to go to the same apps, your idea of letters is a definitive improvement.
Re: Anime.js – A lightweight JavaScript animation library
#79One less known use case for this is creating animated UI demos, which as a dev I find harder to do using video editing software. I used it to create the simple demo on the rcmd frontpage: https://lowtechguys.com/rcmd This is the code, where I'm just animating elements of an SVG I previously created with Sketch: https://github.com/FuzzyIdeas/lowtechguys/blob/main/src/rcmd... I'm also doing the same thing for the Lunar…
rcmd looks cool. Good work. I use Windows + Number to go to the same apps, your idea of letters is a definitive improvement.
Thanks! That's where I got rcmd's inspiration from, I was previously a Windows power user and sorely missed the WinKey+number hotkey.
Re: Anime.js – A lightweight JavaScript animation library
#80Related: https://www.theatrejs.com https://rive.app https://greensock.com https://motion.dev
I was looking for an animation library some time ago, and theatrejs looks incredible. Anybody has any experience with it? In the end I used blender for what I needed, but I got very curious about it.