Tag Archives: animation

Opera 46 and Chrome 59 now support APNG (Animated PNG)

This part of the Opera 46 release notes got me very excited: Opera now supports animated PNG, or APNG for short. APNG is a file format that works similarly to GIF. The difference is that APNG is smaller and supports … Continue reading

Elsewhere , , Leave a comment

Smooth SVG Path Morphing with flubber

The goal of this library is to provide a best-guess interpolation for any two arbitrary shapes (or collections of shapes) that results in a reasonably smooth animation, without overthinking it. Installation per npm: npm install flubber Note that flubber only … Continue reading

Elsewhere , , 1 Comment

JavaScript Confetti Cannon

Built using GSAP and its Physics2D Plugin

Elsewhere , , , , Leave a comment

The success to the animations in “Who Framed Roger Rabbit”

As the author calls it: “the fundamentals of hybridizing animation with live action film”. Connected eye lines Physical Interactions with the Environment Light & Shadow Accuracy … always take the chance to “Bump The Lamp” 🙂 (via The Verge)

Elsewhere , , Leave a comment

Animating vectors in Android with AnimatedVectorDrawable

Seeing Lottie in action, I was reminded of Android’s AnimatedVectorDrawable which also allows one to do vector based animations. This class animates properties of a VectorDrawable with animations defined using ObjectAnimator or AnimatorSet. If you’re familiar with SVG, the AnimatedVectorDrawable … Continue reading

Elsewhere , , , Leave a comment

Easily add high-quality animation to any native app with Lottie

By the folks at AirBnB: Lottie is an iOS, Android, and React Native library that renders After Effects animations in real time, allowing apps to use animations as easily as they use static images. Lottie uses a JSON file – … Continue reading

Elsewhere , , , , 1 Comment

Owl

This owl was drawn by Dorota Pankowska using 13 circles, like Twitter’s Bird Logo: If you can make a bird out of circles, then you can probably make all sorts of animals. I wanted to add something more design-based to … Continue reading

Elsewhere , , Leave a comment

10 principles for smooth web animations

Don’t change any properties besides opacity or transform! Hide content in plain sight with opacity: 0; and pointer-events: none; Don’t animate everything at the same time Slightly increasing transition delays makes it easy to choreograph motion Use a global multiplier … Continue reading

Elsewhere , , , Leave a comment

SVG Line Animation for the Uninitiated

In case you’ve missed Jake’s post “Animated line drawing in SVG” back in 2013, a refresher on the subject 🙂 SVG Line Animation for the Uninitiated →

Elsewhere , , , Leave a comment

How to Use Animation to Improve UX

Animation may be used in a wide range of scales and contexts to unite beauty and function: it can influence behavior, communicate status, guide the users attention and help the user see the results of their actions. Here are just … Continue reading

Elsewhere , , , Leave a comment