Tag Archives: animation

Space.js – HTML-driven narrative 3D-scrolling

For our messages to communicate across efficiently, we need to create a powerful connection between the user and our medium. Today we are going to explore a new way of presenting stories on the web. And for this I’ve created … Continue reading

Elsewhere , , , , , Leave a comment

Polylion: SVG polygon animation

Using a tad of JavaScript it iterates all <polygon> elements of the SVG and animates them using TimelineMax. It’s also possible without TimelineMax, by using a CSS animation, and by changing animation-delay per <polygon>. // SCSS @keyframes polyonlion-animation { to … Continue reading

Elsewhere , , , Leave a comment

ScrollMe – A jQuery plugin for adding simple scrolling effects to web pages

<div class="scrollme"> <div class="animateme" data-when="enter" data-from="0.5" data-to="0" data-opacity="0" data-translatex="-200" data-rotatez="90" > Yup, that’s all. </div> </div> ScrollMe is a jQuery plugin for adding simple scrolling effects to web pages. As you scroll down the page ScrollMe can scale, rotate, translate … Continue reading

Elsewhere , , , , , , Leave a comment

scrollReveal.js – Easily reveal elements as they enter the viewport

<div data-sr="enter left please, and hustle 20px"> Foo </div> <div data-sr="wait 2.5s and then ease-in-out 100px"> Bar </div> <div data-sr="enter bottom and scale up 20% over 2s"> Baz </div> <script src=’/js/scrollReveal.min.js’></script> <script> window.sr = new scrollReveal(); </script> Just add data-sr … Continue reading

Elsewhere , , , , , 1 Comment

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