Forum Discussion
Animating the size of an object
Oh heck yeah. Got it using your code from that file.
https://360.articulate.com/review/content/7b563055-48e9-494c-858d-601f051f1c87/review
The code I modified after two dozen trial and error publishings:
var movepic = document.querySelectorAll("[data-acc-text='PatientOverview_2.png']");
TweenLite.to( movepic , .75, {autoAlpha:1,scale:1.38,x:"+224",y:"+208"});
(the only part I don't get is what autoAlpha does)
Thanks a lot, Math! May your roads be paved with gold, your suppers filled with shellfish!
Great work DR.
Let me clarify some of the code and give some tips.
Foremost...do use the GSAP site for any tips about GSAP code.
https://greensock.com/get-started/
To detect what version of GSAP is used in Storyline you can run this line of code.console.log("GSAP: "+gsap.version);
In the browser console it will tell you that GSAP is in version 3.10.4
One of the things you notice is i use gsap instead of TweenLite. From version 3 upwards all GSAP code is written as gsap.to etc. instead of TweenLite.to
When coding for Storyline your process falls into 2 parts.
1) Selecting the proper elements on Storyline stage
2) Doing something with these elements
Your selector selects ALL elements that are named 'PatientOverview_2.png'. In your case that is only 1 probably, but you should be aware that you get a HTMLCollection back and not just 1 element. Well in your case its just 1 element, but you can have more. So when you only want 1 element use document.querySelector("[data-acc-text='PatientOverview_2.png']");
instead.
Do be aware that this now only works because Storyline automatically assigns the element this 'accessibility-name'. It might be needed to specifically set acc-names on elements in some cases.var movepic = document.querySelector("[data-acc-text='PatientOverview_2.png']");
So now we have 1 element selected.
The gsap code to tween this properly would be like this:gsap.to( movepic , { duration:0.75, scale:1.38});
autoAlpha:1 = shows an image at 100%
autoAlpha:0 = fades out an image to 0%
autoAlpha:0.5 = image fades in or out to 50%
As you can see for version 3 and up.. duration is between the { }
For example you can set your element invisible at start.gsap.set( movepic , {autoAlpha:0, scale:0.65});
So here we have no duration. gsap.set immediately acts, whereas .to has a duration.
Now on a click or after a specific time you can show and scaleup your image like this.gsap.to( movepic , { duration:0.75, autoAlpha:1, scale:1.38 });
If you prefer to first fadein your image and then scale it... you can sequence gsap events.
gsap.to( movepic , { duration:0.75, autoAlpha:1, onComplete:scaleMe });
function scaleMe(){
gsap.to( movepic , { duration:0.75, scale:1.38 });
}
Now the element first fades in, and then scales up. This is easier to be achieved with gsap timelines, but thats for a next lesson :-)