19 Dec 2014
How to create an animated pickup in CSS and HTML
What is it?
I am going to rebuild the car/pickup in HTML, SVG and CSS. I was going to build it all in CSS but as it is a complicated shape SVG is probably better. Here’s my version:
Let’s break it down.
I started building the car using just HTML and CSS so theses are circles built using border-radius. I used the :before and :after pseudo-elements too for the inner circles. You may be asking “Why did you not use a border on the inner circle?” - if I used border I would not be able to use percentage widths. Then I added an infinite spin animation which works well because of the slightly inconsistent size;
I started building the body with HTML elements and CSS but felt I was using the wrong tool for the job. I decided to use SVG instead. There are actually two images to be exact and I overlay one on the other with a slight rotation and vertical transition to give it a bit of character.
This uses the same effect as the Facebook content placeholder. It has the bobble animation as it’s placed inside the
.body of the truck. The first image is to show the gradient and the shape which is achieved using transforms and a linear gradient. The second one has an animation applied.
The Speed Things
These are simple shrinking and growing divs.
A Shadow to top it all off
This makes the bobbing effect seem more realistic and shows a platform for the wheels to sit on. We want it to stay still at the front so we change the transform origin to the front. Once that’s done we scale it ever so slightly with timing to match the body.
All Together Again
Why would I ever use this?
Using CSS animations rather than sprite sheets will give you:
- A crisp look on all screen resolutions
- Seamless tweening between states.
- Flexibility to reuse work (It’s much easier to change code then recreate images)
I have altered the original quite a bit and the key with these animations was subtlety. Each part adds up to a make it look like it is traveling forward even without the background animations. Going back to Tim’s one word idea, for animations it would be to “subtlety” or “reactive”. Animations should not surprise the user, they should feel natural and help convey a real world metaphor. If an animation is off continued use will annoy the user not improve their experience. Hope you enjoyed this deconstruction, comment below if you have any questions.