Forum Discussion

MathNotermans-9's avatar
MathNotermans-9
Community Member
4 years ago

How to use GSAP for animation in Storyline

As i get this question quit often, i am making a online tester for Gsap animation in Storyline. First step is scaling an image. And defining where you want to scale it from. This transformation poin...
General E-Learning
JordanBest's avatar
JordanBest
Community Member
3 years ago

Hi David,

It looks like you're missing some quotes: 

 gsap.to(theObject1,{scale:1.15,ease: "bounce.out"});
DavidHolzemer-7's avatar
DavidHolzemer-7
Community Member
3 years ago

I guess I also learned something about buttons.. it looks like the JavaScript only effects the normal button state and the rest of the states don't change... my next challenge :-)

  • MathNotermans-9's avatar
    MathNotermans-9
    Community Member
    3 years ago

    Indeed when targeting an existing button only the normal state is affected. Mainly because Articulate renames the button on hover or click. So if you check the browser console, you will notice that and can act upon it. Or use just an image to create your own buttons.

    • DavidHolzemer-7's avatar
      DavidHolzemer-7
      Community Member
      3 years ago
      Math Notermans

      .... Or use just an image to create your own buttons.

      I'm not sure what you mean? If you use an image and then have multiple states don't you have the same issue of Articulate giving the states different names? 

      or would you have to target each individual state in the JavaScript?  
      Like: 

      //Reference the object
      var btnCare = document.querySelectorAll("[data-acc-text='btnNormalState']");
      var btnCareOver = document.querySelectorAll("[data-acc-text='btnHoverState']");

      //Animate in GSAP
      gsap.to(btnCare,{scale:1.15,ease:"bounce.out"});
      gsap.to(btnCareOver,{scale:1.15,ease:"bounce.out"});

      I have a feeling it's not quite as easy as this though.