Onboarding Animation with KeyshapeJS

Onboarding means giving an introduction about products or services to new users. It is often presented as a series of steps, which the users go through. Animations can make onboarding more playful and fun.

Below is an imaginary onboarding example made in Keyshape. It is made of four steps. Animations are used between the steps to make it more engaging. Press the “Next” button to see how it works!

Creating the Animation in Keyshape

You can find the Keyshape file for the animation at the bottom of this page so you can open in it Keyshape and see how it has been made. The animation has only one timeline. It has been split into four steps and the animation progresses from one step to the next one when the "Next" button is pressed. The steps are:

  • The first step at 0s
  • The second step at 1s
  • The third step at 2s
  • The last step at 4.5s

The animation was then exported as an SVG with KeyshapeJS animation.

HTML Code

The HTML code for this is simple. The <object> element displays the SVG animation. It has "global=paused" parameter so that the animation doesn't start playing immediately. There are two HTML buttons under the object element. The elements have ids so that JavaScript can access them.

<object id="candy-svg" data="onboarding.svg?global=paused" type="image/svg+xml"></object>
<p>
<button id="go-to-start">Go to Start</button>
<button id="next">Next</button>
</p>

HTML

The Next Button

The “Next” button changes the animation play range to play from the current step to the next step.

Steps are defined in an array so that adjusting them is easy. Each number in the array represents a time value for a step. The times are given in milliseconds.

var stepTimes = [ 0, 1000, 2000, 4500 ];

HTML

Below is the code which changes the play range. It compares the current animation time to the times in the array. When it finds a time, which comes after the current time, it changes the play range to it.

Playing and pausing animations can happen at a global or timeline level. The top level object controls how a global timeline progresses. The “global=paused” parameter in the object URL sets the global timeline to paused after the animation has been loaded. The timeline level pauses and plays only one timeline. If the global timeline is paused, then nothing happens even if a timeline is set to play.

The code below calls globalPlay() for the top level ks object to make it play the first time after the animation has been loaded.

There is also a call to play() for the timeline. The timeline will then play until it reaches the play range end time.

document.getElementById("next").addEventListener("click", function() {
var el = document.getElementById("candy-svg");
if (el.contentDocument && el.contentDocument.defaultView.KeyshapeJS) {
var ks = el.contentDocument.defaultView.KeyshapeJS;
var timeline = ks.timelines()[0];
for (var i = 0; i < stepTimes.length; i++) {
var stepTime = stepTimes[i];
if (timeline.time() < stepTime) {
timeline.range(stepTimes[i-1], stepTime);
ks.globalPlay();
timeline.play();
return;
}
}
}
}, false);

HTML

The Go to Start Button

In addition to the “Next” button, there is the “Go to Start” button. Onboarding doesn’t necessarily need it, but it was added so that it is possible to try the example multiple times.

The button just pauses the timeline and sets its time to zero.

document.getElementById("go-to-start").addEventListener("click", function() {
var el = document.getElementById("candy-svg");
if (el.contentDocument && el.contentDocument.defaultView.KeyshapeJS) {
var timeline = el.contentDocument.defaultView.KeyshapeJS.timelines()[0];
timeline.pause(0);
}
}, false);

HTML

Additional Steps

It would be easy to add more steps by adding them to the animation in Keyshape and by including them in the stepTimes array.

There are also other ways to improve the example. For example, the label of the “Next” button could be changed to “Finished” when the animation reaches the end.

Keyshape Files

Document History

- Document created.