Archive for the ‘animation’ Category

The Red Reveal: Illusions on the Web

Posted on: No Comments
In part one of a series of posts about optical illusions on the web, Dan Wilson looks at how to create the “Red Reveal” that he happens to describe like this: Growing up, my family played a lot of board games. Several games such as Outburst, Passw...

Scrolling Letters Animation

Posted on: No Comments
Recently we’ve stumbled upon a really nice effect on Akademi’s website: the main title of the page moves along as one scrolls down and changes depending on the section that is currently in the viewport. We thought this would be an awesome e...

Scrolling Letters Animation

Posted on: No Comments
Recently we’ve stumbled upon a really nice effect on Akademi’s website: the main title of the page moves along as one scrolls down and changes depending on the section that is currently in the viewport. We thought this would be an awesome e...

Web Animation Workshops Dates for 2018 Announced

Posted on: No Comments
"I'm getting a raise!" This was my favorite quote from last year's Web Animation Workshops, as Val and I covered performance, tooling, and creating animations for SVG, CSS, JS and React. Now we're gearing up for another round of Web Animation Workshop...

Slice Revealer

Today we’d like to share a simple reveal animation with you that is mainly inspired by Zhenya Rynzhuk’s transition experiments and Gil Huybrecht’s “Boardathon” Dribbble shot. The idea is to cover and uncover an image wit...

Outdoors Template

Today we’re very excited to share an experimental implementation of one of Gil Huybrecht’s designs with you. Gil creates fantastic signature designs with amazing animations and he kindly permitted us code up one of his works. The desig...

Gradient Topography Animation

Today we’d like to share a shape layer animation with you. The inspiration for this effect comes from the fantastic work by Diana Hlevnjak (Polar Vector) “Gradient Topography”. We use anime.js for the animations and Charming for the l...

Decorative Letter Animations

Today we’d like to share some fun letter animations with you. The idea is based on Animography’s Dribbble shot “Us By Night” where various little shapes animate with some letters. We wanted to explore some similar animations usi...

Additive Animation with the Web Animations API

Posted on: No Comments
These features have not landed in any stable browsers at the time of writing. However, everything discussed is already in Firefox Nightly by default and key parts are in Chrome Canary (with the Experimental Web Platform Features flag enabled), so I rec...

CSS Glitch Effect

Posted on: No Comments
Today we’d like to show you how to create a little experimental glitch-like effect on an image. The effect will be powered by CSS animations and the clip-path property. The technique involves using several layers of images where each one will hav...