Our next free workshop event will be announced very soon! Explore Our Online Training Courses and Master Classes!

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 });

Learn how to build interactive content like this yourself in Storyline in just 2 days!

Join our next Advanced-level Articulate Storyline 360 workshop (In-person or Virtual).

Related Articulate Storyline 360 Innovations

Year

2022

Methodology

  • Articulate Storyline 360
  • GSAP
  • JavaScript & CSS

Schedule a meeting

Why not book a consultation call with us? We’re here to assist you with any questions or concerns you may have.

Please note: All bookings are subject to confirmation. We reserve the right to reschedule based on availability.