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. Check out this Pen! Note that the event handler is not debounced as we need …
Tag Archives: animation
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 effect better. Great explanatory post on how to actually make this kind of stuff. Touches …
John Lewis ‘The Bear & The Hare’
High Performance Animations
Modern browsers can animate four things really cheaply: position, scale, rotation and opacity. If you animate anything else, it’s at your own risk, and the chances are you’re not going to hit a silky smooth 60fps. True story. A recent animation-heavy prototype I once made was, at first, quickly thrown together by animating top/left, scrollTop …
CSS Animations: Using animation-fill-mode
Animation-fill-mode defines how styles are applied to the target of your CSS animations outside of the animation itself. By default your CSS animations won’t affect the element you’re animating until the first keyframe is “played”, then stops affecting it once the last keyframe has completed. This can leave you with some awkward jumps and cuts. …
Continue reading “CSS Animations: Using animation-fill-mode”
The Scarecrow
Wonderful animation to promote the game “The Scarecrow”. In a dystopian fantasy world, all food production is controlled by fictional industrial giant Crow Foods. Scarecrows have been displaced from their traditional role of protecting food, and are now servants to the crows and their evil plans to dominate the food system. Dreaming of something better, …
Jake Archibald – Rendering without lumpy bits
Right, we’ve got a new project, we have to calculate and draw 500,000 pixels, and the deadline is in 16.67 milliseconds. When we’re done, we’ll do it again, and again. Web performance has always been about delivering those pixels on time, but the target has shifted. Optimising pure JavaScript (loops, string concatination, arithmetic) is more …
Continue reading “Jake Archibald – Rendering without lumpy bits”