Building a better burger with HTML and CSS
Razorfish London and Cartelle Interactive deployed sophisticated libraries to create amazing animations for McDonald's.
McDonald's has certainly not been afraid to push the envelope on the web. A case in point is its contest site, My Burger, developed by digital agency Cartelle Interactive in collaboration with Razorfish London.
The 'burger builder' tool lets users build their perfect burger – with the winner's creation finding its way onto the menu.
Johnny Slack, partner and development lead at Cartelle, said it was a challenge to condense the features down to a fun and simple form. He recalls, "The playstation interface was used as a reference quite a bit in the earlier stages of the UI – how it snaps and moves."
The site's animation is particularly impressive. For this, Cartelle used libraries by Greensock, including TweenMax, Draggable and ThrowPropsPlugin – its weapons of choice for Tweening and momentum-based animation.
"We're very focused on craft," says Slack, "and we try to remove as much static as we can from the equation until we're down to what's essential for making a mint interactive product."
Words: Geri Coady
Geri Coady is a colour-obsessed freelance illustrator and web designer, author of A Pocket Guide to Colour Accessibility and net's Designer of the Year 2014. Follow her on Twitter at @hellogeri.
Liked this? Read this!
- Great examples of doodle art
- Brilliant Wordpress tutorial selection
- Free tattoo fonts for designers
Thank you for reading 5 articles this month* Join now for unlimited access
Enjoy your first month for just £1 / $1 / €1
*Read 5 free articles per month without a subscription
Join now for unlimited access
Try first month for just £1 / $1 / €1
Get the Creative Bloq Newsletter
Daily design news, reviews, how-tos and more, as picked by the editors.
The Creative Bloq team is made up of a group of design fans, and has changed and evolved since Creative Bloq began back in 2012. The current website team consists of eight full-time members of staff: Editor Georgia Coggan, Deputy Editor Rosie Hilder, Ecommerce Editor Beren Neale, Senior News Editor Daniel Piper, Editor, Digital Art and 3D Ian Dean, Tech Reviews Editor Erlingur Einarsson and Ecommerce Writer Beth Nicholls and Staff Writer Natalie Fear, as well as a roster of freelancers from around the world. The 3D World and ImagineFX magazine teams also pitch in, ensuring that content from 3D World and ImagineFX is represented on Creative Bloq.