Inspiration
GSAP
Storyline Magic Series
Year

2022

Methodology
  • Articulate Storyline 360
  • GSAP
  • JavaScript & CSS
ELH Challenge Info

This project was submitted to the E-Learning Heroes Challenge #374 – Zooming and Magnifying Parts of an Image in E-Learning

I’m Still Discovering Some Amazing Things That GSAP Can Do!

I strongly recommend to any Articulate Storyline developer looking for a fresh challenge and an opportunity to expand your creative possibilities to head over to the GSAP website and start experimenting with their JS Code in your Storyline project!

This challenge presented a brilliant opportunity for me to utilise some of the new animation effects that I have been learning about over the past few days in order to take the Image And Storyline Object Zoom Effects that are possible with Articulate Storyline 360 content to the next level!

A top tip that I learned during this process is to use xPercent and yPercent values for your animation tweens instead of exact X+Y co-ordinate values, as these do not account for the difference in stage sizes depending on the user device. So for example, a motion and scale animation as seen in the example above would typically look like this:

gsap.to(objectname, { duration:1.5, scale:2, xPercent:-50, yPercent:-50 ,ease: “expo.out”, force3D:false });