Synchronising two Banners

[Kikovich]

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

[Carl]

hmm, not sure how to address all of this. Regarding your first CodePen not working it is because the TweenMax JavaScript is loading after the SVG is loaded and executed and your SVG includes code that depends on TweenMax being present.

 

To keep EVERYTHING inside the SVG you also need to put TweenMax in the SVG like this

 

http://codepen.io/GreenSock/pen/VLJwNE

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

[Dipscom]

Hi,

 

Is this a personal project or are you going to use this somewhere? In order to sync the banners, they will have to sit in the same page to begin with. I could not see in your posts a link to where you might have tried that. Did I miss anything?

 

If this is going to be a real world banner, it will depend on which ad platform you're using. Most of them have (all aI worked with) calls to use in order for them to communicate with each other.

 

For example: Flasktalking has a .talk() object that you can use.

 

If you are doing it just for the kicks of it, you might be able to accomplish it by having a holding page that loads both banners and in each of the banners, you would have an exposed method where you can tell the animation to start.

 

Something like:

 

Banner 1:

var Banner1 = function() {
var anim = new TimelineLite({paused:true});
}

Banner 2:

var Banner2 = function() {
var anim = new TimelineLite({paused:true});
}

Holder page:

onload = function() {
banner1 = new Banner1();
banner2 = new Banner2();

banner1.anim.play();
banner2.anim.play();

I'll see if I can put something up myself and test this that I am telling you here, maybe it will work, maybe not. I'll come and let you know.

[Dipscom]

Did a bit of digging around since you've mentioned you only just have started trying to code yourself.

 

This is a very short summary of how you would get something to work if you are serving both banners yourself. But that requires some understanding of JavaScript and iFrames. You might have to have a more in-depth read into them.

 

However, I have a feeling what you really need to know is what ad platform your ads will be in and check their API, that will probably be more efficient.

 

And, I think this should be moved into the Banners forum as this is not really general GSAP related, is it?