2KB JavaScript animation library

ricardobeat 8 years ago |

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

migueloller 8 years ago | |

It might be because it requires transpilation [1].

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

Can_Not 8 years ago | | |

I wonder what size it will be after transpile?

jedisct1 8 years ago | |

Nothing works on Firefox/macOS either.

jwr 8 years ago | |

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

rglover 8 years ago |

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

lostgame 8 years ago |

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

jazoom 8 years ago |

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

CodeWriter23 8 years ago | |

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

jazoom 8 years ago | | |

I use a transpiler. It'll be fine.

spython 8 years ago |

Not working on Firefox Nightly.

benjamindc 8 years ago | |

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

ryannevius 8 years ago | | |

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 8 years ago | | |

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 8 years ago | | |

> 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 8 years ago | | |

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

dclowd9901 8 years ago |

Not working on iOS safari 11.1.2

JepZ 8 years ago |

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 8 years ago | |

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.

Introvertuous 8 years ago |

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

benjamindc 8 years ago | |

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 8 years ago | | |

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 8 years ago | | |

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 8 years ago | | |

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.

pharrington 8 years ago | | |

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

bitL 8 years ago | | |

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

blumomo 8 years ago |

Examples in readme not working on latest iOS

benjamindc 8 years ago | |

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

simlevesque 8 years ago |

Nothing works on android 7, latest Chrome.

petee 8 years ago | |

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

chvid 8 years ago |

Does not work in Safari (desktop).

chvid 8 years ago | |

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