Forum Discussion

MathNotermans-9's avatar
MathNotermans-9
Community Member
3 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
DavidHolzemer-7's avatar
DavidHolzemer-7
Community Member

Hi Math,

I'm super new to javascript, but am trying to learn a little :-) Hope you don't mind if I ask probably an incredibly novice question. 

I want to have a 3 buttons on a screen ... and if you hover over one it grows and bounces just a little bit. 

For the trigger I was just using When user hovers over execute JavaScript

This is the Javascript I was trying to make work


//Reference the object
var theObject1 = document.querySelectorAll("[data-acc-text='bounceMe']");

//Animate in GSAP
gsap.to(theObject1,{scale:1.05,ease:bounce.out})

bounceMe is the name I gave the button in the Accessibility panel

Any chance you coud tell me what I did wrong? I'd be greatful to just get something simple to work..lol! 

David

JordanBest's avatar
JordanBest
Community Member
2 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
    2 years ago

    OMG!!! It actually works :-) Thank you so much Jordan.. Can't wait to do more :-)

  • DavidHolzemer-7's avatar
    DavidHolzemer-7
    Community Member
    2 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
      2 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
        2 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.

Related Content