Anime.js is pretty fantastic. Lovely API. Well done Julian.
Anime.js – A lightweight JavaScript animation library
41–50 of 133 posts
Re: Anime.js – A lightweight JavaScript animation library
#42Related: https://www.theatrejs.com https://rive.app https://greensock.com https://motion.dev
I used motion.dev on a couple of test projects when I heard of it. And it's nice, the docs can be a bit lacking, though, and the userbase is tiny enough to have little to no discussion online.
Re: Anime.js – A lightweight JavaScript animation library
#43Anyone recommend a good animation library to create 3D builds for watches as an example as I need it to be very detailed? I am about to start investigating and this is looking really interesting for the purpose.
Check out threekit's Rolex configurator:
https://www.threekit.com/3d-product-library/rolex-watch
Re: Anime.js – A lightweight JavaScript animation library
#44Anime is nice, however you should likely use Framer Motion these days if using React or Motion One if not (both are by the same creator but for different use cases).
Framer motion is quite bad with drag events in responsive layouts that have drag boundaries. It requires workarounds that are quite finicky. In my experience it has some performance issues too in edge cases where Gsap just chugs along. motion.one can only be used to animate node elements, not arbitrary data, so you’ll likely hit a wall eventually and then you’ll need to include another animation library on top. They’…
Motion One can actually output arbitrary values https://motion.dev/dom/animate
Re: Anime.js – A lightweight JavaScript animation library
#45That demo animation is so mesmerizing. Great work!
I know right, the landing page is amazingly well done!
Re: Anime.js – A lightweight JavaScript animation library
#46Anime is such a specific use, and this is disappointing for anyone with that use in mind. Naming things is hard I guess????
Anime (アニメ) is literally short for animation (アニメーション, animeishon).
I'm guessing it's because of the author being French, as another commenter pointed out, but, it's plenty common for loan words to end up having a more specific or outright different meaning in a different language
We're talking French and Japanese here so let's look at one going the opposite way - the french avec to アベック/ abekku. In French it just means 'with' - eggs with ham, let's go to the beach with friends, whatever. In Japanese it is used to mean that you're romantically with someone, and is used as a noun to stand in for the word couple.
Or for a more specific usage example, high ball in English refers to any mixed drink where the base spirit is a lower volume of the drink than the mixer, e.g. gin and tonic, screwdriver, etc. In Japan a ハイボール / hai barru refers almost universally to whiskey and soda water. Of course other highball drinks are served there, but will tend to get a more specific name, such as a shochu highball being a チューハイ / chuhai.
It's more rare for this to happen with a chain of original word -> loan word -> loan word, but still something that happens - it's called 'reborrowing' a word. Another example of this would be the Chinese having reborrowed matcha to mean Japanese-style green tea.
It's not silly or wrong to utilize the word anime in the west to refer specifically to Japanese-style animation.
Re: Anime.js – A lightweight JavaScript animation library
#47Earlier quoted context omitted.
any good comparison table between them?
Rive is great and simple, its kinda a better version of Lottie. here is some resources to learn more: https://rive.app/use-cases https://rive.app/blog/rive-as-a-lottie-alternative
State Machine Driven Design, very intruiging.
Re: Anime.js – A lightweight JavaScript animation library
#48Earlier quoted context omitted.
any good comparison table between them?
Rive is great and simple, its kinda a better version of Lottie. here is some resources to learn more: https://rive.app/use-cases https://rive.app/blog/rive-as-a-lottie-alternative
State Machine Driven Design, immediately intruiged.
Re: Anime.js – A lightweight JavaScript animation library
#49Related: https://www.theatrejs.com https://rive.app https://greensock.com https://motion.dev
Does one of these tools support an animation timeline with arbitrary seeking? Essentially I want to be able to have a progress slider representing the current time, and if the user clicks on any time on the slider, all animations should spring to that state, like a YouTube video. I played around with GSAP, anime and some others, but none properly supported playing the animations "backwards" (while jumping back).
I wrote my own implementation of a declarative animation engine (i.e. the same timeline position always looks the same), but I'm pretty sure there are still a couple of bugs allowing you to go out of sync.
Re: Anime.js – A lightweight JavaScript animation library
#50Awesome looking website, though the documentation hijacking my back button was awful.