Forum Discussion
Expand and Contract a graphic?
Is this possible?
I have an illustration of a concept I want to convey and I'd like to make it contract and move to the right when my mentor comes out to explain it. I guess I'm accustomed to...
Or use GSAP...with GSAP you could even make a LOTTIE animation in AfterEffects and trigger that with code in Storyline.
So, I tried by following a few videos. I'm not sue what I'm doing wrong but maybe you can tell me. This guy, for instance.
https://www.youtube.com/watch?v=Mnvgge8ttpY&t=525shttps://www.youtube.com/watch?v=hRRZ0mbhWoQ&t=357s
No need to watch it. I'll explain the pertinent parts.
He has a ball that he named "basketball" in the accessibility option in the drop down. I did the same but named my object "space".
In his video he created a trigger on a button, "execute JavaScript". In mine I want it when the timeline starts, so that is what I did.
Below is what he put in his JavaScript with my minor alterations. On GSAP site they don't have spaces after or before the curly bracket, but he did and I tried it both ways. Tried with percentage signs, without percentage signs. I changed various characteristics. Cleared my browser cache. Nada.
var theObject = document.querySelectorAll("[data-acc-text='space']");
gsap.to(theObject, {scale: 0.66%, x: 700, duration: 1.5, ease: "back"})
Any advice or correction would be greatly appreciated.
Thanks in advance.
JK
