Tag Archives: animation

Animating SVG With Clipping Masks and CSS

Unfortunately, we can’t animate SVG fills the same way [we do with paths] with only CSS. However I’ve thought of way of giving the impression they’re being ‘painted’ by animating SVG clipping masks. Animating SVG With Clipping Masks and CSS … Continue reading

Elsewhere , , , Leave a comment

Stripe Checkout

Excellent combination of JavaScript and CSS Animations. The Web Animations API sure would make the development of things like this easier. Stripe Checkout → Related: Web Animations Polyfill →

Elsewhere , , Leave a comment

Cinematics

Cinematics is a timeline of classic films and characters. Next to a great visual style, it’s the audio that makes this animation great. It keeps on amazing me what the hearing of a sound (or the smell of a scent) … Continue reading

Elsewhere , , Leave a comment

The Letter-Heads

Brilliant use of CSS text-shadow and CSS Transforms & Animations. The Letter-Heads →

Elsewhere , , , Leave a comment

JavaScript Bouncing Ball

One of the assignments of one of the courses I teach requires my students to let a cube fall in a Three.js environment. To teach them about how something falls I used Choc to visualize and explain the process of … Continue reading

Elsewhere , , Leave a comment

CSS Animated Content Switching

A trend I’m seeing for the coming year is the rise of Transitional Interfaces on the web. A fine example is the aforementioned Fluidbox, or this interface (extract from the post linked): Sparked by the post linked — which you … Continue reading

Elsewhere , , , , Leave a comment

Skrollr – CSS animations linked to scroll position

Having seen a few single-page year in review minisites the past few weeks, it’s clear that Skrollr has become the de facto standard to implement parallax scrolling effects into your websites. The idea behind Skrollr is straightforward: link a target … Continue reading

Elsewhere , , , , 1 Comment

Scroll Animations

A little Pen I knocked together to demonstrate “CSS Animations triggered on scroll” to some of my students. The key part is the animated class which actually starts the animation: it is only added once the element is in view. … Continue reading

Elsewhere , , , 2 Comments

CSS Mac Plus

Check out this Pen! In this project I will build a 3D model of the Macintosh Plus and display it in a three dimensional setting. Using CSS Keyframe animation we’ll make it move on screen to show off the 3D … Continue reading

Elsewhere , , Leave a comment

John Lewis ‘The Bear & The Hare’

Nice! Be sure to watch the making of: (via teusje)

Elsewhere , , Leave a comment