Archive for the ‘animation’ Category

Animated SVG Frame Slideshow

Posted on: No Comments
Today we’d like to share an experimental slideshow with you. The idea is to animate an SVG frame while we transition from one slide to another. Using different shapes we can create a variety of frame styles when morphing the SVG path. The inspira...

Robust React User Interfaces with Finite State Machines

Posted on: No Comments
User interfaces can be expressed by two things: The state of the UI Actions that can change that state From credit card payment devices and gas pump screens to the software that your company creates, user interfaces react to the actions of the user a...

Expanding Grid Item Animation

Today we’d like to share a simple implementation of a grid animation with you that is based on the Dribbble shot Surf Project by Filip Slováček. When a grid item is clicked, the background and the thumbnail are scaled up and moved to th...

Kylo Ren CSS Page Preloader

Posted on: No Comments
Today we want to share something a little bit different with you: an image-less animated Star Wars tribute to Kylo Ren made with HTML & CSS only. This demo is kindly sponsored by PageCloud, the website builder you’ll love to use. If you wou...

Emulating CSS Timing Functions with JavaScript

Posted on: No Comments
CSS animations and transitions are great! However, while recently toying with an idea, I got really frustrated with the fact that gradients are only animatable in Edge (and IE 10+). Yes, we can do all sorts of tricks with background-position, backgroun...

Creating Vue.js Transitions & Animations

Posted on: No Comments
My last two projects hurled me into the JAMstack. SPAs, headless content management, static generation... you name it. More importantly, they gave me the opportunity to learn Vue.js. More than "Build a To-Do App" Vue.js, I got to ship real-life, produc...

Writing Smarter Animation Code

Posted on: No Comments
If you've ever coded an animation that's longer than 10 seconds with dozens or even hundreds of choreographed elements, you know how challenging it can be to avoid the dreaded "wall of code". Worse yet, editing an animation that was built by someone el...

Fancy Web Animations Made Easy with GreenSock Plugins

Posted on: No Comments
The aim of the third part of this GreenSock tutorial series is to introduce you to some amazing GreenSock plugins. You'll be using: The BezierPlugin to animate properties along a curved Bezier path The GSAP Draggable utility to drag elements on the s...

Morphing Page Transition

Today we’d like to share a simple morphing page transition effect with you. The idea is to morph an SVG path while moving an intro page up, creating an interesting, flowy look. For the animations we use anime.js and for some letter effects we use...