Storyline Generators

Elevate your courses instantly

Storyline Generators are custom-built tools designed to simplify and enhance the process of adding advanced interactions to Articulate Storyline projects. These generators produce ready to use JavaScript tailored for effects like tilting, animation, and dynamic behavior, no coding experience needed.

They are built to help instructional designers save time, boost creativity, and bring professional polish to their eLearning courses.

Test your code before ever opening Storyline!

Welcome to The Code Coast, your JavaScript playground.

Rotate on Click

The Rotate on Click Generator creates custom JavaScript code that applies a GSAP-powered rotation effect to objects in Articulate Storyline when clicked. Users can control the rotation axis (X, Y, or Z), direction (clockwise/counterclockwise via degree input), and animation speed, all by referencing object IDs via the accessibility alt-text field.

Rotate on Click Generator for Storyline

Object IDs (comma-separated, from Accessibility - alternative text):

Rotation Axis: ZXY Degrees per Click (positive = clockwise, negative = counterclockwise):

Duration (seconds): Generate Code

Copy this JavaScript:

Tilt

This Tilt Effect Generator for Articulate Storyline allows you to quickly create dynamic hover animations using VanillaTilt.js with no coding required.

Simply enter your object ID and settings, and the tool generates Storyline ready JavaScript that brings grouped elements to life with smooth, responsive tilt effects. It’s perfect for adding interactive polish to buttons, images, and icons in your eLearning projects.​

Steps:

  1. Add an Object ID (accessibility tag) to the object you want tilted
  2. Add a shape behind the object.
  3. Group the two objects.
  4. "Hide" the 2nd object by changing transparency or unchecking visibility
  5. Copy the Object ID into the generator below
  6. Copy the code and paste it into a trigger in Storyline

Tilt Effect Generator for Storyline

Object IDs (comma-separated, from Accessibility - alternative text):

Max Tilt (degrees):

Speed (ms): Generate Code

Copy this JavaScript:

🛈 Note: This code assumes the object is grouped with a shape in Storyline to preserve layout during tilt effects.