2KB JavaScript animation library | Hacker News Reader

2KB JavaScript animation library

github.com

59 pointsbenjamindc32 comments

Open articleView on HN

None of the examples work in Safari/iOS, despite it self advertising as "well suitable for the mobile web".

Doesn't work in Safari on MacOS, either. Oh, well.

Nothing works on Firefox/macOS either.

It might be because it requires transpilation [1].

[1] https://github.com/bendc/animateplus#browser-support

I wonder what size it will be after transpile?

For those not in the know, this was posted/created by Benjamin De Cock who is responsible for many of Stripe's marketing site animations. Cool to see this here :)

Might’ve considered transpiling first so it doesn’t give the illusion of being horribly broken. :3

Straightforward documentation. Nice API. Small size. Good performance. I think I might use this. Thanks!

You might want to try the demos in Safari on iOS and macOS first.

I use a transpiler. It'll be fine.

Not working on Firefox Nightly.

Cfr. https://github.com/bendc/animateplus#browser-support

While I understand the argument for keeping the library "untranspiled," you may want to reconsider using this version in the examples. Ideally, examples should work in the average browser. JMHO.

I agree. I use Edge, and the only thing I see is a white page. That gives me a bad impression and I'm already not interested anymore.

> I agree. I use Edge,

I think I found the problem. Check caniuse.com for Edge's webplatform score.

Edge: 236

Chrome: 304

Firefox: 298

Yup. You're going to have a bad time with that.

P.S: this should work with Edge16 (requires latest version of Windows 10; 1709)

I am on Win10/1709 and it really does not work.

Not working on iOS safari 11.1.2

Last time I used a JS animation library, I used velocity.js

While the performance was good, the main reason I would not use it again, is because the browser dev-tools do not work with velocity.js.

Does anybody know if you can use e.g. the chrome dev-tools animation tab with this library?

The reason it doesn't work is because the animations are JS based, the chrome tool is for CSS animations. I believe velocity has it's own tools for editing animations, though I've not tried them myself.

Out of curisoity, what would your library provide over the web animations api.

Spring physics, frame-based callbacks (see the `change()` examples), functions as values for duration, delay and any property you animate, making staggered animations easy to create, etc.

Nice. I'd be interested in that and love small footprint libraries. Do you have a comparison with http://velocityjs.org/ or other popular alternatives?

In terms of performance, it outperforms all the animation libraries I’ve tried ( you can compare the stress test linked at the bottom of the page with this version made with GreenSock: http://animateplus.com/examples/stress-test/gsap/ ). In terms of weight and parse time, it’s also the fastest afaict. That being said, it’s not as powerful as GreenSock for example as it mainly focuses on performance and simplicity.

I just did -- your stress test kept my CPU and GPU at 20-25. GSAP's kept them at 13-15.

EDIT: More testing -- When I shut down all other tabs, yours dropped down to a bit lower than GSAP. But I find that a bit odd/concerning that it only performs better when it is the only thing running.

Where do you use spring physics? Is it just for translations, or do you actually deform objects using mass-spring networks?

A pedantic note - your library provides sinusoidal easing, not spring physics.

Examples in readme not working on latest iOS

All the examples use the untranspiled version which is comptabile with the browsers listed here: https://github.com/bendc/animateplus#browser-support

Nothing works on android 7, latest Chrome.

Works in Chrome on Android 8.0, but not in Opera (...which is also basically chrome)

Does not work in Safari (desktop).

Probably because you use the ... spread syntax which is not widely implemented.

Reply on news.ycombinator.com