20+ CSS Motion Path Examples - Free Code + Demos
Collection of 20+ CSS Motion Path Examples. All items are 100% free and open-source.
1. CSS Is Awesome (CSS Motion Path)
Author: yuanchuan (yuanchuan)
Links: Source Code / Demo
Created on: January 9, 2020
Made with: HTML, SCSS
2. CSS Motion Path + Gooey Animation
Author: Prathamesh Koshti (prathameshkoshti)
Links: Source Code / Demo, Dribbble Shot
Created on: January 8, 2020
Made with: HTML, CSS
3. CSS Motion Path With SVG
Works in Chrome or Firefox
Author: Michelle Barker (michellebarker)
Links: Source Code / Demo
Created on: January 4, 2020
Made with: HTML, SCSS
4. SVG Motion Path
Inspired by this insightful article from Cassie Evans, tinker with SVG syntax, motion path and a few hard-coded clip paths to make a silly loader out of a bicycle and Google Trends' logo.
Author: Gabriele Corti (borntofrappe)
Links: Source Code / Demo
Created on: December 11, 2019
Made with: HTML, CSS, JS
Tags: svg, motion path, clip-path
5. Think - Create Cycle
The think, create, think, create, etc cycle Only works in offset-path/motion-path enabled browsers
Author: Mikael Ainalem (ainalem)
Links: Source Code / Demo
Created on: December 13, 2017
Made with: HTML, CSS
Tags: think, create, cycle, rotate, round and round
6. SVG Motion Path
Inspired by this insightful article from Cassie Evans, tinker with SVG syntax, motion path and a few hard-coded clip paths to make a silly loader out of a bicycle and Google Trends' logo.
Author: Gabriele Corti (borntofrappe)
Links: Source Code / Demo
Created on: December 11, 2019
Made with: HTML, CSS, JS
Tags: svg, motion path, clip-path
7. Bouncing Heart (Motion Path)
Author: Katarzyna Marcinkiewicz (KazikM)
Links: Source Code / Demo
Created on: April 8, 2017
Made with: HTML, CSS
8. Shape Revealer Via CSS Motion Path
Shape is revealed as animating faster and creates illusion of an actual line/path
Author: Dan Wilson (danwilson)
Links: Source Code / Demo
Created on: October 23, 2016
Made with: HTML, SCSS, JS
Tags: css motion path, motion path, texas, web aniamtions api, playback rate
9. CSS Motion Path In An SVG
Author: Dan Wilson (danwilson)
Links: Source Code / Demo
Created on: October 17, 2016
Made with: HTML, SCSS
10. Animating Offset-distance & Offset-path (& D)
Update 10/21/2019: The offset-* pieces now work in Firefox Nightly (71) , but d is not a recognized property. Updated 10/27/2017: Chrome Canary (64) supports this now. According to Chrome Status the ability to animate the offset-path (in addition to the offset-distance) for Motion Path i...Read More
Author: Dan Wilson (danwilson)
Links: Source Code / Demo
Created on: March 29, 2017
Made with: HTML, CSS
Tags: css motion path, offset path, motion path, interpolating
11. Star Trail
Random CSS motion path using https://css-tricks.com/svg-path-syntax-illustrated-guide/ as a guide for SVG paths and http://bennettfeely.com/clippy/ for the background clip of a star! Thank you for the awesome resources you guys! ( •⌄• ू )✧
Author: Bryan Stoner (mimoduo)
Links: Source Code / Demo
Created on: December 14, 2016
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: css motion path, sass, animation, stars
12. CSS Motion Path Demo
Author: Jhey (jh3y)
Links: Source Code / Demo
Created on: March 3, 2020
Made with: Pug, CSS
CSS Pre-processor: None
JS Pre-processor: Babel
HTML Pre-processor: Pug
13. Offset-distance In Motion
Author: Dan Wilson (danwilson)
Links: Source Code / Demo
Created on: December 8, 2019
Made with: HTML, CSS
14. Psyworm, CSS Motion-path Animation Experiment
CSS motion-path experiment, check caniuse.com for latest browsers support info.
Author: mixedrays (mixedrays)
Links: Source Code / Demo
Created on: January 18, 2016
Made with: HTML, SCSS
Tags: motion-path, experiment, animation
More Awesome Lists:
Share: