In a new(ish) web-project I’m working on, I went all-in on CSS Grid. The website contains a page where one can filter the list of elements shown. To animate this filtering I used animate-css-grid, as other libraries typically used for this β e.g. Isotope β don’t play nice with CSS Grid. Installation per NPM/Yarn: yarn […]
Tag Archives: animation
Animate CSS Grid Layouts with
React Native Parallax Scroll Header with Tabs
Nice writeup on how to create a typical screen where there’s a header image that fades out and disappears as you start scrolling. Essentially, everything but the header is put into a scrollview. In order to keep elements βfixedβ (i.e. the tab bar), I use the transform property with a translateY that is set to […]
Particle Effects for Buttons
Using anime.js Luis Manuel has created some nice Particle Effects for buttons. Well done animations can put a nice touch onto a UI π Particle Effects for Buttons →
What the React Native docs forgot to tell you about animations
Good article by Karen de Graaf to use along with the React Native docs on Animations Unfortunately React Nativeβs documentation about animations is not so great. Some things are explained rather vaguely and other things are plain missing. Thatβs why I wanted to give you a quick overview of the things I think need a […]
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 or .ended to know if the animation just started or ended. /* when the library […]
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 you don’t have After Effects? And is AE really the tool to do this job? […]
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 dimensions of the element that will transition. You can use element.getBoundingClientRect() for this, as will […]
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 quite a few mobile apps nowadays (take the App Store App on iOS11 for example). […]
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 […]