Use translate to move things rather than absolute positioning as it is more performant.
4 Likes
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.
1 Like
Haven’t seen that before it looks very interesting 
2 Likes
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?
1 Like
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.
topleftrightbottommargin-*
Instead use the transform property and the translate(), translateX() and 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.
4 Likes
Would you recommend just using animation on desktop computers or on mobile? If on mobile what are the big issues to be aware of?
1 Like
This is interesting, thanks @maieutiquer! @webinista, what are your thoughts?
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 :-).
1 Like
Hi I am late. Sorry. I am an instructor at a community college. I have been asked to research $ layout a web developement AAS (2 year degree) for web development. There are so many things to choose from that I am overwhelmed when trying to layout the curriculum. Any advice on a path for students to learn Web Development. I thought 1) html/css 2) JavaScript/JQuery 3) SQL … the main problems is which tools to use (Frameworks, CMS?)
1 Like
I’m interested in the same.
Having accepted that “CSS is for style” it seemed wrong when I first saw CSS doing things that I would normally use JavaScript to do.
Now I wonder if the newer CSS is more "for those that don’t know JavaScript’ or if there are real advantages to be had.
1 Like
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.
3 Likes
@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.
1 Like
Here’s where we run into the upper limits of my knowledge. I think it depends on the browser. To my knowledge it’s pretty much a draw. Position, dimension, or margin operations are pretty slow either way. The disadvantage of JavaScript is that JavaScript animations take place on the same thread as all of your other JS. You’re potentially affecting the performance and responsiveness of your UI. By using CSS, you’re freeing up the JavaScript engine. And in some browsers, you’ll get the advantage of GPU processing.
Now with SVG, you don’t always have a choice. You should use SMIL, but SMIL isn’t supported in IE or Edge, and it’s deprecated in Chrome. So it’s easier to use JavaScript if you want to animate the shape of a path.
1 Like
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.
1 Like
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.)
1 Like