Codepen - Add and Remove

19 Jul 2014

I was browsing Dribbble the other day and ran across this cool animation created by Dribbble user Toxinboy.

Add & Remove by Toxinboy

I really like it, but because it’s a gif, you can’t really do anything with it in a website. Change the background color, mouse over effect, click events, etc. Simple things aren’t doable unless it’s created from code.

So, I created this.

See the Pen Add & Remove (in code) by William Lindner ( @wlindner ) on CodePen .

The button is a combination of SVG shapes. A few different animations. The most complex is a line animation. Read more about it here. I used D3.js to create and animate the shapes, but that is definitely not a requirement. Just a library I’m very comfortable using.