Don’t be afraid of SVG: it is the intersection of graphic design and UI magic
Realistic motion effects are just the beginning.
View Sara Soueidan’s presentation on Slides
Building Better Interfaces with SVG
Tag Archives: SVG
The Gooey Effect AKA Shape Blobbing using SVG
Try this cool effect that uses SVG Gaussian blur, a color matrix and color blend to make two circles join together like drops of liquid
Lucas Bebber is the originator of some of the most creative effects I’ve ever seen on the web. So much so I couldn’t resist
SVG filters have good support, but not all browsers support them being applied to regular DOM elements, notably Safari. However, they do work at least on Firefox and Chrome, even the Android version, and the filter degrades nicely if it doesn’t work. If you absolutely need the effect to work, consider using SVG elements instead of DOM elements.
Read more from the source: CSS-Tricks
Elastic SVG Elements
Holy crap, you can use SVG to animate content boxes that bounce, flex, and change shape!
Today we’d like to share some inspiration for adding elasticity to elements. The idea is to integrate an SVG element into a component and then animate it from one path to another with an elastic animation. Using SVGs like this can make things like menus, buttons or other elements more interesting and make the interaction look more organic with a natural feel to it. It’s of course important to keep things subtle and not exaggerate the bounciness. The nice thing is that we can give a more “realistic” interaction feedback to the user. Especially touch feedback can benefit from using this kind of effect. Based on this idea, we’ve created some inspirational examples of contexts where a morphing shape animation enhancement could make sense.
Read article and view demos as Codrops
SVG Animation and CSS Transforms: A Complicated Love Story | CSS-Tricks
The latest verstion of GreenSock Animation Platform (GSAP) normalizes behavior of transforms on SVG elements
Guest author Jack Doyle, author of the GreenSock Animation Platform (GSAP) writes: “SVG is all the rage these days, and browser support is generally excellent…with one glaring exception: CSS transforms. This is particularly painful when it comes to animation because scale, position, rotation, and skew are so fundamental. “
Problems include:
– IE and Opera don’t honor CSS transforms at all on SVG elements. Instead, you must assign the value to the transform attribute.
– Firefox doesn’t honor %-based origins.
– Zooming in Safari breaks the sync between %-based and px-based origins.
– Firefox doesn’t recognize keyword-based origins like “right bottom”, and Safari alters them when the zoom is anything but 100%.
– In all browsers, px-based origins are measured differently for SVG elements than other DOM elements (see below).
Read more from the source: CSS-Tricks