Skip to main content
C
curtiswiens
Known Participant
July 31, 2018
Answered

Targeting function after publish.

  • July 31, 2018
  • 2 replies
  • 605 views

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!

    This topic has been closed for replies.
    Correct answer ClayUUID

    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();

    }

    2 replies

    C
    ClayUUID
    Legend
    August 1, 2018

    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.

    C
    curtiswiensAuthor
    Known Participant
    August 1, 2018

    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
    Community Expert
    kgladCommunity Expert
    Community Expert
    August 1, 2018

    is pauseTimeline called?

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

    kglad
    Community Expert
    kgladCommunity Expert
    Community Expert
    August 1, 2018

    what code in animate is failing?

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

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices