Kikovich

Thanks Carl for your answer. But I load the code like this: <script type="text/javascript" xlink:href="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenMax.min.js"/> In the original file that's working just fine, see here.

Hello again Since three days now I'm getting my feet wet with GSAP. I'm more from the designer side, so it's quite a challenge I'm using a technique explained in detail in this excellent video by Chris Gannon: Create a Single Animated SVG File Containing CSS, Fonts & JavaScript I made two banners this way with the help of Carl and Diaco (thanks again ), but in Codepen the animation doesn't play this way. I have to transfer the Javascript code to the code-window: First Banner Codepin Second Banner Codepin The original code of the SVG is embeded like this: <object data="img/i-sharesBigsize.svg" type="image/svg+xml"></object> And the SVG looks like this: <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink" viewBox="0 0 728 90" xml:space="preserve" overflow="hidden"> <defs> <style type="text/css">@import url('http://fonts.googleapis.com/css?family=Roboto:300');</style> <style type="text/css">@import url('http://fonts.googleapis.com/css?family=Lora');</style> <script type="text/javascript" xlink:href="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenMax.min.js"/> </defs> <g id="BGD"> <rect fill="#8ABD26" width="728" height="90"/> </g> <g id="smallTxt"> <text x="56" y="15" font-family="Roboto" font-size="10" font-weight="300" fill="#000000">Nur für professionelle Anleger</text> </g> <g id="text01"> <text x="56" y="54" font-family="Lora" font-size="28" letter-spacing="1" fill="#ffffff">Auf der Suche nach Erträgen?</text> </g> <g id="text02"> <text x="56" y="54" font-family="Lora" font-size="28" letter-spacing="1" fill="#ffffff">Nutzen Sie jetzt Aktiendividenden.</text> </g> <g id="i"> <path fill="#FFFFFF" d="M32.823,0.919H13.971v17.254h18.852V0.919z M33.142,77.925v-54H6.941v10.864h7.349v43.136H6.94v11.087 h32.912V77.925H33.142z"/> </g> <g id="Frame"> <polygon fill="#898989" points="1,89 1,1 728,1 728,0 0,0 0,89.941 728,89.941 728,89 "/> </g> <script type="text/javascript"> <![CDATA[ (function(){ var smallTxt = document.getElementById("smallTxt"), text01 = document.getElementById("text01"), text02 = document.getElementById("text02"), i = document.getElementById("i"), tl = new TimelineMax( { repeat: -1, repeatDelay: 5, onUpdate: showTime } ); function showTime(){ //console.log(tl.time()); } tl.set([text01, text02, i], {opacity:0}); tl.to(text01, 1, { opacity: 1 }, "+=2") .to(text01, 1, { opacity: 0 }, "+=2") .add("label1") .to(text02, 1, { opacity: 1 }, "label1") .to(i, 1, { opacity: 1 }, "label1") .to(smallTxt, .5, { opacity: 0 }, "label1"); }()); ]]> </script> </svg> Now - at last - my question: Is there a possibility to sychronise these two banners? And: sometimes I get a error-message: net::ERR_CONTENT_LENGTH_MISMATCH Does somebody know what the server is trying to tell me??

I pasted the wrong URL in the last message. Here is the correct one. But it's just the adapted timing for the blinking eyes... so not much to see http://codepen.io/anon/pen/BNePgy

Hey, great solutions! Thank you very much, Diaco and Carl! I'm using Carls solution, because - for me, as a No-Coder - it's somehow more readable. I adapted the timing it a little bit to make the blinking eyes look more natural. I have to study Diaco's solution in depth, so that I understand how it's working... http://codepen.io/anon/pen/zGQLbP

We are just trying to convert our clients Flash-Animations to GSAP. You can see a part of it in the Codepen URL. I used a Yoyo-Animation to make the eyes blink. But to make it feel more natural, I want some variations in the blinking. The time between the blinks is now at one second. How can I achieve these variations, so that ,for example, one time it takes 1 second, the next time it takes 2 seconds and so on. How can I achieve this? Thx in advance!

Thank you very much Carl! Simple question, simple answer But I'm new to this - and was trying a 1.000 things and didn't get it to work! Thx again!

Hi, I'm trying to make a very basic animation: two labels enter the banner from the left side, stop on a specific position and then fade out. (See Codepen) This animation should repeat three times - but the third time without fadeout. How can I create this simple animation? Thx in advance, Chris