Tag Archives: Animation

Moving along a curved path in CSS with layered animation

Using an inner and outer container you can animate content on a curved path

 

CSS animations and transitions are great for animating something from point A to B. That is, if you want to animate along a straight path. No matter how much you bend your bezier curves, you can’t make something move along a curved path by applying ananimation or a transition to an object. You can overshoot with custom timing functions, and produce spring-like effects, but the relative movement along the X and Y-axis will always be identical.

However, instead of turning to JavaScript for producing more natural looking motion, there’s an easy way to work around this limitation: layered animation. By using two or more objects to drive an animation, we get fine grained control over an object’s path, and can apply one timing function for the movement along the X-axis, and another one for the Y-axis.

Read more from the source: Tobias Ahlin

ramjet: Transform One DOM Element into Another

Check out this cool transition effect library for JavaScript

 

Ramjet makes it looks as though one DOM element is capable of transforming into another, no matter where the two elements sit in the DOM tree.

It does so by making copies of the two elements (and all their children), setting a fixed position on each, then using CSS transforms to morph the two elements in sync.

View the demo at rich-harris.co.uk

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

Pause and slow down CSS3 animations in Chrome Dev Tools

Chrome Canary gives you a sneak peak of dev tools for CSS3 animation

 

Visually debugging CSS animation just got a whole lot easier! We’ve needed better debugging tools (or any debugging tools, really) for CSS animation for ages. Now we’re starting to see some show up in browsers! The latest version of Canary now has controls to globally slow down and pause animation right from Dev Tools. It’s such a huge help for both designing and troubleshooting your animations.

To try these out for yourself in Canary, open up Dev Tools and go to Styles tab under Elements. Look for the play button in the far right and you’re off to the races.

Read more from the source: valhead.com

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