5 ms·
Using Snap.svg to animate SVG icons
- chj 13y agoThere 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 13y agolooks 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 13y agoOr 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.
- rimo 13y agoAll this svg stuff is getting pretty interesting.
- nickdoesdesign 13y agoIt 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 13y agoI 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 13y agoYou are correct, thanks!
- mdrn 13y agoHello Nick. If you don't mind, may you open the backbone boiler plate, and tell us what layout manager extension you use? :)
- nickdoesdesign 13y agoJust saw this, so I will answer for posterity: Backbone LayoutManager Ridiculously simple to use in an AMD setting.
- NKCSS 13y agoVery cool. I also love http://tympanus.net/Development/AnimatedCheckboxes/ http://tympanus.net/Development/AnimatedCheckboxes/
- NicoJuicy 13y agoThis is absolutely awesome for a beautifull UX!
- xj 13y agostunning!
- bbx 13y agoI 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.
- shoeless 13y agoThis 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.
- winslow 13y agoAnyone 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/
- teleclimber 13y agoNope. FF24 on Mac. Edit: updated to FF25, still smooth.
- pbhjpbhj 13y agofine for me FF25 on Kubuntu 13.04
- ndz275 13y agoYes. FF25 on Win7. Running Firefox in Safe Mode cleared it up. Disabled all Extensions and Plugins in normal mode, but it still stutters.
- teleclimber 13y agoWeird. Not seeing it on my Win7 machine. FF25.