Skip to content

The Animated Web

  • Posts
  • Resources
  • Collections

Inspiration - August 2020

We saw a wide variety of amazing inspiration in August. We have animations that use audio to great effect, journeys through space and time, and lots of delightful little surprises.

Let jump straight in...

Confetti Button

by Cooper Goeke

I wish all buttons were as delightful as this one, it's like a little mini party every submission!

https://codepen.io/coopergoeke/pen/wvaYMbJ

  • Buttons
  • CodePen
  • Particles
  • Canvas

Mark Appleby - Creative Developer

by Mark Appleby

Marks portfolio is full of lovely surprises and interactions.

https://mark-appleby.com/

  • Cursor
  • 3D
  • Three.js
  • WebGL
  • GSAP
  • Portfolios
  • Personal Sites
  • Typography

Spinning Hello World

by Callum Macrae

Callum set out to replicate an animation he saw in an Apple ad. I find this animation hard to stop watching, it's kind of hypnotic.

https://codepen.io/callumacrae/pen/GRodzvO

  • Spinners & Loaders
  • Canvas
  • Typography
  • Loop
  • CodePen

Making Maisel Marvelous

by Resn

This engaging journey into the making of 'The Marvelous Mrs. Maisel' has you smoothly and seamlessly fly through an impressive amount of content.

https://makingmaiselmarvelous.com/

  • 3D
  • WebGL
  • GSAP
  • Transitions
  • User Experience
  • Three.js

Voice of Racism

by Assembly

This purposely raw and up-close experience creates an effective and powerful message about the effects of continuous racism on people's daily lives.

https://voiceofracism.co.nz/

  • Wireframe
  • Audio
  • Three.js
  • 3D
  • WebGL

A Shuffle Story

by Laura Calvo and hernan torrisi

This short and wonderfully surreal animation is enhanced by some great sound design.

https://codepen.io/airnan/full/gOrwBqm

  • Lottie
  • SVG
  • CodePen
  • Audio

Impossible Checkbox v2

by Jhey

Watch the bear get increasingly annoyed in this fun merger of a checkbox and a useless machine.

https://codepen.io/jh3y/pen/LYNZwGm

  • CodePen
  • Toggles
  • Characters
  • React
  • GSAP
  • SVG

SVG Image Sequence Masks

by Tom Miller

Tom uses SVG like a sprite sheet animation to create this effective gooey transition mask.

https://codepen.io/creativeocean/pen/YzqWVKP

  • CodePen
  • Transitions
  • SVG
  • GSAP

GOOD MOOD

by Sikriti Dakua

These joyful letters, animated with GSAP and SVG, accurately recreate a piece by Mat Voyce.

https://codepen.io/dev_loop/pen/ZEWOONL

  • SVG
  • GSAP
  • Loop

Million Devs

by Sarah Drasner, Zach Leatherman and Hugues Tennier

An engaging timeline through Netlify's journey to 1 million devs. A combination of SVG, Vue, and GSAP's ScrollTrigger plugin.

Sarah also wrote this 'The Making of' article for CSS-Tricks.

https://million-devs.netlify.com/

  • SVG
  • Scroll
  • GSAP
  • Vue

This site is created and maintained by Steve Gardner. It's built with Eleventy and hosted on Netlify

  • Posts
  • Resources
  • Collections
  • Inspiration
  • The Tiny Web Animation Newsletter
  • Get in touch