Over the past year I’ve learnt so much more about CSS. I’ve had the huge priviledge of seeing and chatting to some great speakers, and read some fantastic articles that have inspired me in my work. To celebrate the year in web design, I decided to create a Web Design Advent Calendar as a personal project.

This project has a couple of aims:

  1. To share some tips, tricks, articles and sites that I’ve found useful or inspiring over the past year, and
  2. To allow me the opportunity to explore some new (to me) techniques for myself and create something fun.

Each day over the next 24 days I’ll be posting a new advent calendar window here on Codepen, with something fun or useful hidden behind it. Open the window to discover something new!

These pens have been hacked together over a few days, using some techniques that are new to me, so I’m sure the code is far from perfect. However, I’ve found it incredibly fun to play around, and already have so many ideas for improvements. Look at the backgrounds carefully, you might find some little differences as the days progress!

For a while I’ve been wanting to explore web animation in greater depth, particularly using the Greensock Animation Platform (GSAP). I’ve been using CSS animations and transitions in my work for a little while, but haven’t really got to grips with JS animation, beyond the occasional bit of jQuery.

I first came across GSAP in a web animation run by Val Head earlier this year, and it seems to be an increasingly popular choice, especially for animating SVG.

I decided on a separate pen for each day partly because it’s easier to manage – I can prepare them in advance as ‘Private’ pens and simply make them public when I’m ready – and partly to keep the element of surprise: Although combining them into one single demo would’ve allowed me to try out some cool transition effects between the different calendar days, it would’ve meant putting all the calendar surprises in the code, so people could see what’s coming up.

This way I can work on the forthcoming days behind the scenes, and perhaps hide some extra surprises :)

The background animations in this advent calendar are regular ol’ CSS keyframe animations, while I’ve used GSAP for the foreground elements. I hope you enjoy these demos, and I’d love to hear your thoughts on better ways to do these things!

3,190 0 20