Charming little demo by Louis Hoebregts: Using a Data URI he injects an SVG as the url for the border-image CSS property. That SVG itself is then animated using a self-contained tad of inline CSS. (Yes, that’s CSS-in-CSS 😉)
Tag Archives: animation
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: […]
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 […]
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 […]