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 in Chrome 36 → Related: Web Animations Preview Web Animations Polyfill
Tag Archives: animation
CSS True Titles
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 moving (viz. the roller-coaster its nose points towards the direction it is going, even inside …
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 …