Quantcast
Channel: Pens from Dan Wilson
Viewing all articles
Browse latest Browse all 599

CSS Motion Path with ray()

$
0
0

See the Code - See it Full Page - See Details

Currently requires Chrome Canary 64. Partial implementation is available to use angles (polar coordinates) as motion path. Spec says containing box (here the `main` element) should allow you to use a percentage length in `offset-distance`, but currently requires fixed units and containing box has no effect. Currently animating angle inside `offset-path` (which rotates around the circle) and also the `offset-distance` from 0 to 20vmin (which is the radius of the circle). You can pause one of the animations to see only one at a time in the CSS Variables. Or change the anchor points to see how that affects the animation. Thanks to @yisi for having [a demo](https://codepen.io/yisi/pen/gWdKLo) that showed this was already available.

This Pen uses: HTML, CSS, JavaScript, and


Viewing all articles
Browse latest Browse all 599

Trending Articles