Nice implementation of a master-detail view, inspired upon the Surf Project Dribble Shot by Filip Slováček (pictured above). You can see this kind of animations – where elements are reused and moved from one viewstate to the other – in quite a few mobile apps nowadays (take the App Store App on iOS11 for example). …
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 both 24-bit images and 8-bit transparency. Ever since APNG landed in Firefox (10 years ago …
Continue reading “Opera 46 and Chrome 59 now support APNG (Animated PNG)”
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 calculates the interpolated data: import { interpolate } from “flubber”; const triangle = “M1,1 L2,1 …
JavaScript Confetti Cannon
The success to the animations in “Who Framed Roger Rabbit”
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 XML contents will look familiar. The “Endless Pin Jump” animation (pictured above) for example is …
Continue reading “Animating vectors in Android with AnimatedVectorDrawable“
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 – generated by the BodyMovin plugin for After Effects as its source, and then renders it …
Continue reading “Easily add high-quality animation to any native app with Lottie”
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 my portfolio, so I made that my personal challenge. The idea was to draw animals …
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 to design in slow motion (and then speed everything up later) Take videos of your …