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

How to Draw and Animate an SVG Wave Using Javascript

Playing and Pausing a Video on Hover

Related posts

Ask a Project Manager #7: How Do I Land My First Digital Project Management Role?

Why Learning React is a Really Great Idea

How Do You Grow a Creative Business?

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