Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Anime.js – A lightweight JavaScript animation library

animejs.com

Post reply on HN
Print view View original

91–100 of 133 posts

Re: Anime.js – A lightweight JavaScript animation library

#91

Post by geenat »

SirHound wrote: post #83
geenat wrote: post #63

Earlier quoted context omitted.

The fundamental building block of the vanilla js snippet and anime.js is the ability to create non-blocking timelines + tweens- which we get for free now. the optional "lib" is just aliases to make vanilla js less verbose.

If thread blocking is a problem then your example would stutter at every await. VS using https://motion.dev/api/timeline or Framer Motion both of which can sequence complex WAAPI animations.

It won't stutter because the actual animation is done by the browser CSS engine.

await is only used to build the non-blocking timeline: Think keyframes, not frames.

Re: Anime.js – A lightweight JavaScript animation library

#92

Post by nickcoury »

Timon3 wrote: post #49
marban wrote: post #32

Related: 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 wr…

The native Web Animations API supports this with setting currentTime relative to the total duration.

Re: Anime.js – A lightweight JavaScript animation library

#94

Post by criley2 »

alin23 wrote: post #79
RyanHamilton wrote: post #78

Earlier quoted context omitted.

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.

As a windows power user using OSX for work, does your tool allow you to cycle through open windows by repeating the button?

While I do love cmd+` for window switching in OSX, I still prefer Win+#### (repeated taps of the same number like Win+1,1,1) to cycle through my chrome windows in a known order. (So Win+1,1 always opens my second chrome window).

Also for anyone else in this situation, is there a way to click on an app in the OSX dock and have it not surface every single window all at once? 2 years of OSX and I still struggle when all 6 chrome windows are surfaced and drown out my perfectly arranged other work.

Re: Anime.js – A lightweight JavaScript animation library

#95

Post by IggleSniggle »

o1y32 wrote: post #72
geenat wrote: post #21

Mostly 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

There’s a difference between creating your own draw-loop with setTimeout and requesting a CSS animation.

Whether you use requestAnimationFrame which calls your code at every draw step or whether you set a CSS animation directive, you are delegating the animation work to the browser. In either case, the resultant behavior is dependent on browser-code, not your own js. This is very different than setting up your own manual draw loop with setTimeout.

Re: Anime.js – A lightweight JavaScript animation library

#96

Post by alin23 »

criley2 wrote: post #94
alin23 wrote: post #79

Earlier quoted context omitted.

Thanks! That's where I got rcmd's inspiration from, I was previously a Windows power user and sorely missed the WinKey+number hotkey.

As a windows power user using OSX for work, does your tool allow you to cycle through open windows by repeating the button? While I do love cmd+` for window switching in OSX, I still prefer Win+#### (repeated taps of the same number like Win+1,1,1) to cycle through my chrome windows in a known order. (So Win+1,1 always opens my second chrome window). Also for anyone else in this situation, is there a way to click on…

By default it doesn't do that, because window focusing needs special privileges that App Store apps don't have.

There is an addon thing that you can install by clicking on the Switcher button and scrolling all the way to the bottom to find the Install experimental window switching button.

After that is installed, a new "Cycle Windows" button will appear: https://shots.panaitiu.com/klbRwgTG

The addon will also assign the Right Option key for focusing specific windows of the focused app, by letter: https://shots.panaitiu.com/j9cgRP9C

Re: Anime.js – A lightweight JavaScript animation library

#99

Post by hombre_fatal »

geenat wrote: post #21

Mostly 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…

Libs like Anime.js are declarative and programmatic. They might be implemented with something that looks like your snippet, but that doesn't mean your snippet supersedes a declarative, programmatic API. Just like el.innerHTML = 'hi' doesn't supersede React.js.

Re: Anime.js – A lightweight JavaScript animation library

#100

Post by JulianGarnier »

Hi, I'm the creator of Anime.js. Firstly, thank you for the submission. I honestly didn't anticipate being featured on the homepage of HN without any major update to the library! To those wondering why the project hasn't been updated recently, it's simply because I've been working on a new version (V4) for the last two years. The core library has been completely rewritten, I'm currently in the testing and documentation phase and should be ready for release by this summer.

Some of the new features of V4 include:

* Improved performance: The library has been entirely rewritten with performance optimization and low memory usage in mind.

* New ESM Module first API: Import only what you need and benefit from improved tree shaking.

* Better timelines: New options for animation positioning, allowing looping animations in timelines and improved parameters inheritance.

* Additive animations: A new tween composition mode that lets you smoothly blend concurrently running animations.

* Variable framerate: Specify different framerates for each animation or set it globally.

* New callbacks: onTick, onLoop, onRender, etc.

* Value modifiers: A function to modify or alter the behavior of the numerical values of the animated property value before rendering.

* Animate from: Animation from a given value to the current target value.

* Improved documentation: A new design with enhanced animations demos and more in-depth explanations.

* Unit tests

And much more! I can't wait to share it with you!

Post reply on HN