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 moving (viz. the roller-coaster its nose points towards the direction it is going, even inside …
Tag Archives: animation
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, transforms, loops, easings, sequences, and scrolling. Velocity is the best of jQuery, jQuery UI, and …
Continue reading “Velocity.js – Accelerated JavaScript animation”
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 interactions. It’s a mature and well-tested framework that drives all the animations and transitions in …
Continue reading “Pop – Extensible iOS and OS X animation library”
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 → Animating SVG With Clipping Masks and CSS (Demos) → Looking for a way to …
Continue reading “Animating SVG With Clipping Masks and CSS”
Stripe Checkout
Cinematics
The Letter-Heads
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 falling per tick of the animation. The final code is available on CodePen. JavaScript Bouncing …
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 should read — I started goofing around with CSS transforms and transitions a bit. The …
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 CSS property+value to a given scroll position, via data-* attributes: <div id="example" data-0="width:100%;" data-1500="width:0%;"></div> Skrollr …
Continue reading “Skrollr – CSS animations linked to scroll position”