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...
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.
From this CSS Animation Rocks
Another good navigation example at Concrete Matter
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.
This pen.
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.
This pen.
Start with this technique from Joe Harrison
This pen.
Compare to using text with photos to illustrate an article.
@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; }
}
.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)
[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);
}
}
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
Very easy to implement. SVG stays a consistent size.
(I don't work for them and they don't pay me.)
here's why...
Bad transform origin bug on rotation.
More in this CSS-Tricks article.
Chrome
IE
Firefox
Safari (zoomed)
All without recalculation!
The issue with longer CSS animations:
This pen.
This pen courtesy of GreenSock.
We can show a static layout on desktop and collapse it to fluid on mobile, just like we do with other responsive development.
(one source example, The Whole Brain Group)
This pen.
Change the viewbox in JavaScript like we did before:
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;
}
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.
Fun. Remember fun?
(I don't work for them and they don't pay me)
These Slides:
slides.com/sdrasner/cssconf