-
Recent Posts
Archives
Categories
Meta
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
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
JavaScript Confetti Cannon
Built using GSAP and its Physics2D Plugin
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)
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
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
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
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
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 →
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