Example
More JavaScript...
I had some spare time on my hands, so I put it to good use by creating another JavaScript API example.
This interaction showcases how Storyline's JavaScript API can be used to create dynamic visual effects where objects — such as images or content cards grouped with text — respond to user actions with smooth movement and scaling animations. When the user clicks an image, it moves smoothly toward the center of the screen while scaling up, creating the effect of enlarging or zooming in on the content. This provides a more focused view without navigating away from the current slide. When the user clicks on a layer, the image scales back down and returns to its original position, restoring the slide layout. The effect is similar to interactive zoom-in/zoom-out behaviors seen in modern web interfaces, offering an engaging way to present more detail.
Use Cases
- Image galleries: View enlarged images
- Interactive cards: Focus in on more detailed content
- Info popups: Temporarily highlight specific grouped content
2 Replies
I can see a lot of applications for this! Is this code that you can share?
Please find the attached .story file. I’ve created a simple example with two pictures and some JavaScript code. The idea is to create two shapes that match the initial dimensions and positions of the pictures — let’s call these the target start points. In the center of the slide, there’s another shape — let’s call this targets destination. Its width and height are designed to accommodate the scaled-up version of the pictures at a specific size. Imagine these shapes as placeholders. In this scenario, the two images scale up and down interchangeably, always returning to their initial positions and dimensions. When one image is scaled up, the other remains at its starting point, unscaled. Depending on your storyboard and layout, you may choose to combine code, states, triggers, and variables to achieve different effects. Lastly, while the code examples are slightly different — one scales the object up, and the other scales it back down to its original size (scale 1) — they can be copied and reused — just make sure to replace the two main object IDs with those from your own project, and ensure they match the objects currently present on the timeline. Different effects can be achieved by adjusting placeholder sizes, object dimensions, or object states within groups (as demonstrated in Example 2), as well as by modifying parameters in the code itself, such as animation speed or scaling. The possibilities are virtually endless. Tip: avoid altering clickable object hover state.
Getting Started with the E-Learning Challenges
Find practical answers to common questions about the E-Learning Challenges, a weekly event that helps you build skills, create your portfolio, and grow as an e-learning professional.