In this tutorial we look at how to build the image lazy loading effect used on the Teenage Engineering site. We'll start with a lo-res pixelated image before replacing it with the full-res version.

In this tutorial, we talk about how to make your own SVG images from scratch using HTML and CSS and then use Javascript to animate the contents of your image

How to Draw and Animate an SVG Wave Using Javascript

Code

On webpages like the Animade portfolio, they're using an effect where, instead of using an animated GIF, they're using a video that plays when your mouse goes over it, and pauses when your mouse moves away. This play and pause effect is pretty simple to add into any site.

Pixelated Image Lazy Loading Effect as Seen on Teenage Engineering

Meet SuperHi Unlimited! Our annual membership that unlocks all our courses, extra community perks, and early access.

More videos

Planning, Designing + Coding Your First iOs App with Lou

How to Make a Javascript Accordion

How to Add International Times with Timezones to Your Website

Want more? Sign up for our newsletter for more articles, resources, and fresh inspiration!