Hacker News Reader

Comment by code_research | Hacker News Reader

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!

View on HN

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).

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.

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 to pack in features and keep performance up and file size down. I applaud the file size achievement.

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 elements changing their top/left properties wasn't really my goal when I started working on Anime.

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!

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?

Reply on news.ycombinator.com