CSS Dev Conf, San Antonio - October 18, 2016

Dan Wilson | @dancwilson

Slides: https://danielcwilson.com/talks/2016/motionpath

Basic animation

See the Pen Simple animation examples by Dan Wilson (@danwilson) on CodePen.

Curves and Paths

Bouncing Ball

Cartoon Animation, Preston Blair

Comparison of web animation techniques from Sparkbox

Standard Web Conference Sing Along Slide

See the Pen Sing along: Deep in the Heart by Dan Wilson (@danwilson) on CodePen.

Sing along: Deep in the Heart on CodePen

Curves and Paths

See the Pen Inside Out DVD Menu by Dan Wilson (@danwilson) on CodePen.

Motion Paths in SVG

SMIL: animateMotion

Specify a path, duration, iteration count, rotation

See the Pen Motion Path with SVG by Dan Wilson (@danwilson) on CodePen.

Motion Paths in SVG

See the Pen Learning SVG animation by Fabio (@FabioG) on CodePen.

See the Pen Escher's Floating Point Waterfall by Adam Guttentag (@guttentag) on CodePen.

Libraries

• GSAP

  See the Pen Demo for autoRotate true/false by Sarah Drasner (@sdras) on CodePen.

  GSAP + SVG for Power Users

  Sarah Drasner

• anime.js

  See the Pen Follow SVG Path - anime.js by Julian Garnier (@juliangarnier) on CodePen.

  GitHub Readme

  Julian Garnier

RequestAnimationFrame

See the Pen Motion Path RAF demo by Dan Wilson (@danwilson) on CodePen.

Article: Animating objects over a curved path

Fine, fine...

but isn't this  CSS  Dev Conf?

Three options to discuss

Generate Keyframes

Transforms on multiple axes

• 1. Take an element
  2. Give it a wrapper element
  3. Animate the element with translateX
  4. Animate the wrapper with translateY
  5. Play with easings (timing functions)

Transforms on multiple axes

• 
  .mover-y {
    will-change: transform;
    animation: y 2s infinite ease-out alternate;
  }
  .mover-x {
    will-change: transform;
    background: #45b8c9;
    width: 2rem; height: 2rem; border-radius: 50%;
    animation: x 2s infinite ease-in alternate;
  }
  
  @keyframes x {
    100% { transform: translateX(300px); }
  }
  @keyframes y {
    100% { transform: translateY(300px); }
  }
                

Transforms on multiple axes

Moving along a curved path in CSS with layered animation by Tobias Ahlin

See the Pen Sing along with the bouncing ball v2 by Dan Wilson (@danwilson) on CodePen.

Transforms on multiple axes

• 
  .mover-z { /*grandparent*/
    will-change: transform;
    animation: z 2s infinite ease-in-out alternate;
  }
  @keyframes z {
    50% { transform: translateZ(-200px); }
  }
  
  .mover-y { /*parent*/
    will-change: transform;
    animation: y 2s infinite ease-out alternate;
  }
  .mover-x {
    will-change: transform;
    background: #45b8c9;
    width: 2rem; height: 2rem; border-radius: 50%;
    animation: x 2s infinite ease-in alternate;
  }
  
  @keyframes x {
    100% { transform: translateX(300px); }
  }
  @keyframes y {
    100% { transform: translateY(300px); }
  }
                

Transforms on multiple axes

See the Pen Varying Y + Linear X Easings by Dan Wilson (@danwilson) on CodePen.

See the Pen Confetti by Dan Wilson (@danwilson) on CodePen.

One more method in CSS

As much fun as the previous method is...

It's not actually this talk's focus...

Web Animations Spec in 2016

Take the benefits of SVG, JS, and CSS animation

Let the other methods have those benefits as well

MDN Docs for Web Animations API from Rachel Nabors

SVG already has a proven way to animate along a path

CSS Motion Path

See the Pen CSS Motion Path Spiral CSSDC by Dan Wilson (@danwilson) on CodePen.

CSS Spec: Editor's Draft

CSS Motion Path

Roots in the Web Animations spec

Expose animation methods previously confined to SVG to the DOM via CSS and JS

Pieces supported in Chrome and Opera

New pieces making their way to Chrome Canary under a flag

CSS Motion Path Properties

motion-path defines the path to follow

motion-offset defines the position on the path

motion-rotation defines rotation along the path

.mover {
  motion-path: path("M 100,100 Q 200,50 300,100");
  motion-rotation: auto;
  animation: follow-path 2s 0s infinite alternate ease-in-out;
}
@keyframes follow-path {
  100% { motion-offset: 100%; }
}
          

Example

CSS Motion Path

Still Early

Play

Experiment

Know it will change

Speaking of Change...

It changed!

motion-path → offset-path

motion-offset → offset-distance

motion-rotation → offset-rotation

offset-position

offset-anchor

CSS Dev Conf, San Antonio - October 18, 2016

Dan Wilson | @dancwilson

Slides: https://danielcwilson.com/talks/2016/motionpath

Why the changes?

Motion Path and Round Display specs had overlap

Several use cases for Motion Path without motion

We will cover support as we go

Focusing on latest spec

offset-path

path()

url()

CSS Basic Shapes

angles*

offset-path: path()

.mover {
  offset-path: path("M 100,100 L 200,200");
}
					

What you find in an SVG path d attribute

<svg>
  <path d="M 100,100 L 200,200" stroke-width="1"/>
</svg>
					

Creating a path value

Can be intimidating

Commands to move, Commands to draw

M 100,100 L 200,200

SVG Pocket Guide: The path Element

CSS Tricks: The SVG path Syntax: An Illustrated Guide

Or... export an SVG and copy the values

offset-path: url()

<svg>
  <path d="M 100,100 L 200,200" id="best-offset-path"/>
</svg>
          

.mover {
  offset-path: url(#best-offset-path);
}
          

Similar to path(), but SVG is already in document

offset-path with CSS Shapes

You've likely heard about these at the conference already

Can flow text around non-rectangles

Can use with clips

See the Pen Basic Shapes Basics by Dan Wilson (@danwilson) on CodePen.

offset-path with CSS Shapes

circle(), ellipse(), polygon(), etc.

offset-path: circle(20px); //radius
offset-path: ellipse(20px 30px); //x-radius y-radius
offset-path: polygon(0% 20%, 50% 0, 100% 20%, 100% 80%, 50% 100%, 0% 80%); //hexagon
          

offset-path Support

Chrome and Opera only in 2016

See the Pen CSS Motion Path value types by Dan Wilson (@danwilson) on CodePen.

Only path() at the moment

Shapes and URLs can be converted to path, though

offset-distance

Any length value

To travel along the path, go from 0% to 100%

Oh... and paths don't have to be continuous

See the Pen CSS Motion Path with Gaps by Dan Wilson (@danwilson) on CodePen.

offset-distance

Does not have to move

See the Pen Motion Path Infinity (2016 Spec) by Dan Wilson (@danwilson) on CodePen.

offset-rotation

Which way does the object "face" along the path

auto (the default value) will follow the path

Can specify an angle for a fixed direction

Can also combine them to follow the path + an offset angle

offset-rotation

See the Pen Offset Rotation Values by Dan Wilson (@danwilson) on CodePen.

Enhance!

Use @supports to check for support

See the Pen Photo Sharr (CSS Motion Path Demo) by Dan Wilson (@danwilson) on CodePen.

Any other demos?

Send an Email button

Unnecessary Path

CSS Round

Spec for round surfaces, such as watches

Polar coordinates

Containing elements

Back to offset-path: <angle>

.item-container {
  width: 500px;
  height: 500px;
}
.item {
  offset-path: 30deg; //might have more special syntax
  offset-distance: 50%;
}
          

Discussion in spec

offset-position

Starting position of the path

Discussion in spec

offset-anchor

Defines the point that connects to the path

Discussion in spec

More on CSS Round

Editor's Draft

Polyfill Demos show the positioning benefits

So Everything's Perfect?

Don't forget spec is not finalized... even offset could be renamed again

Minimal support only in Blink browsers

Multi Device World...

So Everything's Not Perfect?

See the Pen Motion Path Options: Fixed Dimensions by Dan Wilson (@danwilson) on CodePen.

So Everything's Perfect-y?

See the Pen Motion Path Options: Responsive(ish) by Dan Wilson (@danwilson) on CodePen.

Likely something where containing elements with a viewBox property could help

Well Dan (or is it Daniel?)... Animating along a path sounds fun, but I still don't see why I should learn anything about this motion - I mean offset - path. It's barely supported, and has responsive issues, and will take forever to make it into any other browsers, and it will probably change a bit more, and I need to support Android several versions back, and when will my iPhone do this? And why hasn't the Surface Phone come out yet?

Fair enough

Did you see the other things that slipped in here?

Path/Shapes syntax is appearing in many places in CSS

Get in early & help form final spec

Be creative with just an object and a path

And maybe learn the Web Animations API! (and ponder how this will conflict with its offset keyword)

Thank you very much!

Slides: https://danielcwilson.com/talks/2016/motionpath

CodePen: @danwilson

Twitter: @dancwilson

Yes... I was inconsistent with my usernames. I've learned my lesson for the future.

Also find me on slack.animationatwork.com