From our sponsor: Chromatic - Visual testing for Storybook, Playwright & Cypress. Catch UI bugs before your users do.
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.
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.
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!
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
Good design.
Thank you=). Happy New Year!
MERRY CHRISTMAS!!
Great Design!
Merry Christmas Lou, thanks for all these ideas!
Greetings to all the team!!
MERRY CHRISTMAS!!
Lovely design on a fresh day !
Merry Christmas Lou.
I’m a big follower of your works.
They are awesome as usual.
Just awesome, thanks for sharing!
Can you please tell me if I can use this demo on site of game development studio as a special NY page? I mean not technically but legal issues.
Beautiful.
You can add a site joomla 3>? Where can I find documentation for how to proceed?
Thank you
Merry Christmas Lou,
Awesome Design 😀
I hate your avatar
Merry Christmas
Njoy 🙂
Awesome … thanks for your help and creative work
Another great and creative demo, ML. I thank you for all for the wonderful inspirations and wish you a very happy holidays.
Merry Christmas!!
Thank you for the inspiration throughout the year – it is much appreciated.
Hope you all have a good day.
Super! Happy New Year!
Merry Christmas!! Codrops rules!
Merry X-mas to you Mary
Great Design! Merry Christmas to you all!
Nice Design as well as nice concept and animations. Wondering how you do that 😛
Cute, and clever!
Merry Christmas to you too, and Happy New Year to all your team!
And thanks again and again for the amazing material you upload weeks after weeks.
Mary Christmas!!!!
thank you for all the inspiration and help in this year, im really grateful for everything that you give us !!!
Awsome 🙂 thanks for sharing and really nice design
Awesome!!! Merry Christmas!!
Spectacular demo! You guys have been amazing and inspiring us all year long. Merry (belated) Christmas and Happy New Year!
Like it
Thanks Mary and Codrops team for this great piece of code.
Have a look at our implementation here: http://www.iamabiker.com (will pulldown by 10th jan though).
Have a great year all.
Awsome 🙂
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
WOW too good. Is there more christmas examples like this one?
I liked this demo very much….. can we customize the alphabet “MERRY CHRISTMAS” to our own words?