I think while others have commented on how beautiful your creations are, I rather admire you for the care and detail you put on UI. Beautiful things are not always easy to use, and things that are well-laid-out and easy-to-use are not always beautiful. You have somehow arrived at the magical place where you've got them both down.
Thank you, I'm glad you like it! I try to find a good balance between form and function, and create a consistent environment for the customer. The homepage is definitely more "artistic" than the dashboard, for instance, but hopefully they clearly belong to the same brand and give you a similar look and feel.
(For the anecdote and because you mentioned it, it always annoyed me that we had a pretty different visual language at Stripe between the site and the dashboard. I designed Stripe's homepage but not its dashboard, whereas I did both at the same time for Increase. Consistency is really hard to achieve between multiple products as the optimal visual treatment is different for a site and an information-dense UI.)
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.
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.
Hi, is there any library to get a similar SVG animation on any text? Possibly, input the text and get animated SVG. Though, I think your not using any external library.
Safari isn't "lagging behind other browsers", it's just implementing different things. In fact, Safari is still the best browser when it comes to everything UI-related (animations, visual effects, …). You might disagree with Apple's priorities, but it doesn't mean other browsers are "better" per se, they're just different.
Safari's release cycle, however, is stupid per se.
In fact, Safari is still the best browser when it comes to everything UI-related (animations, visual effects, …).
I'm a Safari user who develops first and foremost in Safari, and I completely disagree with this. Chrome runs rings around Safari in UI animation performance, it's almost embarrassing.
First: I'm not the one who made the original comment, and therefore not the person you should be taking this up with. So why have you written this to me?
Second: If you are going to involve me in this, then I'll point out that of course people care about their browser UI, otherwise everyone would be using something like Conkeror, except with an even more ascetic UI philosophy.
> Safari isn't "lagging behind other browsers", it's just implementing different things. In fact, Safari is still the best browser when it comes to everything UI-related (animations, visual effects, …).
So then let's name these things, specifically, if you really believe that. I'm not aware of any new specs related to animations in the last couple of years. Can you name them?
I'm not really well informed here, but I'd guess that he means how the animations, visual effects, Ui, etc. actually look and behave, rather than new specs.
One thing I've noticed several times is that in chrome, many CSS animations aren't animated across sub-pixel boundaries. I don't know necessarily that safari does this (again, I'm not well informed here -- for all I know this has been fixed in Chrome), but if they did, that would count in my book, despite not being a new spec.
(Honestly, my suspicion is that they aren't though, since a high dpi screen removes most of the need for sub-pixel accuracy).
Examples are Reader Mode and Power Saver, both features designed to reduce the impact of, let's say, non-central content. Ad-supported browsers are not exactly eager to implement these, naturally.
This is all in window at the default 'theater mode' size of youtube. I can't full screen either of the VP9 options without completely maxing out the CPU, dropping frames and during my laptop into a frying pan. Its really hot even in window with chrome VP9 using ~175% CPU.
Glad to see some hard numbers on Chrome video performance compared to Safari. I like Chrome because I like the integration with Google services and separate user profiles so I have 2 sessions going at once, but I often have to take Hangout meetings in Safari because Safari doesn't turn my laptop into a hairdryer heating element.
I am curious, though, do the Chrome devs have access to the video APIs that the Safari people would?
There is no reason for h264 decode to take much power at all, it's all done in hardware now (or should be done in hardware).
In other words, Safari's power number isn't surprising but I don't know how chrome manages to use so much processing power. Even my cell phone can decode 1080p60 without catching fire but chrome manages to bring a $2200 laptop to it's knees doing it.
Apple adds features based on what users seem to need, not what programmers want (Google) or programmers want to work on (Mozilla).
It should also be noted that Safari's accessibility support is head and shoulders above anything (including IE with dedicated third-party extensions -- our blind accessibility guy who has access to every accessible technology under the sun simply uses Apple devices at home).
Wake me up when IE is open source, Google gives flying f* about accessibility, and Firefox is better than a distant second.
It's actually an implementation issue and yes, I agree it's unfortunate. The problem is that the video is rotated in 3D in CSS (so we can reuse the same video without the fancy 3D effect on smaller displays since the page is vertically responsive) and unfortunately, the result varies depending on the browser (it looks much better on Safari, for example).
The library is concise and easy to reason about. Did you pull this out of the Bitcoin landing page?
I just started using the lib for a client last week and I love the syntax. The code is starting to get a little unwieldy, how do you structure your animations typically?
I find it interesting that, because some design decisions seem odd to you at first sight, you immediately conclude that the reason is a poor understanding of JavaScript. The `toArray` function, for example, is just performance optimization:
http://jsperf.com/toarray-slice-call-vs-loop
It's an IFFE (Immediately-Invoked Function Expression). The goal is to perform the feature test (the availability of Array.from in this case) just once instead of for every function call.
