Use translate to move things rather than absolute positioning as it is more performant.
Animate.css is the best-known, and furthest along, so that’s what I recommend. I am keeping an eye on Effekt.css though. It’s part of the HTML5 BoilerPlate project. In my projects though, transitions have generally been enough.
Haven’t seen that before it looks very interesting
I’m looking to create short form animation using a series of transforms and animations as opposed to incorporating a flash video for the specific purpose of mobile platform playback. How do you incorporate a .js, svg, and css transitions, transforms, and animations to make that feasible?
Hi @webinista, we had this questions come in through our social channels from @nsteiner:
what kind of animation performs better w/ JS?
Hi @webinista! I was wondering if if you have any tips or rules for smooth, performant animations? Is there anything we should stay away from animating?
Yes! I ran into this issue recently too. Be careful of animating properties that change the dimensions of or position of objects on your page (also known as causing a reflow). These can be especially slow, depending on the browser.
Instead use the
transform property and the
translateY() functions. @PaulOB answered this question well.
I’ve also run into issues with the
filter property and the
blur() function. Gaussian blurs are kind of expensive to calculate. So I’d say avoid animating/transitioning that for now.
Would you recommend just using animation on desktop computers or on mobile? If on mobile what are the big issues to be aware of?
Hover.css is a library that I haven’t looked at closely enough to have an opinion about. It’s good that each item is self-contained. It lets you cherry pick which parts to use. And it has some clever animations too. I’m neither for nor against it :-).
I’m interested in the same.
Ooh. This is a good one. While working on the book, I dug into the
cubic-bezier function. It’s super interesting to me because it involves a level of math that I love and fear at the same time. I wish I could sum up how it works off the top of my head. But the short version is that when the 2nd and 4th values are greater/less than 1, it will create an “overshoot” or “back-up” effect. You can see what I mean here.
@webinista What is your performance advice/concern when we use animations? What to use with care, what to avoid?
I believe the css animations are much smoother than JS animations especially the jquery animations which are very jumpy. Of course in some cases you may need a bit of js to trigger the CSS effect when needed.
The lines do seem a little more blurred these days but I tend to think of animation as ‘presentation’ which is a job for CSS.
Hey @Suzy_McKaskill, you’re not late. There are a few questions ahead of your but we will get around to your question soon.
You said jquery animations are jumpy but what about using something like velocity.js vs Css animations? The information on velocity.js says that it performs better on mobile then css animations.
Oh, now I see why there is so much talk about CSS Animations - that’s the main topic of discussion. Thanks for your help!
As with anything web related, however, the more elements you affect, the slower your page can potentially become. But I don’t know of any hard browser-based limits on how many elements can be animated at once.
There is, however, an accessibility concern for people with seizure or vestibular disorders. You want to be careful of animating too many items at once. You also want to be careful not to create animations that take over an entire screen. WCAG2.0 has some guidelines for users with seizures that are helpful.
Yes I use velocity.js for animated menus on mobile and it is a lot lot smoother than jquery. I suppose it depends on what you are doing but sometimes all you need to do in JS is add a class to the element and let the css animate it rather than making the js animate the element also. (Mind you I’m pretty rubbish at js anyway.)