Direction Aware Hover Effect

A thing I commonly see nowadays are animated lines underneath menus and links:

Show Pen

One issue with that though: when hovering over an item the animation does not start from the place where you hover, but from a fixed point (here: bottom-center).

Try hovering an item from one of its edges and you’ll see: the animation is disconnected from your point of entry. This can feel weird, especially for wide items.

Thanks to CSS Custom Properties (aka CSS Variables) and a little bit of JavaScript, the animation can be enhanced. Here’s a demo by Tobias Reich:

Show Pen

Also feels really smooth when moving your cursor horizontally over the items.

Direction Aware Hover Effect Demo (CodePen) →

🤩 I really like this JS/CSS Custom Properties combo, it’s so powerful … that’s one of the reasons why I and others are really excited about CSS Custom Properties

💡 You could keep this pure CSS, but that would mean injecting lots of extra elements to detect the direction.

Animate CSS Grid Layouts with animate-css-grid

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 add animate-css-grid

Once imported use the wrapGrid function to let the library work its magic (using MutationObserver and FLIP animations)

import { wrapGrid } from animateCSSGrid

const grid = document.querySelector(".grid");
wrapGrid(grid);

animate-css-grid – Easy transitions for CSS Grid →

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 the scrollview’s current scroll position. Since animating transform properties is supported natively, all animations run at 60fps.

React Native Parallax Scroll with Tabs →

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 bit of extra explanation. There’s still more out there, but these are the things you’ll probably need most.

What the React Native docs forgot to tell you about animations →

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 loads, each [data-delighter] 
      gets the .delighter class */

   .foo.delighter {
      transition: all .3s ease-out;
      transform: translateX(-100%);
      opacity: 0;
   }

   /* the .started class is set when the top
      of [data-delighter] is at 0.75 of the viewport 
      (where 0 is top and 1 is bottom) */

   .foo.delighter.started {
      transform: none;
      opacity: 1;
   }

   /* an extra .ended state is set when the bottom 
      of [data-delighter] is at 0.75 of the viewport
      (where 0 is top and 1 is bottom) */

   .foo.delighter.started.ended {
      border: solid red 10px;
   }

Delighters.js →

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? Enter Haiku, an app that works with Sketch files to start building your animation with:

We designed Haiku from the ground up for animating UI components. Like Sketch, it is a simple tool with a specific purpose, and like AE, it is compatible with Lottie.

And if the Haiku UI reminds you of Macromedia Flash … yeah, totally 🙂

Haiku – Lottie Without After Effects →

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 be shown below.
  • Last: execute the code that causes the transition to instantaneously happen, and record the final (i.e., last) position and dimensions of the element.*
  • Invert: since the element is in the last position, we want to create the illusion that it’s in the first position, by using transform to modify its position and dimensions. This takes a little math, but it’s not too difficult.
  • Play: with the element inverted (and pretending to be in the first position), we can move it back to its last position by setting its transform to none.

Here’s a visual example, step by step:

See the Pen How the FLIP technique works by David Khourshid (@davidkpiano) on CodePen.

Using the FLIP technique you can easily create a smooth shared element transition:

flipping is a JavaScript library that helps you easily set up these FLIP animations.

import Flipping from 'flipping/adapters/web';

const flipping = new Flipping();

// First: let Flipping read all initial bounds
flipping.read();

// execute the change that causes any elements to change bounds
doSomething();

// Last, Invert, Play: the flip() method does it all
flipping.flip();

flipping (GitHub) →
Animating Layouts with the FLIP Technique →

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).

Do note that the animation itself is done using anime.js. By the looks of it, CSS Grid is only used to position the items in the list.

Expanding Grid Item Animation →