[Synchronising two Banners]

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.

[Synchronising two Banners]

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:

 

See the Pen OVeJyB by anon (@anon) on CodePen

See the Pen GJbRaa by anon (@anon) on CodePen

 

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??

See the Pen RPzwYq by anon (@anon) on CodePen

[Yoyo Animation with variations in timing]

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

 

See the Pen BNePgy by anon (@anon) on CodePen

[Yoyo Animation with variations in timing]

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...  

 

See the Pen zGQLbP by anon (@anon) on CodePen

[Yoyo Animation with variations in timing]

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!

 

See the Pen xGNzaO by anon (@anon) on CodePen

[Repeating Timeline question]

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!

[Repeating Timeline question]

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

 

 

See the Pen MwdmWz by anon (@anon) on CodePen