[Controlling timelines from iframes with GSDevTools]

Was looking for the exact same thing,

it's indeed not possible to add the timeline from contentWindow, i always get an error, no matter what :

Quote

TweenMax.min.js:14 Uncaught Cannot add [object Object] into the timeline; it is not a tween, timeline, function, or string.

 

Maybe the contentWindow Mechanism somehow change the signature of the variable.

 

But i soon realize you can actually control the contentWindow's timeline with it's own functions (like pause() play() and ... progress !).

 

So i came with this quick and dirty implementation, witch actually works : 

    var iframe = document.getElementById("timeline1");
    var iframe2 = document.getElementById("timeline2");
    var timeline = new TimelineMax({id:"masterTimeline"});
    var tl1=new TimelineMax({id:"timeline1"});
    var tl2=new TimelineMax({id:"timeline2"});

	iframe.onload = function() {
    	var contentWindow=iframe.contentWindow;
    	var tl=contentWindow.mainTimeline;
    	tl.pause(0);
      
    	// console.log(tl);
    	// tl1.add(tl);
    	tl1.to(tl,tl.totalDuration(),{totalProgress:1,ease:Linear.easeNone})
    	
	}
	iframe2.onload = function() {
    	var contentWindow=iframe2.contentWindow;
    	var tl=contentWindow.mainTimeline;
    	tl.pause(0);
    	tl2.to(tl,tl.totalDuration(),{totalProgress:1,ease:Linear.easeNone})
    	
	}
	timeline.add(tl1);
	timeline.add(tl2);
    GSDevTools.create({animation:timeline,globalSync:false});

 

 

Enjoy