Skip to main content
CSS is fun and cool and I like it.
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!”

Almanac

offset-rotate

This property began life as motion-rotation, then it became offset-rotation, now it’s offset-rotate. It’s still a Working Draft experimental property so 🤷‍♀️. If you’re going to use it, you might as well use whatever the most recent thing is.

The offset-rotate property in CSS controls the angle of an element depending on its offset-distance along a offset-path.

Imagine the element being animated along a path is a little race car. As the race car moves along … Read article “offset-rotate”