Jump to content

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


  • Posts

  • Joined

  • Last visited

Phd's Achievements



  1. 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.
  2. 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!
  3. 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.
  4. 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.
  5. I have been trying to get a text rollout animation working in Adobe Captivate. A kind person on the Adobe forums responded with an example making use of GSAP library using the fromTo command, which largely resolves the problem. The animation is dropped into a Captivate slide as a zipped up .html file to animate the text at a certain point on the timeline, only compatible with HTML5 output, which is fine. The problem is that if the slide is replayed, e.g. by restarting the timeline or rewinding and replaying, the fromTo animation does not replay, it only works by refreshing the whole browser page and restarting the player. The question is, how can I get the fromTo to replay correctly if the player timeline is rewound? Gsap code is: gsap.fromTo(“.text”, {xPercent: -100}, {xPercent:0, duration: 2, ease: “none”, overwrite: “auto”});