My favorite toy as a child was the Fisher-Price motorcycle model number 356. I was obsessed with pushing it all around the house. Over curves of furniture and folds in blankets. I’ve had it sitting on the window sill above my computer for years so when I decided to create an animation demo it was the perfect subject matter. My self-assigned task was to create a vector illustration that’s broken into elements to be displayed on a responsive web page as SVGs and animated with CSS using jQuery.
When working in Adobe Illustrator I always keep my layers named and organized which worked well as a guide for the z-index order I would need for the demo.
Exporting each layer as individual SVG files took some time. I had to manually copy and paste them into a new document. Then crop them to size because the bounding box dimensions matter when working with SVGs.
The plan was to have the motorcycle start in pieces, and create buttons and functions to build the motorcycle, start the engine and then twist the throttle to animate the wheels.
The logic being that you can’t start the engine until the bike is built and you can’t twist the throttle until the engine is started. And if you “Unbuild” the bike and the engine is started or the throttle is twisted then the engine stops and the throttle is unthrottled. So the button colors and states change to reflect the motorcycle state.
When the “Build Motorcycle” button is pressed, the motorcycle gets the is-built class and then the “Build Motorcycle” button background color changes to green and the label changes to “Unbuild Motorcycle”. And the “Start Engine” button becomes enabled and the background color changes to yellow. Then when the “Start Engine” button is pressed, the motorcycle gets the is-started class and the “Start Engine” button background color changes to green and the label changes to “Stop Engine”. And that pattern continues with the “Twist Throttle” button using the is-throttled class.
$(document).on('click','[data-behavior="build-motorcycle"]:not(.is-active)', function(){
$(this).addClass('is-active');
$(this).find('[data-object="label"]').html('Unbuild <span class="h-mobile">Motorcycle</span>');
$target.addClass('is-built');
$('[data-object="start-button"]').prop("disabled", false);
});
$(document).on('click','[data-behavior="build-motorcycle"].is-active', function(){
$(this).removeClass('is-active');
$(this).find('[data-object="label"]').html('Build <span class="h-mobile">Motorcycle</span>');
$target.removeClass('is-built is-started is-throttled');
$('[data-object="start-button"]').removeClass('is-active').prop("disabled", true);
$('[data-object="start-button"]').find('[data-object="label"]').html('Start <span class="h-mobile">Engine</span>');
$('[data-object="twist-button"]').removeClass('is-active').prop("disabled", true);
$('[data-object="twist-button"]').find('[data-object="label"]').html('Twist Throttle');
});
And as with every project, scope creep showed up and I decided to add a parts list to the experiment. As you hover over the parts in the list, the corresponding part on the bike is highlighted.
The Result
See the Pen SVG Motorcycle Animation Experiment by Martin Hofmann (@Martskin) on CodePen.0
My Fisher-Price 356 has since been passed on to my son. Now I enjoy watching all the places he finds to roll it around. 😀
