In this tutorial, we will explore how to implement a Video Scroll Trigger Animation in Articulate Storyline. This innovative feature allows you to create engaging interactions where videos animate based on user scrolling, enhancing the overall learning experience.
Overview of the Project
This project is designed to provide a dynamic interaction that goes beyond traditional animations. By integrating video and scroll-triggered animations, you can present information in a visually appealing format, similar to a timeline.
Preview
Step-by-Step Implementation
Step 1: Insert Video and Accessibility Text
Insert the Video:
- Go to the Insert tab and select Video.
- Choose your video file and insert it onto the slide.Copy Accessibility Text:
- Right-click on the video and select Accessibility.
- Copy the accessibility text for later use.
Step 2: Insert a Transparent Rectangle Shape
Add Shape:
- From the Insert tab, select Shapes and choose a rectangle.
- Draw the rectangle over the video to cover it completely.
Adjust Transparency:
- Right-click on the rectangle, select Format Shape, and adjust the transparency to 100%.
Copy Accessibility Text:
- Right-click on the transparent rectangle and copy its accessibility text.
Step 3: Create a Trigger to Pause Video
Set Up Trigger:
- Go to the Triggers panel.
- Create a new trigger to pause the video when the slide timeline reaches 0.1 seconds.
- Choose the action as “Pause media” and select your video.
Step 4: Add JavaScript Trigger
Create JavaScript Trigger:
- In the Triggers panel, create a new trigger.
- Select “Execute JavaScript” as the action.
Paste JavaScript Code:
- Enter the following code:
Step 5: Update Parameters with Accessibility Text
After adding your JavaScript trigger, ensure you update the parameters in your code with your slide object’s accessibility text:
Replace "YourRectangleAccessibilityText" with the actual accessibility text copied from your transparent rectangle, and "YourVideoAccessibilityText" with that of your video.
JavaScript Customization
| Setting | Description |
|---|---|
| scrollSensitivity | Controls how much scroll input is required to trigger animation. Lower values = more sensitive. |
| touchSensitivity | Sets the sensitivity for touch devices. Adjust to refine scroll behavior on mobile. |
| frameRate | Determines how often the scroll updates per second. Default is 60 FPS (1000/60 ms). |
| smoothingFactor | Applies a smoothing effect to the scroll animation for better fluidity. Range: 0 to 1. |
| momentumScrolling | Enables momentum-based scrolling, mimicking natural inertia after input stops. |
| momentumDecay | Sets how quickly the momentum slows down. Lower values = longer glide. |
| allowHorizontalScroll | Allows scrolling in horizontal direction if needed (useful for panoramas or timelines). |
| keyboardSensitivity | Controls scroll amount when using keyboard arrows or page keys. Higher = faster scroll. |
| enableKeyboard | Enables or disables keyboard navigation support for scrolling. |
Download Source File
This Video Scroll Trigger Animation is an exciting addition to your eLearning toolkit. It provides learners with greater freedom to engage with content while enhancing their overall experience.
