A WORKSHOP WITH VAL HEAD
Try out animating with CSS, JS and SVG.
Get an idea of where and how your work can benefit from UI animation.
Have fun and try out some new things!
10:00 -11:00 UX in Motion
11:30 - 11:45 Break
11:45 - 1:00 Essentials of CSS animation
1:00 - 2:00 Lunch
2:00 - 3:30 Basics of TweenMax & TimelineMax
3:30 - 3:45 Break
3:45 - 5:00 SVG animation
Your name
Your animation experience
What are you hoping to get out of today's workshop?
The "yoga" of CSS
Allow you to modify the coordinate space of the CSS visual formatting model
(aka, change the way DOM objects look)
translate(), translateX(), translateY(), translateZ(), translate3d()
rotate(), rotateX(), rotateY(), rotateZ(), rotate3d()
scale(), scaleX(), scaleY(), scaleZ(), scale3d()
skew(), skewX(), skewY()
matrix(), matrix3d()
perspective()
These properties/methods can come in handy when working with transforms too:
Transforms usually look something like this:
.box {
transform: translate(50px, 100px);
}
.box {
transform: scale(1.5) skew(20deg) rotate(45deg);
}
matrix() or matrix3D() for combined transform effects and animations.
Two helpful tools:
The minimum you need for a transition:
Your point A and point B might look like this:
.box {
transition: 1s;
}
.box:hover {
transform: scale(2);
}
A duration and property specification add detail:
.box {
transition: background-color 1s ease-in-out;
}
.box:hover {
transform: scale(2);
}
Multiple transitions are possible too.
Comma separate the different transitions for more complex effects:
.box {
transition: background-color 1s ease-in-out,
transform .5s ease-out;
}
.box:hover {
transform: scale(2);
background-color: blue;
}
Other transition related properties to help refine your transitions:
Use this Pen as your starting point and use CSS Transforms and Transitions to:
Bonus: transition the menu items into view with some overlapping action
And here’s one possible solution if you’d like to compare notes
The minimum you need for an animation:
An example keyframe animation:
.box {
animation: myAnim 1s;
}
@keyframes myAnim {
from {opacity: 0;}
to {opacity:1;}
}
CSS Animation properties:
Useful properties you might not know you can change within keyframes:
There are a few lists of all the properties you can transition or apply animations to.
Bookmark the one(s) you like best!
Use this Pen as your starting point and:
Bonus: Use as Sass variable for the "beat" to coordinate the timing of your animations
AKA Custom Properties
:root {
--main-color: #06c;
}
#foo h1 {
color: var(--main-color);
}
Why they’re a big deal:
CSS:
li {
--hue:270;
background: hsl(var(--hue), 80%, 60%);
border-radius: 5%;
}
JavaScript:
li.style.setProperty('--hue', Math.floor(Math.random() * hDiff * 2) + hStart);
@keyframes thing {
100% {transform: scale(calc(var(--scale) * 1)) rotate(var(--deg));}
}
li {
...
animation: thing calc(var(--dur) * 1s) linear var(--repeat) alternate;
}
li:nth-of-type(1) {
--scale:.8;
--deg:67deg;
}
li:nth-of-type(2) {
--scale:.9;
--deg:-30deg;
}
https://una.im/local-css-vars/# 💁
https://vgpena.github.io/winning-with-css-variables/
https://developers.google.com/web/updates/2016/02/css-variables-why-should-you-care
http://danielcwilson.com/blog/2017/02/individual-transforms/
Two CodePen collections of examples:
Add a CSS variables to one of your CSS Pens.
OR
Modify one of the CSS Variables example Pens to use variables differently that it does now.
Four discrete shapes:
Two SVG optimizers:
jakearchibald.github.io/svgomg/
petercollingridge.appspot.com/svg-editor/
(maybe not so much anymore)
We have some choices!
(use the eye icon to see the less mathy compiled CSS)
Greensock's showcase page: https://greensock.com/examples-showcases
Lots of CodePens are made with Greensock too: https://codepen.io/search/pens?q=GSAP&limit=all&type=type-pens
TweenMax.to(object, seconds, {property: amount, property:amount, ease});
TweenMax.to("div", 2, {
scaleY:0.75,
scaleX:1.25,
y:300,
opacity:0.75,
ease: Bounce.easeOut
});
Other options:
TweenMax.to
TweenMax.from
TweenMax.fromTo
TweenMax.fromTo("div", 2,
{scaleY:1, scaleX:1.5, y:0, opacity:1},
{scaleY:0.75, scaleX:1.25, y:300, opacity:0.75, ease: Bounce.easeOut});
Staggers are also useful. (And less code than with CSS!)
TweenMax.staggerTo(gboxes, 2,
{
backgroundColor: "#FFCD41",
rotation: 90,
delay: 1,
ease: Sine.easeOut},
0.3
);
Some people find this cheat sheet helpful: https://ihatetomatoes.net/wp-content/uploads/2015/08/GreenSock-Cheatsheet-2.pdf
Everyone loves the ease visualizer, it's fun:
https://greensock.com/ease-visualizer
Three other helpful things that answer common questions:
A timeline groups individual animations together and gives us control over how they play out.
We can use TimelineLite or TimelineMax
tl = new TimelineMax({repeat: -1, delay: 1,yoyo:true});
Once you have the timeline created, you can add animations to it:
tl = new TimelineMax({repeat: -1, delay: 1,yoyo:true});
tl.staggerTo(drops, 2,
{
y:90,
ease: Sine.easeOut},
.75
);
Position parameters give you even more control to make animations overlap or create gaps between animations:
Understanding position parameters
What if we made our weather icon animate with a GSAP timeline instead?
Animate our weather icon (or this SVG Pen) using GSAP
hamburger: https://codepen.io/valhead/pen/KgQWmZ?editors=0010
weather: https://codepen.io/valhead/pen/gmdBRr/
JavaScript - sorting data, adding elements, causing change
Style - figuring out which CSS rules apply to which elements
Layout - calculate the size changes of styles
Paint - filling in the pixels
Composite - putting everything in the correct layer order
Text
Text
Text
An in-depth look at GPU animation
On translate-3d and layer creation hacks
Firefox and Chrome both have great animation panels in their dev tools!