Forum Discussion
Using variables to change size of shapes
Just changed Gaston's version to use GSAP as that is build into Storyline360. Gives many more possibilities too... like easing and more.
This was the original code...var elem = null;
var slide = parent.document.getElementById('slide');
var divs = slide.querySelectorAll('div');
for (var i in divs) {
if (divs[i].tagName == "DIV") {
var attr = divs[i].getAttribute('data-acc-text');
if (attr && attr=='avatar.png') {
elem = divs[i];
break;
}
}
}
if (elem) {
var style = window.getComputedStyle(elem);
var matrix = style.transform.match(/matrix.*\((.+)\)/)[1];
var values = matrix.split(', ');
var r = Math.round(Math.asin(values[1]) * (180/Math.PI));
var player = GetPlayer();
var s = player.GetVar('scaleValue') ;
elem.style.transform = "translate("+values[4]+"px, "+values[5]+"px) rotate("+r+"deg) scale("+s+")";
}
And this is the same but then using GSAP.
As you can see...shorter and simpler.
//this needs to be the 'acc-name' of the image
let imageToChange = document.querySelector("[data-acc-text='avatar.png']");
let player = GetPlayer();
let s = player.GetVar('scaleValue');
gsap.to(imageToChange, { duration:0.1,scale: s });
Added the adapted version.
Related Content
- 5 months ago
- 10 months ago
- 10 months ago
- 10 months ago