Animation Advice from a CSS Master
Just over a week ago we were lucky enough to have Tiffany Brown join us on the SitePoint forums for her live Q&A on CSS Animations.
I think it’s fair to say that with over 2,200 views, it was pretty successful! In case you missed it, I’ve compiled the highlights from the event for your reading pleasure.
Tiffany is a freelance developer based in Los Angeles. She’s the author of CSS Master and co-author of Jump Start HTML5. Before becoming a freelance developer, she was part of the Opera Developer Relations team and has worked in small agencies within Atlanta. Tiffany now spends her days educating the world in web development through her written books, blog, and articles.
Q: I am an instructor at a community college. I have been asked to research and lay out a web development AAS (2-year degree) for web development. There are so many things to choose from, that I am overwhelmed when trying to lay out the curriculum. Any advice on a path for students to learn Web Development? I thought:
The main problems are which tools to use, frameworks, CMS, etc?
Also helpful is pointing them towards the right resources, MDN is a great API reference I wish I’d had when I started out, for example.
- Ruby and its Rails framework,
- Python and Django, and/or
- PHP + the Laravel framework.
It’s also helpful to teach basic server configuration: Nginx or Apache. Roll a version management tool into the curriculum, ideally as part of a class on something else.
Kelle (staff): Ember and Backbone are tricky because they require a pretty decent JS background to use them well, in my opinion.
Angular is quite good for beginners, especially if they’ve taken the time to understand the fundamentals of the language beforehand. One of the good things about Angular (or bad depending on your perspective, but good for learning purposes), is that it comes bundled with a bunch of helpful things that ease people into some of the more important ideas in modern front-end development.
At SitePoint we use React almost exclusively, so I’m pretty biased about view frameworks; it’s definitely a steeper learning curve however!
Guest: Fantastic Advice. I am so grateful. Thank you for responding. Do you have a recommendation for a version management tool?
Tiffany: I’d recommend Git or Mercurial. SVN is another option, but it isn’t a pleasant one. There are services that offer one or more of them, and students can sometimes get free plans. Do a Google/DuckDuckGo search for hosted Git or hosted Mercurial and you’ll find a bunch.
Q: This is one of those topics that you always want to dive into but you never get the time to do it. I always found that animations were a bit tricky and hard to learn so I always gave up. But hey! Maybe my impressions are wrong and they’re not that tricky after all. CSS animations have greatly improved but most of the ones I’ve seen still include bits and pieces of JS (jQuery most of the time), so it looks to me that if you want to learn one, you have to learn the other.
Q: What CSS animation libraries do you recommend? I use Animate.css
Tiffany: 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.
Q: Hi, would you recommend using Hover.css? Or why not?
Tiffany: 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 let’s you cherry pick which parts to use and it has some clever animations too. I’m neither for nor against it.
Q: Would you recommend just using animation on desktop computers or on mobile? If on mobile what are the big issues to be aware of?
Tiffany: You can use animation on any device with a browser that supports it. If the device has a slower processor, you could conceivably run into some issues. But that’s something that (hopefully) you’ll discover during testing.
Q: What is your performance advice/concern when we use animations? What to use with care, what to avoid?
Avoid reflows wherever possible
A reflow occurs when the dimensions of an object change, or its position changes. So instead of animating top, right, bottom, and left; use
transform and the
translate functions. Margins and borders are other properties that can cause a reflow. I haven’t tested this, but I suspect that animating
outline might be a good way to work around that.
Animating the width and height properties of an object (including the min-/max-properties in there) can also trigger a reflow. Sometimes you have to, though; using transform:
scaleX() or transform:
scaleY() isn’t always a good alternative to width and height.
Q: I am wondering if there is a practical limit, size, or number, to using elements in animations.
Tiffany: 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.
Q: From what I’ve seen so far, animations, transitions, and transforms are used for “enhancement” and I’ve not noticed any use where if they broke for whatever reason UX would be affected. I assume the same type of rule as “don’t use images without some form of alternate text to convey the same message” applies.
Do you know of any potential problems in this regard?
Transitions and animations also need values that can be interpolated. You may have run into a situation of animating to or from height: auto, and found that it doesn’t work. That’s because the start and end values for a property need to be numeric, so that the browser can figure out the values in between.
I’d also recommend that you don’t tie a mission-critical action like an Ajax form submission to the
animationEnd events. A user interaction can prevent those events from being triggered.
Tiffany: 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.
Paul (Guest): 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.
Q: 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 than CSS animations.
Paul (Guest): Yes I use velocity.js for animated menus on mobile and it is a 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.)
Q: Hi @webinista! I was wondering if you have any tips or rules for smooth, performant animations? Is there anything we should stay away from animating?
Tiffany: 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.
Paul (Guest): Use translate to move things rather than absolute positioning as it is more performant.
Q: What was the last trick regarding animations or transitions that you considered very useful or tricky? For example mine was one regarding
animation-delay – if I want multiple animations to start from the beginning of page load I’ll give negative values so I could keep the delay between them. Thanks!
Tiffany: Ooh. This is a good one.
While working on the book, I dug into the
cubic-bezierfunction. 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.
Animation on Sites
Q: Right now, I see very many people talking about animation and its possibilities, but beyond what appear to be very impressive test pieces, Chris Gannon’s Lava Lamp for example. I’m not entirely sure where they fit in the lexicon of web design. How do you anticipate they will be used on a business website (for example) and do you have any examples you can point at?
Tiffany: We’re starting to see animations and transitions on business websites. MailChimp has one of my favorite examples. After you schedule an e-mail, there’s an animated SVG of a chimp holding up “metal fingers” encouraging you to “Rock on.” Unfortunately, it’s only visible to logged-in customers.
I do think you’ll see animation – and I’m including transitions – used to add that sort of whimsy. You can do clever loading animations and hover effects. Say, revealing an entire object on hover by animating the
clip-path property. McDonald’s may animate their arches logo. I think you’ll also see animated charts in combination with SVG.
That’s a wrap!
How are those for words of wisdom? Tiffany had spent an extra 1.5 hours on the forums with us discussing CSS animations. If you’re only reading this discussion here, then I’d say it’s safe to assume you missed the event. However there’s no need to feel that you missed out, because you can still read the whole discussion and continue to take part. Better yet, start your own forum discussion.