3D Card Rotation
Storyline’s swivel animation isn’t very elegant. I used the GSAP animation library to showcase card rotation on the X and Y axes.
Fast and Smooth
The GSAP animation library uses your computer’s graphic hardware for buttery smooth animation.
More Control
As GSAP is a Javascript library, programmatic control expands what’s possible.
More Power
The GSAP animation library makes it possible to extend Storyline 360’s “out-of-the-box” abilities.
Rotating Animation in Three-Dimensional Space
Three-dimensional card rotations offer many creative possibilities and have several uses in e-learning…
- Regain focus
- Require interaction to access information
- Deliver a moment of delight
- Multi-choice quiz answers
- Gamification elements
Unfortunately, Storyline 360’s swivel functionality isn’t as elegant as it might be. However, the technology that powers Storyline’s animation is available to those who can code in Javascript.
The GSAP animation library is relatively easy to learn and very powerful. The three-dimensional rotations in this showcase only hint at the power available.
The X and Y Axis
My rotations give the illusion of revealing information on the back of the card.
In reality, I’m using GSAP functions to control the rotation of two objects. One rotates the “back” of the card from 0 to 90 degrees so you can no longer see it, and the other rotates the “front” of the card from 90 to 0 degrees.
The rotation is on either the X or Y axis, giving the illusion of a sideways or forward rotation. Click here to see it for yourself.
Note: The checkbox under the cards toggles between the two axes.
You can see rotation on the Z-axis by playing a game of Nintey-Nine and observing the dealing animation.
- Storyline 360
- The Gimp
- Envato
- Audacity
- Javascript
- The GSAP animation library
