News

Unleash CSS & JS to create a Swiss Army knife animation

Justin Gauthier, UX designer at brightly explains how the Swiss Army knife on teambrightly.com was “crafted” using a combination of JavaScript and CSS

clarity

Justin Gauthier, UX designer at brightly explains how the Swiss Army knife on teambrightly.com was “crafted” using a combination of JavaScript and CSS

clarity

Exported assets

The technique starts with exporting the three, semitransparent knife blade PNG images in their final animation states. This means less code is needed to correctly place the images in the browser. The knife handle should be exported in its starting state.

Write a specific structure

Each blade is absolutely positioned relative to the handle. Since the knife as a whole rotates, we use a knife-container <div> for the whole element. CSS transformations for rotating the knife are applied here, while supporting heading elements fall outside this rotating <div>. Then wrap everything in a “Stage” <div> to provide scope to the animation and specifically style elements without affecting other site styles. Each blade needs a unique class name since there are multiple positions, with each blade moving independently:

001 HTML:    
002 <div id="Stage">    
003 <h1><span>we're</span> Crafters     <span>of</span> Clarity</h1>
004 <div class="animation-container">
005 <div class="knife-container">    006 <img src="img/swiss-army-knife.png" alt="We're Crafters of Clarity" class="knife">    
007 <img src="img/pen-blade.png" alt="Content Strategy" class="pen">
008 <img src="img/glass-blade.png" alt="Research" class="glass">    
009 <img src="img/arrow-blade.png" alt="UX Strategy" class="arrow">
010 </div>        
011 <h2>We have the tools to solve any problem</h2>    
012 </div>
013 </div>    

Position the elements

Next we add CSS transformations to position the knife handle in its final state. Once the handle is in its final state, you can position the blades where they need to be by using -transform rotate and -transform-origin. After this is applied, you can see if your HTML structure is working by seeing whether the blades are rotating with the knife handle. Then apply absolute positioning to the blades and place them in their desired position.

001 CSS:                 
002 .knife-container {
003 position: relative;
004 z-index: 2;            
005 width: 100%;
006 height: 190px;          
007 /* Vendor prefixes here */
008 transform-origin: 71% -2%;     
009 /* Vendor prefixes here */
010 transform: rotate(-30deg);
011 }            
012 .knife-container img {
013 position: absolute;     
014 top: 0;             
015 left: 0;
016 z-index: 1;    
017 }             
018 .knife-container .knife { z-index: 2; }        

Define the starting point

For animation start points we add closed CSS classes for each blade. Next, move the rotate transform from .knife-container into a separate .knife-rotate class. These classes will be used in the JavaScript function to launch and restart the animation. Use the same CSS -transform rotate and -transform-origin to place the knife blades into closed states, and -transform scale to reduce the size and hide the blades behind the handle.

001 CSS:    
002 .knife-container .glass {    
003 top: -279px;
004 left: -114px;    
005 /* Vendor prefixes here */
006 transform-origin: 100% 100%;    007 }    
008 .knife-container .glass-closed {
009 /* Vendor prefixes here */
010 transform: rotate(123deg) scale(0.72);    
011 }    
012 .knife-rotate { 
013 /* Vendor prefixes here */    
014 transform: rotate(-30deg);
015 }

Apply CSS transitions

After defining the start and end points of the animation, add the transition effects to the blades and the knife-container <div> to smoothly animate from beginning to end. Since the blades flip out sequentially, apply a CSS -transition-delay in addition to the CSS -transition to create the effect:

001 CSS:     
002 .knife-container .arrow, .knife-container .glass, .knife-container .pen {             
003 /* Vendor prefixes here */
004 transition: 0.55s ease-in;
005 }         
006 .knife-container .glass {    
007 top: -279px;
008 left: -114px;
009 /* Vendor prefixes here */    
010 transform-origin: 100% 100%;
011 /* Vendor prefixes here */
012 transition-delay: 0.2s;     
013 }

Set the stage

Once the transition effects are added to the knife handle and all of its blades, add the closed CSS class to the blades in the HTML. This class is necessary because on page load, the knife should be closed:

001 <img src="img/pen-blade.png" alt="Content Strategy" class="pen pen-closed">     
002 <img src="img/glass-blade.png" alt="Research" class="glass glass-closed">
003 <img src="img/arrow-blade.png" alt="UX Strategy" class="arrow arrow-closed">

Switch the classes

Once the stage is set, write a JavaScript function to be called on page load. The function simply removes the closed class on all of the blades and this then adds the knife-rotate class to the knife container, which rotates the knife:

001 JAVASCRIPT:    
002 function openKnife() {
003 $(".knife-container").addClass("knife-rotate");
004 $(".animation-container h2").addClass("hide-caption");
005 $(".pen").removeClass("pen-        closed");    
006 $(".glass").removeClass("glass-    closed");        
007 $(".arrow").removeClass("arrow-closed");
008 }
×