/ad-snippets

Contains personal necessary code snippets to produce an html5 ad.

html5-ad-components

Contains personal necessary code snippets to produce an html5 ad.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1"/>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="ad">
    <div id="hl"></div>
    <div id="sl"></div>
    <div id="logo"></div>
  </div>
  <script type="text/javascript">
  	// Place your animation here.
  </script>
</body>
</html>

CSS

body {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
  line-height: 1;
}
#ad {
  position:absolute;
  top: 0;
  left: 0;
  width: 300px;
  height: 250px;
  overflow:hidden;
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
}
.el {
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
}
#logo {
  z-index: 1;
  background-image: url('images/logo.png');
}
#hl {
  z-index: 2;
  background-image: url('images/hl.png');
}
#sl {
  z-index: 3;
  background-image: url('images/sl.png');
}

GSAP

Include the gsap library into your html file, specified by your adserver.

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>

Timelines & Animations

  function startAnim() {
  
    // Assets
    var $ad 		= $('#ad'),
    	$background	= $('#background'),
        
        tl = new TimelineMax();
        
    // GSAP Animation
    tl.add('01')
    .to($ad, .6, {opacity:1})
    
  }
  startAnim()

loops

    // Callabck function
    .addCallback( restart, "+=.2");
    
    // Restart the ad according to the desired loops
    function done() {
    	tl.restart();
    }
	
    // Loop Counter
    var i = 0

    // Loop function with Counter
    function restart() {
    	if (i < 1) {
    	    i++;
    	    TweenMax.to($ad, 1.3, {opacity:0, ease: Power3.easeInOut, onComplete:done},13.3);
    	} else {
	    tl.stop('end')
    	}
    }

onComplete function

    function youtFunction() {
  	tl.play(3)
    }

    TweenMax.from(element, 14, {opacity:0, onComplete:youtFunction});

hover events

    function handleHover() {
	TweenMax.to(... {...});
    }
    function handleOut() {
        TweenMax.to(... {...});
    }

    $ad.addEventListener("mouseover", handleHover);
    $ad.addEventListener("mouseout", handleOut);

merge timelines

    var masterTimeline = new TimelineMax({paused:true}),
               	   tl1 = new TimelineMax(),
                   tl2 = new TimelineMax();
		   
    //Merge timelines to master timeline
    masterTimeline.add([tl1, tl2]);
    
    window.onload = function(){
        masterTimeline.play();
    }

tools

anim panel

include it in your HTML:

<script type="text/javascript" src="http://sharedlibraries.danielhauchler.de/anim_panel.js"></script>

Create the AnimPanel, passing it your Timeline instance

<script>
  new AnimPanel(tl);
</script>

timeline duration

    //count animation duration
    var currentDuration = tl2.duration();
    console.log(currentDuration);

Clicktags

catcher utility

    if(this.getUriParams.clicktag) window.clicktag = this.getUriParams.clicktag;
    if(this.getUriParams.clickTag) window.clicktag = this.getUriParams.clickTag;
    if(this.getUriParams.clickTAG) window.clicktag = this.getUriParams.clickTAG;

sizmek

shared libraries

<script src="https://secure-ds.serving-sys.com/BurstingcachedScripts/libraries/jquery/1_11_3/jquery.min.js"></script>
<script src="https://secure-ds.serving-sys.com/BurstingcachedScripts/libraries/greensock/1_19_0/TweenMax.min.js"></script>

necessary includes

<script src="EBLoader.js"></script>
<script src="scripts.js"></script>

Google

shared libraries

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://s0.2mdn.net/ads/studio/cached_libs/tweenmax_1.19.1_92cf05aba6ca4ea5cbc62b5a7cb924e3_min.js"></script>```