in Playground on

Merry Christmas with a Bursting Gift Box

The Codrops team wishes everybody a Merry Christmas and a happy new year! A big "Thank You" from us in form of a little demo with a bursting animated gift box and some flying icons.
MerryChristmasCodrops_Main
View demo Download Source

From our monthly sponsor: Ship customer-facing metrics fast with Keen.io. Collect, store, query, & display stunning analytics.

The Codrops team wishes everybody a Merry Christmas and a wonderful new year! We’ve created a little demo with a little animated gift for you that will burst open and let some icons out 🙂

The idea is from the fabulous Free Icons [gif] by Gimpo Studio (Nick & Oksana), the creators of Small Icons.

The beautiful SVG Christmas Icons used in the demo are from WebAppers and they were designed by the team behind FreePic.

The background image in the demo is from DragonArtz Designs.

MerryChristmasCodrops02

A bit about the demo and how we did it: There are two main elements, the gift box and the icon grid which also contains the letter spans of the “Merry Christmas” words. The main idea is to add step classes to the wrapper “merrywrap” that control the animation for the gift box (the wobbling) and the transitions of the icon spans. Each icon is actually an SVG and we’ve used the Google Web font Peralta for the letters.

MerryChristmasCodrops03

In step 1 we animate the gift box. The, in step 2, we make the cover and the lower part of the gift box fly away and release the icons which were all translated from a grid to a single point where the box is. The icons get animated outside of the main wrapper and then in step 3, we let them fall down to their original position in the grid. The last step will make them fall, all with different transition delays.

Please note that we did not provide a fallback for this demo, so modern browsers only!

MerryChristmasCodrops04

We hope you enjoy this little demo! Merry Christmas, dear readers, and a happy new year from your Codrops team! Thank you for all your support, your feedback and your love <3

Tagged with:

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

http://www.codrops.com

AnimatedColumns_feat

Animated Image Columns

CrossroadsSlideshow_featured

Crossroads Slideshow

Objects_featured

Exploding 3D Objects with Three.js

Receive our bi-weekly Collective or official newsletter right in your inbox.

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 31

Comments are closed.

  3. Spectacular demo! You guys have been amazing and inspiring us all year long. Merry (belated) Christmas and Happy New Year!

  7. Hi Mary Lou
    Love this…just found it. 🙂 Did have 1 question…I love the snow. Is there a way to just use the falling snow on a webpage ? Thinking maybe I could add the falling snow to my home page this Christmas. 🙂

    Thanks for all these articles and tutorials. We lurkers do read and appreciate them (once we find them).
    Paul

  9. I liked this demo very much….. can we customize the alphabet “MERRY CHRISTMAS” to our own words?