Using Snap.svg to animate SVG icons | Hacker News Reader

Using Snap.svg to animate SVG icons

tympanus.net

109 pointsbpierre19 comments

Open articleView on HN

There are several cool demos on this site:

http://tympanus.net/Tutorials/NaturalLanguageForm/

http://tympanus.net/Development/MorphingDevices/#

http://tympanus.net/Tutorials/ResponsiveRetinaReadyMenu/

http://tympanus.net/Development/PageTransitions/

looks like you missed a few :)

http://tympanus.net/Development/AnimatedCheckboxes/

http://tympanus.net/Development/CreativeButtons/

http://tympanus.net/Tutorials/AnimatedBorderMenus/

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

Or just go to the main Codrops page:

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.

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.

Very cool. I also love http://tympanus.net/Development/AnimatedCheckboxes/

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

EDIT: Stuttering on this page http://tympanus.net/Development/AnimatedCheckboxes/

Nope. FF24 on Mac.

Edit: updated to FF25, still smooth.

fine for me FF25 on Kubuntu 13.04

Yes. FF25 on Win7.

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

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

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.

All this svg stuff is getting pretty interesting.

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.

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)

You are correct, thanks!

Hello Nick. If you don't mind, may you open the backbone boiler plate, and tell us what layout manager extension you use? :)

Just saw this, so I will answer for posterity:

Backbone LayoutManager

Ridiculously simple to use in an AMD setting.

This is absolutely awesome for a beautifull UX!

stunning!

Reply on news.ycombinator.com