Complex Responsive Animations
CSS Conf, New York, NY 2015
Sarah Drasner, Senior UX Engineer at Trulia
@sarah_edo : twitter || @sdras : codepen
.gonna:not .give-you {
top: 0;
}
.gonna:not .let-you {
bottom: 0;
}
.gonna:not .run {
transform: rotate(180deg);
}First, a little CSS humor...
why?
- Animations in real-life applications!
- IRL means mobile
- Animation in terms of informative UX
- It's not as hard as it used to be!
- Delivering the correct content in a context users can readily use.
- Fun! (Remember fun?)
ui/ux animation
vs.
Standalone
UI/UX animation
Pieces of the UI move to aid in an informative UX choreography. This can typically be done with well placed CSS, some JS to trigger interactions. Responsive can be achieved with good CSS media queries.
UI/UX Animation:
Context-shifting
From this CSS Animation Rocks
Another good navigation example at Concrete Matter
Standalone
Used to illustrate concepts in the body of the page, either alongside or on it's own. Most of the basis of this talk is complex standalone animation. JavaScript is recommended for much longer implementations (explained later).
This pen.
Animation As INformation
- Animation must be designed
- Helps with context-shifting
- Invisible animation- check out Val Head's awesome "All the Right Moves"
- Comply with branding
- Animation for a company means having a motion design language, like Google Material Design
- Consistent on mobile, or a fallback to a light version
This pen.
If animation just feels like the sugar on top, that's because you treated it that way.
Motion on the web:
Not one size fits all
Not one size fits all
Adhering to branding means solving the problem for your users.
Some companies want blockbuster, knock your socks off, desktop experiences that you can't easily render on mobile, and that's ok.
For most companies, though, it's a small amount of UI or standalone animations for which responsive is achievable.
Motion Design language for projects
- Consider your tooling- loss leader- it was a lot of work at first that paid off along the way
- Reuse resources like easing functions, animation keyframes in mixins, extends, variables, you name it!
- If mobile is decoupled- easier to keep it consistent across both
- Good animation branding guidelines means less reinventing the wheel and communication down the line.
Seems like a lot of work?
SVG!
- Crisp on any display
- Less HTTP requests to handle
- Easily scalable for responsive
- Small filesize if you design for performance
- Easy to animate
- Easy to make accessible
- Fun! (there's a pattern here)
This pen.
Before we get started:
Optimize!
Before we get started:
Animation Performance!
- People expect mobile to be faster than web
- JankFree.org
- Advanced Performance Audits with DevTools by Paul Irish
- CSS-Tricks Article: Weighing SVG Animation Techniques with Benchmarks
- Above all else: test things yourself!
SVG Sprites
Start with this technique from Joe Harrison
Make it a responsive svg animation sprite
This pen.
that whole SVG AND animation was
8KB Gzipped.
Compare to using text with photos to illustrate an article.
CSS Animation
@mixin accelerate {
transform: translateZ(0);
backface-visibility: hidden;
perspective: 1000px;
}
[class^="star"] {
animation: blink 2s ease-in-out infinite both;
@include accelerate;
}
[class^="dot"] {
animation: blink 5s -3s ease-in-out infinite both;
@include accelerate;
}
@keyframes blink {
50% { opacity: 0; }
}No width and height for the SVG itself, instead define it in css
.initial {
width: 50%;
float: left;
margin: 0 7% 0 0;
}We're using percentage here, but we could also use flexbox.
viewBox="0 0 490 474" preserveAspectRatio="xMidYMid meet"Define smaller viewbox, put in preserveAspectRatio (though this is also the default)
Animation MEDIA QUERIEs
+ Adjust initial object, affects animation
[class^="mountain"], [class^="grass"] {
...
transform: skew(2deg);
}
@media screen and ( max-width: 500px ) {
.a {
animation: hover 2s ease-in-out infinite both;
}
.mountain, [class^="mountain"], .grass, [class^="grass"] {
transform: skew(1.5deg);
}
}!Important part
Animation MEDIA QUERIEs
YOu can do this, you know this already, it applies to all animation, even javascript
!Important part
Viewbox shift with javascript
var shape = document.getElementById("svg");
// media query event handler
if (matchMedia) {
var mq = window.matchMedia("(min-width: 500px)");
mq.addListener(WidthChange);
WidthChange(mq);
}
// media query change
function WidthChange(mq) {
if (mq.matches) {
shape.setAttribute("viewBox", "0 0 490 474");
shape.setAttribute("enable-background", "0 0 490 474");
}
else {
shape.setAttribute("viewBox", "0 490 500 500");
shape.setAttribute("enable-background", "0 490 500 500");
}
};Acts like a window to show and hide the requisite parts of the sprite
Fallbacks
Standalone SVG as an illustration of text
Very easy to implement. SVG stays a consistent size.
But Sarah, You Said COMPLEX
we want to do really complex stuff
OK COOL!
But we're going to use some javascript. Gsap, to be exact.
(I don't work for them and they don't pay me.)
here's why...
Solves cross-browser inconsistencies
Bad transform origin bug on rotation.
More in this CSS-Tricks article.
Chrome
IE
Firefox
Safari (zoomed)
Timeline
- stack tweens
- set them a little before and after one another
- change their placement in time
- group them into scenes
- add relative labels
- animate the scenes!
- make the whole thing faster, move the placement of the whole scene, nesting
All without recalculation!
The issue with longer CSS animations:
This pen.
Other cool things
for complex animation
- Motion along a path (widest support)
- Draggable
- CSS Properties
- Draw SVG- make an SVG look like it draws itself.
Percentage based transforms on SVG!
get excited.
This pen courtesy of GreenSock.
So we can do stuff like this, All fully responsive in every direction
It doesn't neccessarily have to be fluid, either. Let's Implement some Responsive design.
We can show a static layout on desktop and collapse it to fluid on mobile, just like we do with other responsive development.
Revisiting old approaches
Responsive animated Infographic
Three sources with detailed analysis showing Lead improvements
conversion
(one source example, The Whole Brain Group)
- increased traffic to their website by over 400%
- lead increase by almost 4500%
- the number of new visitors to their site to almost 78%
problems
- Not responsive- tipping point: Tim Kadlec
- Not updated to current context
- ^ Especially design
All posts older than 2 years.
What Happened?
This pen.
Responsive:
Change the viewbox in JavaScript like we did before:
Responsive:
Media queries for layout, and fallback with Modernizr:
/* media query example element, mobile first */
@media (max-width: 825px) {
container {
width: 100%;
}
}
@media (min-width: 826px) {
.container {
width: 825px;
}
}
/* fallback */
.inlinesvg .fallback {
display: none;
}
.no-inlinesvg .fallback {
width: 500px;
height: 500px;
display: block;
}Accessibility
Title and associative aria tags: (WIP)
<svg aria-labelledby="title" id="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 765 587">
<title id="title" lang="en">Circle of icons that illustrate Global Warming Solutions</title>You can also add a title for elements in the SVG DOM
This resource, with support charts.
Also, this article by Dudley Storey.
Social Coding sites help you learn
Fun. Remember fun?
(I don't work for them and they don't pay me)
- Codepen
- JS Fiddle
- Dabblet
People you should know about
- Val Head
- Sara Soueidan
- Rachel Nabors
- Tiffany Rayside
- Chris Gannon
- CJ Gammon
- LegoMushroom
- Ana Tudor
- David Walsh Blog
- CSS-Tricks
- Amelia Bellamy-Royds
- Taylor Hunt
- Dudley Storey
- GreenSock
- Dennis Gaebel
- I Hate Tomatoes (Petr Tichy)
- Lucas Bebber
- Joni Trythall
- Jake Albaugh
More!
THank you!
These Slides:
slides.com/sdrasner/cssconf