Forum Discussion
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...
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
Hi David,
It looks like you're missing some quotes:
gsap.to(theObject1,{scale:1.15,ease: "bounce.out"});OMG!!! It actually works :-) Thank you so much Jordan.. Can't wait to do more :-)
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 :-)
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.
