Bounce animation in Storyline with GSAP

You can make amazing animations in Storyline. I started taking small steps for GSAP. It looks exciting. See this for example.

View Animation

Using different animations in e-Learning is one of the ways to attract attention and increase the quality of learning.

As a designer, I use the classic animations in the storyline, but sometimes it is necessary to go beyond the limits and increase the fun. I try to try different things rather than standard courses. Thanks to Rıdvan Sağlam, I realized that GSAP also enables this and I started to implement it. JavaScript knowledge is required for this, I got support from my teammate Taylan Mun.

I want to show bounce animation using GSAP library in stoyline. We can't make those beautiful animations that we imagine in Storyline or that we see in many places, but thanks to GSAP, I was able to do it.

Let's see how it happened;

First, I add 4 icons and save their accessibility name as "box".

Then I add a trigger and I'll start writing the codes in it. The important point here is JavaScript knowledge, if we do not define the codes correctly, it will not work.

Now let's write the codes. You can also get the codes from the GSAP library.
Link: https://greensock.com/docs/

These are all our codes. Storyline uses the GSAP library, these codes also work in the offline system. I got these codes from the GSAP library and it worked after I made my definitions. We can include many things in our courses this way.

var allObject = document.querySelectorAll("[data-acc-text='box']");

 This code is used to introduce the objects in the slide, if this code does not exist, our trigger does not know what to apply this animation to.

The last stage; I export our course as a web.

All Codes;

var allObject = document.querySelectorAll("[data-acc-text='box']");
gsap.from(allObject, {
  duration: 3,
  scale: 0.5, 
  opacity: 0, 
  delay: 0.5, 
  stagger: 0.2,
  ease: "elastic", 
  force3D: true
});