Anime.js – A lightweight JavaScript animation library

Post by Timon3 » Fri, Jun 23, 2023, 8:10 AM UTC

Epskampie wrote: post #57

Timon3 wrote: post #49

Earlier quoted context omitted.

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…

I'd think GSAP timeline is exactly made for that, but you say you've already tried that? https://greensock.com/docs/v3/GSAP/Timeline https://greensock.com/docs/v3/GSAP/Timeline/seek () https://greensock.com/docs/v3/GSAP/Timeline/reverse ()

Post by geenat » Fri, Jun 23, 2023, 8:18 AM UTC

troupo wrote: post #58

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…

The example is next to useless since it's so primitive. Anything more complex, and you end up developing your own library. Which you did, and linked. So how is anime.js obsolete?

Post by geenat » Fri, Jun 23, 2023, 8:28 AM UTC

5350-uiop-1130 wrote: post #64

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…

> Mostly obsolete i'm so f#####g done with web dev.

Post by pjc50 » Fri, Jun 23, 2023, 8:39 AM UTC

geenat wrote: post #27

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…

Wanted to note, htmx's companion project at https://hyperscript.org/ does this naturally out of the box as well due to its async transparency.

Post by bmacho » Fri, Jun 23, 2023, 8:44 AM UTC

dylan604 wrote: post #13

labster wrote: post #12

Earlier quoted context omitted.

Anime (アニメ) is literally short for animation (アニメーション, animeishon).

literal meaning and widely accepted use meaning do not always align. if I said Anime, would you think Tiny Toons, Family Guy, Toy Story, or Lion King? Or would you think DBZ, Akira, One Piece, etc?