Jump to content


Synchronising two Banners

Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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 :D

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">
        <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"/>
<g id="BGD">
    <rect fill="#8ABD26" width="728" height="90"/>
<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 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 id="text02">
    <text x="56" y="54" font-family="Lora" font-size="28" letter-spacing="1" fill="#ffffff">Nutzen Sie jetzt Aktiendividenden.</text>
<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 id="Frame">
    <polygon fill="#898989" points="1,89 1,1 728,1 728,0 0,0 0,89.941 728,89.941 728,89 	"/>
<script type="text/javascript">
    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(){

    tl.set([text01, text02, i], {opacity:0});
    tl.to(text01, 1, { opacity: 1 }, "+=2")
    .to(text01, 1, { opacity: 0 }, "+=2")
    .to(text02, 1, { opacity: 1 }, "label1")
    .to(i, 1, { opacity: 1 }, "label1")
    .to(smallTxt, .5, { opacity: 0 }, "label1");

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

Link to comment
Share on other sites

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



  • Like 1
Link to comment
Share on other sites



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();


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.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.