SAMEH.
ANIMATION BUILDER / FREE DEVELOPER TOOLS

Make your objects move.

Preview 95 animation effects and generate ready-to-use JavaScript for Articulate Storyline 360.

For Articulate Storyline 360

Live preview

Ready
PREVIEW STAGE
Your animation, in motion.
Fade In0.8s · Ease out

Loop controls this sample preview only. Repeat controls the generated Storyline code; your object stays in your project.

Your animation code

JavaScript
A little code. A lot of motion.

Add your Object ID to generate ready-to-paste JavaScript.

Your code updates as you fine-tune.

Stop code

JavaScript

Put it on the button or trigger that should stop the animation.

Stop it whenever you want.

Add your Object IDs to generate the stop code.

FROM PREVIEW TO PROJECT

Bring it into Storyline.

  1. Copy your object’s ID

    In Storyline 360, right-click the object and use the copy icon, or find it in the JavaScript editor’s Object reference menu. Paste only the ID here, then click Add ID or press Enter. Use Clear ID to remove it without changing your animation.

  2. Choose your motion

    Select an animation and adjust its settings. The preview uses a sample object; it does not connect to your project.

  3. Copy and add a trigger

    Copy the generated code. In Storyline, create an Execute JavaScript trigger and paste it into the editor.

  4. Choose when it plays

    Run the trigger on a click or when the timeline starts. Add several Object IDs to move them together with one trigger. Publish your course to Web or your LMS and test the result.

  5. Stop it when you need to

    Copy the stop code into the trigger that should end the animation: stop and reset, finish the current cycle, or freeze in place. The animation also cleans itself up when its layer closes or the slide changes.

Use the current Storyline 360 release. Avoid overlapping built-in animations on the same object. Re-running this code restarts this studio’s animation for that object. An infinite loop continues until canceled or the slide is unloaded. An exit effect only hides the object visually; if it is clickable, also hide it with a Storyline trigger.

Uses Storyline’s Advanced JavaScript API. Read the official guide ↗

Movement is relative to the object’s position. These trigger-based effects are not linked to the Storyline timeline scrubber. Final appearance depends on the object and slide.
COPY YOUR CODE

Your code is selected.

This browser blocked automatic copying. Press Ctrl+C on Windows or ⌘C on Mac, then paste into Storyline.