Talk by Alex Holachek, as brought forward at React Conf 2019: As the technology to create Progressive Web Apps continues to mature, React developers have the opportunity to write web apps that in some cases can rival native ones in terms of speed and convenience. However, one barrier to feature parity is the difficulty of […]
Tag Archives: animation
SVG Line Animation with Vivus.js
Vivus is a lightweight JavaScript class (with no dependencies) that allows you to animate SVGs, giving them the appearence of being drawn. There are a variety of different animations available, as well as the option to create a custom script to draw your SVG in whatever way you like. Think SVG line animations, but then […]
The Real Fake Cameras Of Toy Story 4
The Nerdwriter on what makes Toy Story 4 feel so authentic.
Animated CSS border-image (using an SVG)
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 😉)
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 →