Trying to also tween an svg element that resides in an iframe by its class

[Remi Turcotte]

Hi everybody!

 

Sorry I dont have a codepen to show, I know how to make a codepen, but this question relates to Iframe, I wouldnt know where to start!!

 

ok 

 

I have the following line that works just fine, rotating an injected svg's element that has the .rotate class:

 

animationA.to(".rotate",5, { rotation:44, transformOrigin:"50% 50%", repeat: -1, yoyo:true }, 0);

 

I also have an iframe (id="blogPostIframe")in this page layout, that contains another svg, that also has an element with a .rotate class 

 

(it resides on the same server, just a folder away)

 

I'm trying to make it rotate too, from my already existing main page code.

 

So far Ive read online and tried to add

 

postIframeElement = document.getElementById("postIframe");
contentWindow=postIframeElement.contentWindow;

animationA.to(".rotate",5, { rotation:44, transformOrigin:"50% 50%", repeat: -1, yoyo:true }, 0);

animationA.to("contentWindow.rotate",5, { rotation:44, transformOrigin:"50% 50%", repeat: -1, yoyo:true }, 0);

 

but this throws "Uncaught TypeError: Cannot read property 'contentWindow' of null" in the console...

 

anybody knows if this is feasable?

 

[OSUblake]

Assuming your iframe is same origin, you would have to get the iframe document.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/contentDocument

 

And then select the your element.

var rotateElement = iframeDocument.querySelector(".rotate");

animationA.to(rotateElement,5, { rotation:44, transformOrigin:"50% 50%", repeat: -1, yoyo:true }, 0);

 

[Remi Turcotte]

34 minutes ago, OSUblake said:

Assuming your iframe is same origin, you would have to get the iframe document.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/contentDocument

 

And then select the your element.

var rotateElement = iframeDocument.querySelector(".rotate");

animationA.to(rotateElement,5, { rotation:44, transformOrigin:"50% 50%", repeat: -1, yoyo:true }, 0);

 

RockinFloppinAwesome.

It works.

I need to get meself a Greensock mug and some greensocks for xmas!

 

Thanks a million!

:)