HN Explorer

33 comments

[ 4.6 ms ] story [ 72.6 ms ] thread
Introvertuous
Out of curisoity, what would your library provide over the web animations api.
benjamindc
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.
jonahx
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?
benjamindc
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.
codingdave
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.

bitL
Where do you use spring physics? Is it just for translations, or do you actually deform objects using mass-spring networks?
pharrington
A pedantic note - your library provides sinusoidal easing, not spring physics.
spython
Not working on Firefox Nightly.
benjamindc
Cfr. https://github.com/bendc/animateplus#browser-support
ryannevius
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.
sebazzz
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.
tcd
> 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)

sebazzz
I am on Win10/1709 and it really does not work.
[deleted]
(comment deleted)
simlevesque
Nothing works on android 7, latest Chrome.
petee
Works in Chrome on Android 8.0, but not in Opera (...which is also basically chrome)
rglover
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 :)
jazoom
Straightforward documentation. Nice API. Small size. Good performance. I think I might use this. Thanks!
CodeWriter23
You might want to try the demos in Safari on iOS and macOS first.
jazoom
I use a transpiler. It'll be fine.
chvid
Does not work in Safari (desktop).
chvid
Probably because you use the ... spread syntax which is not widely implemented.
JepZ
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?

simonlc
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.
lostgame
Might’ve considered transpiling first so it doesn’t give the illusion of being horribly broken. :3