Phd Posted July 21, 2020 Share Posted July 21, 2020 I've been trying to get an iFrame content dynamically created, which includes a gsap script for animation. I've managed to get the iFrame content created, but when it comes to the gsap script it says the timeline cannot find the style class. The gsap library is imported in the parent document, and I'm accessing the library referencing "window.parent.gsap.timeline()...." window.parent.gsap.timeline().fromTo(".fromLeft", { xPercent: -100 }, {xPercent: 0, duration:3}); the css includes: .fromLeft {\ color: #ffffff;\ font: 28px Arial, sans-serif;\ font-weight: bold;\ text-align: left;\ text-shadow: 3px 3px 3px #505050;\ } and the div object to animate specifies the class: <div class="fromLeft">Text to scroll</div> I've tries all sorts of combinations to get the iframe content replacement to work, which I can get to work in Chrome using various methods, but they are not compatible with IE11, I'm looking for a solution that is compatible with both. The closest I have gotten writes a template of html code to a created document that is switched in to replace the existing iFrame content (generated from Adobe Captivate) project: function scrollText(id,message) { var variables = { html: '<div class="fromLeft">' + message + '</div>', css: '.fromLeft {\ color: #ffffff;\ font: 28px Arial, sans-serif;\ font-weight: bold;\ text-align: left;\ text-shadow: 3px 3px 3px #505050;\ }', js: 'window.parent.gsap.timeline().fromTo(".fromLeft", { xPercent: -100 }, {xPercent: 0, duration:3});', jss: 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.0/gsap.min.js' }; var template = [ '<html>', '<head>', '<style>', variables.css, '</style>', '</head>', '<body>', variables.html, '</body>', '</html>' ].join(''); var iframe = document.getElementById(id).firstChild; var newDocument = document.implementation.createHTMLDocument(iframe.contentDocument.title); var iframeDocument = newDocument.contentDocument; // Copy the new HTML document into the frame var destDocument = iframe.contentDocument; newDocument.open(); newDocument.write(template); newDocument.close(); var srcNode = newDocument.documentElement; var newNode = destDocument.importNode(srcNode, true); destDocument.replaceChild(newNode, destDocument.documentElement); var scriptInclude = document.createElement("script"); scriptInclude.src = variables.jss; destDocument.body.appendChild(scriptInclude); var scriptCode = document.createElement("script"); scriptCode.textContent = variables.js; destDocument.onreadystatechange = function() { if (destDocument.readyState == 'complete') { destDocument.body.appendChild(scriptCode); } }; } I get the error: VM395:97 GSAP target .fromLeft not found. https://greensock.com _warn @ VM395:97 VM395:97 GSAP target not found. https://greensock.com I don't know why it doesn't see the class! Whether it's to do with the iframe not being fully rendered I don't know, but that is why I added the onreadystatechange function to only add the script when "complete". Any further help would be appreciated. Link to comment Share on other sites More sharing options...
ZachSaucier Posted July 21, 2020 Share Posted July 21, 2020 Hey Phd. You're attempting to use a selector string as your target. That is equivalent to doing document.querySelectorAll(".fromLeft"). If you do this on your page, I believe you will see that the document doesn't have access to your element inside of the iframe. Instead of using a general selector string, use a direct reference. Something like destDocument.document.querySelector(".fromLeft"). 2 Link to comment Share on other sites More sharing options...
Phd Posted July 21, 2020 Author Share Posted July 21, 2020 How can that be used inside the gsap timeline.fromTo call? Previously, I tried to do a document.getElementsByTagName(“style”), and outputting the contents to the console, and the .fromLeft style did exist. Link to comment Share on other sites More sharing options...
ZachSaucier Posted July 21, 2020 Share Posted July 21, 2020 2 hours ago, Phd said: How can that be used inside the gsap timeline.fromTo call? You use it as the target instead of the string. 2 hours ago, Phd said: Previously, I tried to do a document.getElementsByTagName(“style”), and outputting the contents to the console, and the .fromLeft style did exist. Why are you trying to access the style object? I thought you were trying to animate elements, not the styles of elements. Link to comment Share on other sites More sharing options...
Phd Posted July 22, 2020 Author Share Posted July 22, 2020 9 hours ago, ZachSaucier said: You use it as the target instead of the string. Why are you trying to access the style object? I thought you were trying to animate elements, not the styles of elements. I just did that as a quick test to make sure I could see that the newly added style was visible. The timeline code line was something that another user showed me in the Adobe forum, based on an example from someone in this forum! Link to comment Share on other sites More sharing options...
Phd Posted July 22, 2020 Author Share Posted July 22, 2020 I gave it a go, and changing the timeline code line to the following worked: window.parent.gsap.timeline().fromTo(document.querySelector(".fromLeft"), { xPercent: -100 }, {xPercent: 0, duration:3}); I've been days trying to find a neat and workable solution to replacing the content of the iFrame with my own animated objects, as I said I tried many different solutions, some of which worked on Chrome, but only this solution seemed to be IE11 compatible. Many thanks for your time. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now