190390af2f9464096389ad579efaaceb54bfef625a09e4cb0c651022ca538e07

Source Code:

/**
 Ad Council Texting 300x250 - An HTML banner
 @version v1.0.0
 @date 8-1-2019 at 
 */

bannerInit = function() {
  // bgExit = document.getElementById("background_exit_ad");

  anim()
}

anim = function() {
  console.log("HIT ANIM")
  container_ad = document.getElementById("container_ad")
  container_ad.style.opacity = 1

  var ease1 = Power1.easeOut
  var ease2 = Expo.easeInOut //Power4.easeInOut,
  var ease4out = Power4.easeOut
  t1 = new TimelineMax()

  t1.from(
    ["#f1-t1"],
    1,
    { ease: ease4out, opacity: 0, y: "+=10", delay: 0 },
    "+=0"
  )
  t1.from(
    ["#f1-t2"],
    1,
    { ease: ease4out, opacity: 0, y: "+=10", delay: 0 },
    "-=.8"
  )

  t1.to(
    ["#f1lineholder"],
    1.5,
    { ease: ease4out, width: "+=400", delay: 0 },
    "-=.4"
  )

 


  t1.to(
    ["#f1"],
    1,
    {
      onStart: function() {
        document.getElementById("f2").style.opacity = 1
        document.getElementById("f1-t1").style.opacity = 0
      
        document.getElementById("f1lineholder").style.opacity = 0
      },
      ease: ease4out,
      backgroundColor: "rgba(140, 198, 63, 1)",
      delay: 0,
      onComplete: function() {}
    },
    "+=1.25"
  )

  t1.from(
    ["#f2-t1"],
    1,
    { ease: ease4out, opacity: 0, y: "+=10", delay: 0 },
    "-=.8"
  )
  t1.from(
    ["#f2-t2"],
    1,
    { ease: ease4out, opacity: 0, y: "+=10", delay: 0 },
    "-=.8"
  )
  t1.from(
    ["#f2-t3"],
    1,
    { ease: ease4out, opacity: 0, y: "+=10", delay: 0 },
    "-=.8"
  )


  t1.to(
    ["#f1"],
    1,
    {
      onStart: function() {
        document.getElementById("f3").style.opacity = 1
        document.getElementById("f2").style.opacity = 0
       // document.getElementById("f2-t2").style.opacity = 0
       // document.getElementById("f2-t3").style.opacity = 0
       // document.getElementById("f2-t4").style.opacity = 0
       // document.getElementById("f2lineholder").style.opacity = 0
      },
      ease: ease4out,
      backgroundColor: "rgba(214, 178, 208, 1)",
      delay: 0,
      onComplete: function() {}
    },
    "+=1.25"
  )

  t1.from(
    ["#f3-t1"],
    1,
    { ease: ease4out, opacity: 0, y: "+=10", delay: 0 },
    "-=.8"
  )

  t1.from(
    ["#f3-t1b"],
    1,
    { ease: ease4out, opacity: 0, y: "+=10", delay: 0 },
    "-=0"
  )


 

  t1.from(
    ["#flower"],
    1,
    { ease: ease4out, opacity: 0, transformOrigin:"40% 50%", scale: 1.2, delay: 0 },
    "-=0"
  )
 

  t1.to(
    ["#f1"],
    1,
    {
      onStart: function() {
        document.getElementById("f4").style.opacity = 1
        document.getElementById("f3-t1b").style.opacity = 0
        //document.getElementById("f3-t1").style.opacity = 0
        document.getElementById("flower").style.opacity = 0
      },
      ease: ease4out,
      backgroundColor: "rgba(140, 198, 63, 1)",
      delay: 0,
      onComplete: function() {}
    },
    "+=1.25"
  )

  t1.from(
    ["#f4-t1"],
    1,
    {
      onStart: function() {
        document.getElementById("logos").style.opacity = 1
       // document.getElementById("f3-t4").style.opacity = 1
      },
      ease: ease4out,
      opacity: 0,
      y: "+=10",
      delay: 0
    },
    "-=.8"
  )
  t1.from(
    ["#f4-t2"],
    1,
    { ease: ease4out, opacity: 0, y: "+=10", delay: 0 },
    "-=.8"
  )

  t1.from(
    ["#cell"],
    1,
    { ease: ease4out, opacity: 0, transformOrigin:"50% 50%", scale: 1.2, delay: 0 },
    "-=.8"
  )



  t1.to(
    ["#f1"],
    1,
    {
      onStart: function() {
        document.getElementById("f5").style.opacity = 1
        document.getElementById("f4").style.opacity = 0
        document.getElementById("f3").style.opacity = 0
      },
      ease: ease4out,
      backgroundColor: "rgba(0, 174, 239, 1)",
      delay: 0,
      onComplete: function() {}
    },
    "+=1.25"
  )

  t1.from(
    ["#f5-t1"],
    1,
    { ease: ease4out, opacity: 0, y: "+=10", delay: 0 },
    "-=.8"
  )
  t1.from(
    ["#f5-t2"],
    1,
    { ease: ease4out, opacity: 0, y: "+=10", delay: 0 },
    "-=.8"
  )

  t1.from(
    ["#dumbells"],
    1,
    { ease: ease4out, transformOrigin:"40% 60%", opacity: 0, scale: 1.2, delay: 0 },
    "-=.8"
  )




  t1.to(
    ["#f1"],
    1,
    {
      onStart: function() {
        document.getElementById("f6").style.opacity = 1
        document.getElementById("f5").style.opacity = 0
      },
      ease: ease4out,
      backgroundColor: "rgba(252, 238, 33, 1)",
      delay: 0,
      onComplete: function() {}
    },
    "+=.5"
  )




  t1.from(
    ["#f6-t1"],
    1,
    { ease: ease4out, opacity: 0, y: "+=10", delay: 0 },
    "+=0"
  )
  t1.from(
    ["#f6-t2"],
    1,
    { ease: ease4out, opacity: 0, y: "+=10", delay: 0 },
    "-=.8"
  )

  t1.to(
    ["#f6lineholder"],
    1.5,
    { ease: ease4out, width: "+=400", delay: 0 },
    "-=.4"
  )

  t1.to(
    ["#f1"],
    1,
    {
      onStart: function() {
        document.getElementById("f6").style.opacity = 0
       // document.getElementById("f5").style.opacity = 0
       document.getElementById("logos").style.opacity = 0
       document.getElementById("f6").style.opacity = 0
      },
      ease: ease4out,
      backgroundColor: "rgba(140, 198, 63, 1)",
      delay: 0,
      onComplete: function() {}
    },
    "+=1.25"
  )




 

  t1.from(
    ["#alltogether"],
    2,
    {
      onStart: function() {
  

        document.getElementById("logos").style.opacity = 0
        document.getElementById("f6").style.opacity = 0
        document.getElementById("finalframe").style.opacity = 1
      },
      ease: ease4out,
      opacity: 0,
      delay: 0
    },
    "-=.75"
  )

  t1.to(
    ["#alltogether"],
    2,
    {
      onStart: function() {
 

     
      },
      ease: ease4out,
      x:"-=190",
      delay: 0
    },
    "-=.75"
  )

  t1.from(
    ["#forinfo"],
    2,
    {
      onStart: function() {
        

     
      },
      ease: ease4out,
      opacity:0,
      delay: 0
    },
    "-=.75"
  )


}