Dynamic Zoom Effects in Storyline 360 using Javascript & GSAP

In this video tutorial, we’ll explore how we can zoom in Articulate Storyline 360 by analyzing the options available when using the default way - zoom regions.

Then, we will explore how to use GSAP to achieve a similar effect by modifying an object’s scale.

We will then control our zoom with buttons that allow us to zoom in and zoom back out to reset the view. And we’ll also control our zoomed in image using arrow buttons.

Hope you enjoy these tips and tricks. 🙂

Here’s the video

Code used

1
2
3
4
5

//reset

var animationTarget = document.querySelector("[data-acc-text='myGroup']");

gsap.to(animationTarget, {scale:1, xPercent:0, yPercent:0})

1
2
3
4
5

//zoom in

var animationTarget = document.querySelector("[data-acc-text='myGroup']");

gsap.to(animationTarget, {scale:2,transformOrigin:"center left", duration: 5 })

1
2
3
4
5
6

//move down

var animationTarget = document.querySelector("[data-acc-text='myGroup']");

gsap.to(animationTarget, {yPercent:"-=3"})