p5.js - Hackdot

Re:p5.js by jimmar on Saturday August 03, 2024 @04:37PM (#41149074)

Is there a JavaScript library that does animation using timelines, key frames, etc? It seems like p5js and several other animation libraries focus on things like partial simulations or other animations driven by mathematical formulas rather than animations done by placing objects on timelines and transforming them.

[ Parent | on HN ]

Re:p5.js by wsintra2022 on Saturday August 03, 2024 @05:08PM (#41149272)

It has a frame rate property you can reference

[ Parent | on HN ]

Re:p5.js by rikroots on Sunday August 04, 2024 @05:42AM (#41152291)

GSAP[1] is pretty much the industry standard, I think. You have to pay for some of its more advanced features.

There's also Anime.js[2] and Scene.js[3] - but I've never played with them so can't vouch for their usefulness. Both have had code updates in the past year.

(Self-promotion time) I had a lot of fun adding an animation/tween system to my canvas library[4] a while back. Building out the code to run such animations is one thing; making it performant is a very different challenge![5]

[1] https://gsap.com/

[2] https://github.com/juliangarnier/anime/

[3] https://github.com/daybrush/scenejs

[4] https://github.com/KaliedaRik/Scrawl-canvas

[5] SC tween stress test - https://scrawl-v8.rikweb.org.uk/demo/canvas-006.html

[ Parent | on HN ]

Re:p5.js by hgoury on Monday August 05, 2024 @05:18AM (#41159429)

I've done some things with Svelte motion, such as tweened / spring [0].

This gradient descent visualizer is made with it for example [1] to interpolate the points when the prediction line moves.

[0] https://svelte.dev/docs/svelte-motion

[1] https://gradfront.pages.dev/

[ Parent | on HN ]