Animated Icons
The goal of using animation in icons include:
1.Use confirmation pop-up to Emphasis and delight;
2.Change states;
3.Reflect a branding style.
The motion should not exceed the canvas size of the icon (keep it within 24*24 px or 48*48 px).
Confirmation
Here are the basic rules we follow for confirmation icons:
1. Duration: no longer than 1000ms.
2. When possible, use bouncing style to add the character to Sotheby's motion.
Bid / Gavel
Partnership
Award
Alert
Shopping Bag
Add to Calendar
Spin / Refresh
Done / Successful
Exclamation
Change States
Icons animate to indicate they have changed state by being hovered, selected/clicked.
Hamburger Menu - Clicked
Mute - Clicked
Star - Clicked
Bookmark - Clicked
Like - Clicked
Chevron - Clicked
Catalogue - Hovered
Print - Hovered
Branding Style
Animations can reflect a brand’s style through:
1. Icon animations (as above).
2. Loading animation.
3. Logo animation.