Tutorials or template on creating effects like the banner linked

This code better fits (smoothly)

this.cta1.addEventListener("click", function () { window.open(window.clickTag1) });

this.cta1.addEventListener("mouseover", ctaOver1.bind(this));

this.cta1.addEventListener("mouseout", ctaOut1.bind(this));

this.cta2.addEventListener("click", function () { window.open(window.clickTag2) });

this.cta2.addEventListener("mouseover", ctaOver2.bind(this));

this.cta2.addEventListener("mouseout", ctaOut2.bind(this));

this.cta3.addEventListener("click", function () { window.open(window.clickTag3) });

this.cta3.addEventListener("mouseover", ctaOver3.bind(this));

this.cta3.addEventListener("mouseout", ctaOut3.bind(this));

this.cta4.addEventListener("click", function () { window.open(window.clickTag4) });

function ctaOver1()

{

  cjs.Tween.get(this.cta1).to({scaleX:1.2, scaleY:1.2}, 400, cjs.Ease.backOut);

  this.cta2.alpha=0.4;

  this.cta3.alpha=0.4;

}

function ctaOver2()

{

  this.cta1.alpha=0.4;

  cjs.Tween.get(this.cta2).to({scaleX:1.2, scaleY:1.2}, 400, cjs.Ease.backOut);

  this.cta3.alpha=0.4;

}

function ctaOver3()

{

  this.cta1.alpha=0.4;

  this.cta2.alpha=0.4;

  cjs.Tween.get(this.cta3).to({scaleX:1.2, scaleY:1.2}, 400, cjs.Ease.backOut);

}

function ctaOut1()

{

  cjs.Tween.get(this.cta1).to({scaleX:1, scaleY:1}, 400, cjs.Ease.backOut);

  this.cta2.alpha=1;

  this.cta3.alpha=1;

}

function ctaOut2()

{

  this.cta1.alpha=1;

  cjs.Tween.get(this.cta2).to({scaleX:1, scaleY:1}, 400, cjs.Ease.backOut);

  this.cta3.alpha=1;

}

function ctaOut3()

{

  this.cta1.alpha=1;

  this.cta2.alpha=1;

  cjs.Tween.get(this.cta3).to({scaleX:1, scaleY:1}, 400, cjs.Ease.backOut);

}