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!
- MathNotermans-93 years agoCommunity Member
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 usedocument.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 :-)