Targeting function after publish.

[curtiswiens]

Hi, this is a very specific issue. I am using Greensock to add HTML5 animations to Storyline (eLearning tool) it will allow you to add web objects to a slide. I have figured out how to communicate between my hand coded GSAP animations and Storyline just fine by targeting the iframe that the web object lives in. Occasionally we use Adobe Animate with GSAP and that is where it breaks. Adobe animate changes the scope of the GSAP code putting it in a closed function:

I can fire this function:

function controlAnimate(){
    alert();

//tl.pause();
   
}

Anything in this function, which is where the GSAP code lives, is not accessible.

Animate wraps it all in this closed function:

(function (cjs, an) {...

GSAP code is in here.

I have tried everything to access the GSAP code with no luck.  I know this is a scoping issue I am just not sure how to get around the function with closure.

above function firing the alert from Storyline in the animate html.  Anything inside (function(... does not work.

https://360.articulate.com/review/content/0112d7f3-c73e-475a-adb6-15f30ed9f4bf/review

Successful control of hand coded GSAP animation from Storyline:

https://360.articulate.com/review/content/5e2693d1-be09-44d8-84ee-eca0dfee96e5/review

This is a bit more of an adobe animate question I guess throwing it out there just in case anyone has a clue. DANKE!

[kglad]

what code in animate is failing?

(and why are you using gs instead of the native tween?)

[ClayUUID]

I don't understand what you're describing at all, so I'll just mention that Animate (in HTML5 Canvas mode) automatically declares a global variable exportRoot that points to the Animate root timeline.

[curtiswiens]

Yes, I have tried that (exportRoot). I am coding my animations in the Actions panel of Adobe Animate using Greensock. I love the convenience of being able to quickly mask things and place them on the stage without needing to create CSS. I then embed the published HTML into a web object in our eLearning tool Storyline360. In storyline we have a play/pause button that controls the timeline. I am attaching a JS call to the play/pause button to also control the webobject:

var filename = 'index.html';

var iframeElements = document.getElementsByTagName("iframe");

for(var i = 0; i < iframeElements.length; i++){

var src = iframeElements.getAttribute('src');

     if (src.indexOf(filename) !=-1) {

     iframeElements.contentWindow.pauseTimeline();

}

}

in the Actions panel along with my Tweening code I have a function pauseTimeline() {tl.pause();} I can not figure out the scope of it though. Again I can fire a function on the root level but not where it puts my tweening code.

[kglad]

is pauseTimeline called?

if so and tl is defined (in that fn),it should work.

[curtiswiens]

When I put the function at the root level of the .js file that Adobe animate publishes I can get the function to fire. What I need it to do is work in here:

(lib.sephorappclient = function(mode,startPosition,loop) {

this.initialize(mode,startPosition,loop,{});

//GSAP code starts here

var tl = new TimelineLite({repeat:20});

root =this;

tl.timeScale(1);

//this. is required to get mc scope

var allItems = [this.frame_mc, this.splash_mc, this.header_mc, this.white_mc];

tl.from(allItems, 1, {

y: "1200",

ease: Quint.easeOut

})

tl.to(this.splash_mc, 2, {

x: "-200",

ease: Quint.easeOut,

})

tl.from(this.counter, .5, {

alpha: 0,

ease: Back.easeOut

}, "-=1")

function pauseTS(){

//tl.pause();

alert("pause");

}

function playTS(){

//tl.play();

alert("play");

}

//GSAP code ends here

}

[ClayUUID · Accepted solution]

Why are you using GSAP instead of the built-in tween library, TweenJS? Unless you're doing some super fancy animation it should be up to the job.

Anyway, your attempt to call pauseTimeline() isn't working because you're trying to call it as a global method of the window object, which apparently isn't how you're declaring it. If you want to call it on the window object, you have to put it on the window object, like this:

window.pauseTimeline = function() {

     tl.pause();

}

[curtiswiens]

So declaring the function as global using window in my tweening code did it. This is great because I do not have to add code after publish. THANKS!! I knew it was a scoping issue but did not understand the adobe animate structure. Thanks again!