Search the Community

This works great when it's not iframe, but when I try to implement it in iframe. it doesn't work. Do anyone knows how to do it?

Hi I have a draggable with a iframe, in mobile, i can't move if my first touch is in the iframe. The scrolltop is good, the touch on desktop too, but on mobile nothing. So i can't use Draggable if i have a video(youtube/video) inside, on mobile. If i hijack with dragClickables:true, all my links and the play button in the iframe become unavailable. Anyone have a solution ? Thanks

Going out on a limb here perhaps with this one but I will take any advice I can get. I used Greensock to create an animation and uploaded it as an HTML5 Animation into Captivate 11.5.1.499 Captivate places these animations into the published product as an iframe. When I do a preview - it behaves as expected and pulling data from the iframe works as well. When I publish, however, the animation itself works fine but the data is no longer accessible. The file (the HTML embedded iframe one) becomes "restricted" and is labeled as a cross-origin document. The file is dropped into a /wor/wo_xxxx folder and seems like it should be part of the same domain so I am struggling to find my way around this puzzle. The console returns an ERR_FILE_NOT_FOUND about an "undefined" directory. I am simply not finding the source/solution of this issue. I realize this may require a Captivate solution so I have posted my question in the forums there as well. It was actually in those forums that I first learned about Greensock so I know others are using it with Captivate.

Hey, When I display an animtion in an iframe, the whole content jumps up 1 px while animating, and then jumps down again when done. I've only observed this behavior in Safari on desktop. (I've tried other people's animations as well with the same result.) Does anybody have any idea why it does this, and how to make it not to? http://skalpell.se/clients/ellermore/test/ Plz halp

I don't have a codepen in this one because it involves multiple files... (I'm trying to use GreenSock to coordinate animations+audio from multiple sources.) I have an Iframe calling an html+js page that was generated using Adobe AnimateCC. <iframe id="animateCC" src="AnimateCC/hw.html" class="fullscreen"></iframe> I'm trying to call a function inside that Iframe. The playback menu from GSDevTools goes as far as the label associated with tl and then stops : var fn = document.getElementById('animateCC').contentWindow.init; tl.call(fn, [], this); document.getElementById('animateCC').contentWindow is always defined document.getElementById('animateCC').contentWindow.init is sometimes defined, sometimes undefined the call itself never works Inside the Iframe, the init() function looks like this: function init() { canvas = document.getElementById("canvas"); anim_container = document.getElementById("animation_container"); dom_overlay_container = document.getElementById("dom_overlay_container"); var comp=AdobeAn.getComposition("608A33886B013E4CA195C53BA6AACBD3"); var lib=comp.getLibrary(); handleComplete2({},comp);} Inside the Iframe I have a button: <button id="initButton" onclick="init();">Animate!</button> I can see the button. When I click it, it launches the animation.

Is there a way to start the html banner animation WHEN the <iframe> gets on screen when developing for AdWords? I am new to banner design/dev but I know my way around with html/js. This is what I have found so far: the ad is served within an <iframe> so I cannot snoop on parent scroll position due to cross origin policy AdWords has a 30 sec animation limit, so if the animation starts on page load, it can be over by the time the user scrolls over it If it was DoubleClick I could use Enabler.isVisible to do what I want So does anybody know how can I do this for AdWords (without the Enabler)? Thanks!

Lately i've experienced a wired issue: i produced a wallpaper with a leaderboard and a sidebar. they both started animation (gsap) at the the same time. but when i scrolled down the page, and the leaderboard left the view, and i scrolled back to top, the leaderboard had pasued its animation and resumed it when coming back to view, having the effect that the sidebar had almost finished its timeline while the leaderboard was still at the beginning. so the whole sync had been crashed. it seems like firefox on mac is pausing rendering on iframes that are not in view. has anyone experienced the same issue and maybe has a solution for it? thanks and best regards wolfgang

I have a wallpaper made out of two iframes, a leaderbord with 728x90 and a skyscraper 160x600, so called hockeystick. both iframes are synced via sessionstorage, so the animation runs smoothley across both frames. i animate with greensock anim library. When i scoll down the page, the leaderbord scrolls out of view, the skyscraper is sticky and remains in view. the skyscraper keeps animating, but when i scroll back to top, the leaderbord obviously has stopped the animation when it left the view and now proceeds the animation as if the browser has "frozen" the frame as long as it is out of view (Firefox/Mac). of course it looks ugly, because the animations are now not in sync anymore. i have seen other hockeysticks that seem not to have that problem. i cannot find something about this issue on google. anyone any idea? thanks!

Hello all, We're trying to integrate SplitText into our solution, content will come from a JSON endpoint which is entered from a WYSIWYG. When using SplitText, it seems to omit the iframe element. Is there any recommendations around that? Thank you Chris

I've been using the 'scrollTo' plugin to scroll my divs, but now I need to implement that same functionality to affect an iframe. Is this possible?

when i was trying to create a website that uses jquery to link numerous iframes, jQuery('.open_contents').click(function() { jQuery('.board_contents').addClass('slideIn'); }) I found out that iframe cannot communicate with the parent window, and i was able to solve the problem with the following code by adding 'top.document' jQuery('.open_contents').click(function() { jQuery('.board_contents', top.document).addClass('slideIn'); }) but simply addingclass or togglingclass was not good enough for creating the animation that i wanted, so i moved onto Greensock. the question is how do i control specific div layer in the parent window, using greensock by clicking on a button inside an iframe? my code is this : jQuery('.open_contents').click(function() { TweenMax.to(".board_contents", 0.5, {opacity:1, top:200, ease:Bounce.easeOut}); }) my webpage is this : http://lifeto.dothome.co.kr/xe/page_FIsv96 and here is where i am. if you click on the first 'click me' button a board slides down, and then it was supposed to open a layer named '.board_contents' when click on the title '1', but is currently not working. do excuse my horrible english.

this sample download and document form work : http://blog.bassta.bg/2013/05/smooth-page-scrolling-with-tweenmax but but but iframe not work scroll <iframe id="ifrmView" border="0" class="brNon wFull" scrolling="yes"></iframe> And Source : $('#lstExplorer li').live('click', function (e) { var URL=$this.data("path"); var Type=$this.data("type"); $("#ifrmView").attr("src","PanelView.php?URL="+URL+"&Type=" + Type).load(function(){ this.contentWindow.setLoadInit(); //setScrollAnimation($(this.contentWindow)); }); }); in content iframe : <script src="JavaScript/GSAP/TweenMax.min.js" type="text/javascript"></script> <script src="JavaScript/jquery-latest.js" type="text/javascript"></script> <script type="text/javascript"> function setLoadInit() { setScrollAnimation($(window)); } </script> <div> ....

Hi all! I set up a site using TweenMax 1.9.5 for any animation, and everything worked properly. Later, I updated the libraries to 1.9.7 and finally to 1.9.8. With current version, the animations don't work properly; there is a conflict with Addthis dynamically created iframes. Here is a sample code reproducing the problem with a YouTube static iframe: <!DOCTYPE html> <html> <head> <!-- 1.9.6 --> <!-- <script type="text/javascript" src="https://raw.github.com/greensock/GreenSock-JS/f91853a0e9f753c1ae8b6b36172a4d42759296af/src/uncompressed/TweenMax.js"></script>--> <!-- 1.9.7 --> <!-- <script type="text/javascript" src="https://raw.github.com/greensock/GreenSock-JS/7c36c8f249526f687e185caa599a6e39bbed15e9/src/uncompressed/TweenMax.js"></script> --> <script type="text/javascript" src="https://raw.github.com/greensock/GreenSock-JS/ab62042130fa8f6a875b92bd2532d1f39d7a18f4/src/uncompressed/TweenMax.js"></script> <!-- Still the same from february --> <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.9.8/plugins/ScrollToPlugin.min.js"></script> <style type="text/css"> body > div { background-color:green; height:5000px; } </style> </head> <body> <div></div> <iframe width="560" height="315" src="http://www.youtube.com/embed/CZF2o06mlgQ" frameborder="0" allowfullscreen></iframe> <script type="text/javascript"> setTimeout(function(){ // This is to allow the iframe being loaded TweenMax.to(window, 2, { scrollTo: { y: 2500, autoKill:false }, onComplete: function() { alert("end"); } }); },10000); </script> </body> </html> As you can see, an error is thrown in TweenMax.js, line 5700. In that location, "target" is "window" when attempting to scroll it, but window[0] (target[0]) doesn't allow the access to "nodeType" property. In particular, Firefox says "Error: Permission denied to access property 'nodeType'" and Chrome indicates a cross-domain conflict between the current page and the imported in the iframe one. I figure out that this happens because window object also contains the included frames and iframes (http://www.w3schools.com/jsref/obj_window.asp), hence target[0] isn't the "desided" window object, but only the first contained iframe. There should be a window.frames[x], but looks like that window[x] works in the same way (as well as window.length), that is an array of window objects (cross domain or not). Reverting to TweenMax version 1.9.5 (the last working I had on SVN), everything works as expected. In the reported example I also included the commented imports of previous versions, and the last which looks like working is 1.9.6. Moreover, another animation in my pages throws a similar error on native IE8, and looks like 1.9.5 doesn't do the same: I didn't investigate deeply in this, because maybe that fixing the regression will also fix the other trouble. I'll get some time to do it if U wished Thanks in advance for your precious help Massi