Open & Close

I wanted to replicate CreativeDash’s open & close animation with pure CSS/SASS, but don’t think it’s possible without SVG path animations. This is the closest I got.

Kyle Henwood wrote a great blog post on how to build this with SVG.

Also, Anders Ingemann’s tutorial – Radial progress indicator using CSS – was really helpful in trying to figure out the circular mask.

The animation is based on this Open & Close dribbble shot by CreativeDash