Tag Archives: animation

Shit Showreels Say

Elsewhere , Leave a comment

Faster UI Animations With Velocity.js

See the Pen A Pen by julianshapiro on CodePen. Quickstart to working with the aforemetioned Velocity.js. Faster UI Animations With Velocity.js → Sidenote: Motion Design is a required skill for designers, see Material for example.

Elsewhere , , , Leave a comment

Web Animations now in Chrome

snowFlake.animate([ {transform: 'translate(' + snowLeft + 'px, -100%)'}, {transform: 'translate(' + snowLeft + 'px, ' + window.innerHeight + 'px)'} ], { duration: 1500, iterations: 10, delay: 300 }); Glad to see this one land Web Animations – element.animate() is now … Continue reading

Elsewhere , , , Leave a comment

CSS True Titles

The opening titles to the show True Detective are incredible. CSS contains the building blocks necessary to create a similar style title sequence. I tried my hand it and came up with fun results. Neat demo. Uses CSS Masks extensively. … Continue reading

Elsewhere , , , Leave a comment

Advanced Animation Path with SVG

Neat animation of a roller-coaster following the tracks underneath. Uses an SVG as the animation path. The animated object itself is animated using tween.js. Also contains some cleverness to actually make the animated object point into the direction it is … Continue reading

Elsewhere , , , Leave a comment

Velocity.js – Accelerated JavaScript animation

Velocity is a jQuery plugin that re-implements $.animate() to produce significantly greater performance (making Velocity also faster than CSS animation libraries) while including new features to improve animation workflow. Velocity includes all of $.animate()’s features while packing in color animation, … Continue reading

Elsewhere , , 1 Comment

Pop – Extensible iOS and OS X animation library

POPSpringAnimation *anim = [POPSpringAnimation animation]; … [layer pop_addAnimation:anim forKey:@"myKey"]; Pop is an extensible animation engine for iOS and OS X. In addition to basic static animations, it supports spring and decay dynamic animations, making it useful for building realistic, physics-based … Continue reading

Elsewhere , , , , Leave a comment

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