10 ms·
2KB JavaScript animation library
- Introvertuous 9y agoOut of curisoity, what would your library provide over the web animations api.
- benjamindc 9y agoSpring 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 9y agoNice. I'd be interested in that and love small footprint libraries. Do you have a comparison with http://velocityjs.org/ http://velocityjs.org/ or other popular alternatives?
- benjamindc 9y agoIn 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/ 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 9y agoI 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 9y agoWhere do you use spring physics? Is it just for translations, or do you actually deform objects using mass-spring networks?
- pharrington 9y agoA pedantic note - your library provides sinusoidal easing, not spring physics.
- spython 9y agoNot working on Firefox Nightly.
- benjamindc 9y agoCfr. https://github.com/bendc/animateplus#browser-support https://github.com/bendc/animateplus#browser-support
- ryannevius 9y agoWhile 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 9y agoI 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 9y 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 9y agoI am on Win10/1709 and it really does not work.
- blumomo 9y agoExamples in readme not working on latest iOS
- benjamindc 9y agoAll the examples use the untranspiled version which is comptabile with the browsers listed here: https://github.com/bendc/animateplus#browser-support https://github.com/bendc/animateplus#browser-support
- deleted 9y ago[deleted]
- dclowd9901 9y agoNot working on iOS safari 11.1.2
- simlevesque 9y agoNothing works on android 7, latest Chrome.
- petee 9y agoWorks in Chrome on Android 8.0, but not in Opera (...which is also basically chrome)
- rglover 9y agoFor 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 :)
- ricardobeat 9y agoNone of the examples work in Safari/iOS, despite it self advertising as "well suitable for the mobile web".
- jwr 9y agoDoesn't work in Safari on MacOS, either. Oh, well.
- jedisct1 9y agoNothing works on Firefox/macOS either.
- migueloller 9y agoIt might be because it requires transpilation [1]. [1] https://github.com/bendc/animateplus#browser-support https://github.com/bendc/animateplus#browser-support
- Can_Not 9y agoI wonder what size it will be after transpile?
- jazoom 9y agoStraightforward documentation. Nice API. Small size. Good performance. I think I might use this. Thanks!
- CodeWriter23 9y agoYou might want to try the demos in Safari on iOS and macOS first.
- jazoom 9y agoI use a transpiler. It'll be fine.
- chvid 9y agoDoes not work in Safari (desktop).
- chvid 9y agoProbably because you use the ... spread syntax which is not widely implemented.
- JepZ 9y agoLast 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 9y agoThe 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 9y agoMight’ve considered transpiling first so it doesn’t give the illusion of being horribly broken. :3