Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Vitaliy Bagmet

Controlling timelines from iframes with GSDevTools

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi GSAP folks,

 

Please help to sort out the following.

 

Imagine I have index.html with 2 iframes with timeline in each one.

What I'd want to is getting and controlling each iframe timeline with GSDevTools from opened index.html where these iframes are placed.

 

The question is how to make GSDevTools to see timelines from iframes?

Here I've used codepen iframes but of course in fact there should be local html files.

Maybe it's more JS specific question.

 

Thanks in advance.

 

Cheers

Vitaliy

 

See the Pen WZVqGr by bagmetv (@bagmetv) on CodePen

Share this post


Link to post
Share on other sites

Hello @Vitaliy Bagmet .. thank you for providing the codepen ;)

 

Based on the structure of the nested codepens; You might want to use the FULL PAGE mode codepen in your child iframes. Since by default codepen uses an iframe to show codepens that either have /pen/ or /embed/ in the URL .. which is basically EDITOR mode in codepen. When you use FULL PAGE mode it doesnt display your code within an iframe.

 

But the way the codpen is now, technically your really trying to access an iframe (parent frame) within an iframe (child frame) that is within another iframe (grand child frame).

 

You can get into some crazy iframeception with the way its setup right now with multiple nested iframes due to all the codepens.

 

If you make the first children iframes pull in codepen's FULL PAGE mode. Then you will just be trying to access an iframe from the parent (one level deep).

 

Do you know what i mean?

 

To access the javascript objects of an iframe or nested iframe you would have to cycle or loop through each frames window object to inspect and access GSAP stored object and properties. The window object is where all the javascript object, properties, and values are stored.

  • Like 2

Share this post


Link to post
Share on other sites

So you want one GSDevTools instance to control all of the animations in 2 different iframes (which may also have sub-iframes)? Yeah, that's tricky. I guess if each of those iframes are creating 1 master timeline each, you could grab those via JS from the parent window and toss those into a TimelineLite and hook up your GSDevTools to that (animation:yourTimelineLite, globalSync:false). 

  • Like 1

Share this post


Link to post
Share on other sites

Much appreciated for comments and suggestions, dear Jack and Jonathan.

 

Jonathan, no, I'm not interested in codepen iframes actually, just wanted to show my local setup but of course thanks for details.

 

Jack, right exactly. Thanks for tip. I have followed your suggestion (locally on my computer):

- wrapped iframe timeline in function with return + attached timeline to iframe window object

- got iframe timeline from parent through contentWindow

- added it to TimelineLite 

- created GSDevTools instance with mentioned properties

 

...but that didn't workout for me (though no issues in console).

GSDevTools is not seeing passed iframe timeline and it's id.

 

I'm wrapping my head with this case right from GSDevTools realease.

Unfortunately my JS skills are not so solid I'd want too...

 

Now I'm having thoughts that my idea of controlling and tweaking iframe animation from parent GSDevTools with approach above is a wrong way.

I guess there should be some 2-way data-binding/reactivity for that (Vue.js for example).

 

What do you think about all that?

Can I prepare some demo files and upload them?

 

Thanks

Vitaliy

Share this post


Link to post
Share on other sites

Sure, feel free to post the most reduced test case possible. I'd be happy to take a peek. Disclaimer: I know absolutely nothing about Vue, so if there's any way you could just use vanilla JS, that'll greatly increase the chances of me getting you a decent answer :)

  • Like 1

Share this post


Link to post
Share on other sites

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

 

Share this post


Link to post
Share on other sites
10 minutes ago, Hayaku said:

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 :

 

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

 

 

Hi Hayaku,

 

Oh I have paused this idea implementation for uncertain time. 

Many thanks for coming up with that! Will do test on my side soon.

 

Cheers

Vitaliy

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 


  • Recently Browsing   0 members

    No registered users viewing this page.

×