Skip to main content
CSS is fun and cool and I like it.
Link

Different Approaches to Responsive CSS Motion Path

Article

Create a Responsive CSS Motion Path? Sure We Can!

There was a discussion recently on the Animation at Work Slack: how could you make a CSS motion path responsive? What techniques would be work? This got me thinking.

A CSS motion path allows us to animate elements along custom user-defined paths. Those paths follow the same structure as SVG paths. We define a path for an element using offset-path.

.block {
  offset-path: path('M20,20 C20,100 200,0 200,100');
}

These values appear relative at first and they would be … Read article “Create a Responsive CSS Motion Path? Sure We Can!”

Link

Motion Paths – Past, Present and Future

Article

Movin’ Modals Along a Path

Modals always be just appearin’. You might see one once in a while that slides in from one of the edges, or uses some kind of scale/opacity thing to appear from “above” or “below.” But we can get weirder than that. Why not have them come in on an offset-path? … Read article “Movin’ Modals Along a Path”

Almanac

offset-anchor

The offset-anchor property defines a point within the box it is applied as the anchor that moves along the offset-path.

That’s kinda wordy, so let’s break that down a bit.… Read article “offset-anchor”

Almanac

offset-path

This property began life as motion-path. This, and all other related motion-* properties, are being renamed offset-* in the spec. We’re changing the names here in the almanac. If you want to use it right now, probably best to use both syntaxes.

The offset-path property in CSS defines a movement path for an element to follow during animation. Here’s an example using the SVG path syntax:

.thing-that-moves {
  /* "Old" syntax. Available in Blink browsers as of ~October 
Read article “offset-path”
Article

SMIL is dead! Long live SMIL! A Guide to Alternatives to SMIL Features

SMIL, SVG’s native animation specification, has been highly regarded because it offers so many bells and whistles for performant SVG animation rendering. Unfortunately, support for SMIL is waning in WebKit, and has never (nor will likely ever) exist for Microsoft’s IE or Edge browsers. Have no fear! We’ve got you covered. This article explores some of those SMIL-specific features and delves into the alternatives to achieve the same effects with a longer tail of support.… Read article “SMIL is dead! Long live SMIL! A Guide to Alternatives to SMIL Features”