- Project: SVG Animation
- Website: https://www.staplewebdesign.com
- Tooling: Adobe Illustrator, SVGO
- Libraries: TweenMax by GreenSock
About Staple Web Design
A small interactive design studio in Buffalo, New York building websites that bridge the gap between form and function and focus on both aesthetics and usability for clients of all sizes.
Staple Web Design required an animation to compliment their home page call to action. The request was to use the provided vector artwork and create the appearance of speed as the proto car zooms into view once the CTA text and button completed a fade-in sequence.
To fully understand the essence of speed, thorough research and time was invested. Through the power of YouTube, multiple videos of proto cars were rigorously examined; specifically how motion arises to spectators. Most spectators rarely notice the wheels spinning including elements on the tires die wall that lend the impression of remaining in place as the tire revolves.
The challenge first and foremost was to create an appearance of the wheels spinning without revolving the wheels themselves. Based on research conducted via the YouTube videos mentioned prior, it was decided to pulsate the wheel logo, flash the inner rim gradient and slightly move the wheels up and down to mimic them riding over small bumps in the race track. Next steps were to slightly move up and down (rumble) the vehicle including the shadow. Flickering highlights on the fenders and windshield were the final touches to give the sense of motion and speed.
As with all projects that present a challenge in initial stages, the final result was exactly what was desired; faking motion and creating the appearance of speed.