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 point can be set by Gsap and thus change the effect of your animation completely.
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.
.... 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.
54 Replies
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.
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.
Basically this is your workflow.
https://360.articulate.com/review/content/c2346778-f734-4519-925c-25de492c387a/review
Sharing the Storyline for ease.
Aww.. Thats so kind! Thank you so much!