-
Recent Posts
Archives
Categories
Meta
Tag Archives: animation
Dribble Inspired Todo Empty State Transition implemented in React Native
Ooh this is nice. Uses a simple Animated.Value which is animated from 0 to 1. Said value is only defined once – in a wrapping component – and is passed on to the various children as a prop. react-native-todo-empty-state-transition →
Delighters.JS – Add CSS animations to delight users as they scroll down
Nice little library by Martin Kool / Q42. Delighters.js toggles classnames as you scroll. You do the rest! 🤓 Late 2013 I created a likewise thingy (dependent on jQuery) 🙂 The main class toggled is .delighter, with an extra .started … Continue reading
Haiku – Lottie Without After Effects
Remember Lottie? It’s a library that can play back animations in React (Native) using a JSON file. One would define the animation in After Effects, and then export it to a JSON file for Lottie to use. But what if … Continue reading
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
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
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