Varun Vachhar · Jul 7, 2014

Open & Close

0Sign in to vote or save

This site does not allow itself to be embedded. You can still read it on the original site — the toolbar below keeps your place in the directory.

I wanted to replicate CreativeDash's open & close animation with pure CSS/SASS, but don't think it's possible without SVG path animations…

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

Read on varun.ca ↗

Comments

Nothing yet. Say the first thing.