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

Show HN: Anime.js – Polyvalent JavaScript Animation Engine

anime-js.com

Post reply on HN
Print view View original

71–78 of 78 posts

Re: Show HN: Anime.js – Polyvalent JavaScript Animation Engine

#71

Post by davnn »

KaoruAoiShiho wrote: post #70
davnn wrote: post #44

The sad thing with animation libraries is, at least in my opinion, that in the end it comes down to a performance race. I loved popmotion at first, but once you hit the first performance bottleneck you can either contribute and fix performance issues yourself or choose a different library (most likely not the hip, new one). I do not want to convey the message that people should stop creating animation libraries, I th…

Have you tried popmotion after the latest update?

No I haven't. Did not work on animations recently, but I may check it out again in the future!

Re: Show HN: Anime.js – Polyvalent JavaScript Animation Engine

#72

Post by code_research »

JulianGarnier wrote: post #45
code_research wrote: post #30

Earlier quoted context omitted.

This looks great, thank you for open sourcing this! I would like to ask two things: How do you think about the velocity.js code regarding performance optimization? What would be the best way to coordinate multiple (potentially dependent) animations? I am thinking about a kind of dispatcher or switchboard logic - it would be great to see an advanced example right from the author. Thank you very much for your attention…

Regarding the performance, Anime is equal or better in some cases than the other javascript animation libraries out there. Not sure to understand what you mean by "coordinate multiple animations", Are you talking about some kind of timeline?

Is the sequential concept of a timeline a good conceptual representation for asynchronous events that my run at different speeds?

I had in mind more kind of a matrix, but I am asking here to gain knowledge from people that already must have been thinking more about this than me.

How do you handle dozens or hundreds of animation events?

Re: Show HN: Anime.js – Polyvalent JavaScript Animation Engine

#73

Post by code_research »

zachrose wrote: post #64
JulianGarnier wrote: post #45

Earlier quoted context omitted.

Regarding the performance, Anime is equal or better in some cases than the other javascript animation libraries out there. Not sure to understand what you mean by "coordinate multiple animations", Are you talking about some kind of timeline?

I you are talking about some kind of timeline, may I plug my own JavaScript solution for this? It's called Barrel: https://github.com/zachrose/barrel You can think of it either as map for setTimeout, or a way to turn sequences into a player object that accepts your own function to perform each point in the sequence.

thanks, this looks like a good start. I would like to add "watchers" and "signals" that could trigger sequences. But I do not want to reinvent things, sure there must be something already out there (I am just an occasional user of js animations for gui elements, so I have no clue about the js animation universe).

Re: Show HN: Anime.js – Polyvalent JavaScript Animation Engine

#74

Post by threefour »

sriram_malhar wrote: post #65

The library looks really nice. It works great in Chrome, but the following SVG path animation does not on Safari (8.0.7), MacOS X (Yosemite, 10.10.4). http://codepen.io/juliangarnier/pen/dXNgVB?editors=0010 Anyone else have this problem?

It's working for me: MacBook with 10.11.5 and Safari 9.1.1.

Re: Show HN: Anime.js – Polyvalent JavaScript Animation Engine

#75

Post by GreenSock »

JulianGarnier wrote: post #69
GreenSock wrote: post #67

Earlier quoted context omitted.

Congrats on the release! You said Anime is equal or better than other JS libraries in terms of performance - were you including GSAP? In my tests, GSAP was significantly faster under stress: http://greensock.com/js/speed.html . Am I missing something? Do you have a test that shows otherwise? I don't mean that to detract from your hard work at all. Clearly you put a lot of effort into this, and I know how hard it is t…

No I didn't, and you're right, GSAP perf looks amazing under your stress test! But I think it's a little bit unfair to compare performance on one test case. Anime was designed to offer more control on a single animation (like specific timings and easings by properties / elements) to avoid running multiple RAF at the same time (which is exactly what your test does), and keep the compact as possible. Having 300 dom ele…

Hm, I don't recall seeing multiple RAFs in that demo. GSAP is all driven by a single one. And yes, I totally agree that nobody should place too much weight on just one performance test. I always advocate people doing their own tests which is why I was wondering if you had one that showed anime matching/exceeding GSAP's speed. No big deal, though. Just curious. Congrats again!

Re: Show HN: Anime.js – Polyvalent JavaScript Animation Engine

#76

Post by zachrose »

code_research wrote: post #73
zachrose wrote: post #64

Earlier quoted context omitted.

I you are talking about some kind of timeline, may I plug my own JavaScript solution for this? It's called Barrel: https://github.com/zachrose/barrel You can think of it either as map for setTimeout, or a way to turn sequences into a player object that accepts your own function to perform each point in the sequence.

thanks, this looks like a good start. I would like to add "watchers" and "signals" that could trigger sequences. But I do not want to reinvent things, sure there must be something already out there (I am just an occasional user of js animations for gui elements, so I have no clue about the js animation universe).

Hmm, cool! The way I might go about that using Barrel would be to have many sequences in many players, can hook up your signals to call play() (or pause/rewind/stop, as needed) on the right player.

Also, Barrel has no built-in story for animations or anything HTML specific. But you can include tweening information in the events that make up the sequence, as long as your "doer" function knows how to perform them.

Re: Show HN: Anime.js – Polyvalent JavaScript Animation Engine

#77

Post by instakill »

JungleGymSam wrote: post #61
instakill wrote: post #50

Earlier quoted context omitted.

I deplore this kind of question. What value does this bring to you to ask it?

Read it with an inquisitive tone, rather than a snarky one, and your emotions won't flare up.

I did. This question still adds no value to the discussion.

Re: Show HN: Anime.js – Polyvalent JavaScript Animation Engine

#78

Post by Akkuma »

Ameo wrote: post #59
Akkuma wrote: post #18

Earlier quoted context omitted.

Have you seen or used https://github.com/Popmotion/popmotion/ ? These both seem fairly similar, both small libraries with a lot of overlap.

Popmotion minified is over 45kB, almost 8x as large as Anime.js.

I guess their frontpage

>Popmotion is a lightweight 12kb JavaScript motion engine that makes creating engaging user interactions quick and simple.

Is slightly outdated now

Post reply on HN