

Using Snap.svg to animate SVG icons - bpierre
http://tympanus.net/Development/AnimatedSVGIcons/

======
chj
There are several cool demos on this site:

[http://tympanus.net/Tutorials/NaturalLanguageForm/](http://tympanus.net/Tutorials/NaturalLanguageForm/)

[http://tympanus.net/Development/MorphingDevices/#](http://tympanus.net/Development/MorphingDevices/#)

[http://tympanus.net/Tutorials/ResponsiveRetinaReadyMenu/](http://tympanus.net/Tutorials/ResponsiveRetinaReadyMenu/)

[http://tympanus.net/Development/PageTransitions/](http://tympanus.net/Development/PageTransitions/)

~~~
himal
looks like you missed a few :)

[http://tympanus.net/Development/AnimatedCheckboxes/](http://tympanus.net/Development/AnimatedCheckboxes/)

[http://tympanus.net/Development/CreativeButtons/](http://tympanus.net/Development/CreativeButtons/)

[http://tympanus.net/Tutorials/AnimatedBorderMenus/](http://tympanus.net/Tutorials/AnimatedBorderMenus/)

There are more.you can see them at the bottom of each page.

~~~
Chris_Newton
Or just go to the main Codrops page:

[http://tympanus.net/codrops/](http://tympanus.net/codrops/)

They have one of the best blogs for interesting/innovative front-end web
effects at the moment, IMHO. Almost anything by Mary Lou is worth a look, and
they’ve got some good material from a few others too.

------
bbx
I love it. SVG (or any vector asset really) is probably one of the best ways
to handle graphics in a responsive design.

Right now, I have no particular issue with resizing my HTML elements with CSS
using different margin/padding values. Font size is easily handled as well,
considering fonts are basically vector shapes (and it's the reason why they're
rendered differently across browsers). But dealing with images, especially
background ones, can be irritating because they're pixel-fixed.

Another interesting vector resource is icon fonts. I recently started a
project that included social icons (Facebook, Twitter, GitHub...) in theme-
based profiles. Themes mean different layouts and different color palettes.
Instead of generating tons of uniquely colored image sprites of various sizes
for each theme, I settled for an icon font. You basically use Illustrator to
generate SVGs for each social icon, and you use a tool like IcoMoon to build
your own custom font. I can then easily apply a different font-size and color
for each theme.

Creating vector images is still troublesome, but looking at these demos, I
might try to include more SVGs in future projects.

------
NKCSS
Very cool. I also love
[http://tympanus.net/Development/AnimatedCheckboxes/](http://tympanus.net/Development/AnimatedCheckboxes/)

------
winslow
Anyone having "stuttering/flashing" problems in Firefox? Works great in
Chrome.

EDIT: Stuttering on this page
[http://tympanus.net/Development/AnimatedCheckboxes/](http://tympanus.net/Development/AnimatedCheckboxes/)

~~~
ndz275
Yes. FF25 on Win7.

Running Firefox in Safe Mode cleared it up. Disabled all Extensions and
Plugins in normal mode, but it still stutters.

~~~
teleclimber
Weird. Not seeing it on my Win7 machine. FF25.

------
shoeless
This is great work. Anyone have any references to animating an entire SVG
object by location and size at the same time? For example, slide the SVG
diagonally while increasing it's size. I'm particularly interested in doing
this with D3 objects.

------
rimo
All this svg stuff is getting pretty interesting.

~~~
nickdoesdesign
It is, and Snap made it infinitesimally moreso. Ive been using it in
conjunction with Backbone, and find it extremely versatile, and with a good
Layout Manager extension, you dont run into zombie objects laying around.

So glad that Adobe made this open source.

~~~
theonewolf
I believe the word you're looking for is "infinitely."

Infinitesimally implies very small/not a lot:

"1: taking on values arbitrarily close to but greater than zero 2:
immeasurably or incalculably small <an infinitesimal difference>"
([http://www.merriam-webster.com/dictionary/infinitesimal](http://www.merriam-
webster.com/dictionary/infinitesimal))

~~~
nickdoesdesign
You are correct, thanks!

------
NicoJuicy
This is absolutely awesome for a beautifull UX!

------
xj
stunning!

