Tag Archives: animation

Implement FLIP transitions easily with flipping

Back in 2015 Paul Lewis published a brilliant article named FLIP your animations, a technique to getting smooth animations on the web. FLIP stands for First, Last, Invert, Play First: before anything happens, record the current (i.e., first) position and … Continue reading

Elsewhere , , , , Leave a comment

Expanding Grid Item Animation

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 … Continue reading

Elsewhere , Leave a comment

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