EffectHub.com: your best source for gaming

Recommendation

More Effects...

TweenMax.ticker.fps(60);

var $gear = $("#gear"),
    $fanEmpty = $("#fan-empty"),
    $fanFull = $("#fan-full_1_"),
    $bellows = $("#bellows"),
    $bigLtBase = $("#light-base_1_"),
    $bigLtBulb = $("#bulb_1_"),
    $smLtBase = $("#light-base"),
    $smLtBulb = $("#bulb"),
    $filament = $("#filament"),
    $faucet = $("#faucet"),
    $bigLtBulb = $("#bulb_1_"),
    $smGlow = $("#glow"),
    $firefly1 = $("#firefly"),
    $firefly2 = $("#firefly_1_"),
    $firefly3 = $("#firefly_2_");

TweenMax.set("#firefly, #firefly_1_, #firefly_2_, #glow, #big-glow", { visibility:"visible" });

// the first scene
function sceneOne() {
  var tl = new TimelineLite();
  
  tl.add( "start")
  .to($smLtBase, 1, {fill:"rgb(108, 115, 103)", ease:Power2.easeOut}, "start+=1.5")
  .to($smLtBulb, 1, {fill:"rgb(191, 191, 131)", ease:Power2.easeOut}, "start+=1.5")
  .to($filament, 1, {fill:"rgb(242, 224, 138)", ease:Power2.easeOut}, "start+=1.5")
  .to($smGlow, 1, {opacity:0.5, ease:Circ.easeOut}, "start+=1.5")
  .to($smGlow, 4, {opacity:0.8, ease:Circ.easeOut}, "start+=3")
  .to($firefly1, 1.5, {opacity:1, ease:Elastic.easeOut}, "start+=3")
  .to($firefly1, 6, {
    bezier:{
      type:"soft", 
      values:[{x:10, y:30}, {x:-30, y:20}, {x:-40, y:10}, {x:30, y:20}, {x:10, y:30}],
      autoRotate:true
    },
  ease:Linear.easeNone, repeat:-1}, "start+=3")
  .to($firefly2, 1.5, {opacity:1, ease:Elastic.easeOut}, "start+=3.5")
  .to($firefly2, 6, {
    bezier:{
      type:"soft", 
      values:[{x:30, y:10}, {x:60, y:40}, {x:50, y:30}, {x:40, y:20}, {x:30, y:10}],
      autoRotate:true
    },
  ease:Linear.easeNone, repeat:-1}, "start+=3.5")
  .to($firefly3, 1.5, {opacity:1, ease:Elastic.easeOut}, "start+=4")
  .to($("#big-glow"), 1.5, {opacity:0.5, ease:Elastic.easeOut}, "start+=4")
  .to($firefly3, 6, {
    bezier:{
      type:"soft", 
      values:[{x:-10, y:5}, {x:-20, y:40}, {x:-50, y:30}, {x:-40, y:0}, {x:-10, y:5}],
      autoRotate:true
    },
  ease:Linear.easeNone, repeat:-1}, "start+=4")
  .to($bigLtBase, 2.5, {fill:"rgba(191, 191, 131, 0.3)", ease:SlowMo.easeOut}, "start+=3.5")
  .to($bigLtBulb, 2, {fill:"rgb(191, 191, 131)", ease:SlowMo.easeOut}, "start+=3.5")
  .fromTo($bellows, 2, {scale:1, ease:Back.easeOut}, {scaleY:0.75, y:10, repeat:-1, ease:Circ.easeIn}, "start")
  .to($gear, 4, {rotation:-360, repeat:-1, ease:Linear.easeNone, transformOrigin:"50% 50%"}, "start")
  .to($fanEmpty, 4, {rotation:360, repeat:-1, ease:Linear.easeNone, transformOrigin:"60% 53%"}, "start")
  .to($fanFull, 2, {rotation:360, repeat:-1, ease:Linear.easeNone, transformOrigin:"58% 50%"}, "start");
  
  return tl;
}

var master = new TimelineLite();
master.add(sceneOne(), "sceneOne");

//master.seek("scene1+=4");

CSS

html {
  background: #6c7367;
  /* Old browsers */
  background: -moz-radial-gradient(center, ellipse cover, #6c7367 0%, #3f3b40 77%, #261f26 100%);
  /* FF3.6+ */
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #6c7367), color-stop(77%, #3f3b40), color-stop(100%, #261f26));
  /* Chrome,Safari4+ */
  background: -webkit-radial-gradient(center, ellipse cover, #6c7367 0%, #3f3b40 77%, #261f26 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-radial-gradient(center, ellipse cover, #6c7367 0%, #3f3b40 77%, #261f26 100%);
  /* Opera 12+ */
  background: -ms-radial-gradient(center, ellipse cover, #6c7367 0%, #3f3b40 77%, #261f26 100%);
  /* IE10+ */
  background: radial-gradient(ellipse at center, #6c7367 0%, #3f3b40 77%, #261f26 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6c7367', endColorstr='#261f26',GradientType=1 );
  width: 100vw;
  height: 100vh;
}

.container {
  width: 100vw;
  height: 300px;
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/sd-bk4.svg") repeat-x;
}

svg {
  position: relative;
  opacity: 0.8;
  margin: 10px auto;
  display: table;
  width: 400px;
}

.no-svg .container {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/steampunk5.png");
  width: 472px;
  height: 374px;
  margin: 0 auto;
  display: table;
}

#firefly, #firefly_1_, #firefly_2_, #glow, #big-glow {
  visibility: hidden;
  opacity: 0;
}

.s0 {
  stop-color: #FFFFFF;
}

.s1 {
  stop-color: #FCEE91;
  stop-opacity: 0;
}

.s2 {
  stop-color: #FEFBE4;
  stop-opacity: 0.8;
}

.s3 {
  stop-color: #FDF5C0;
  stop-opacity: 0.6;
}

.s4 {
  stop-color: #FDF1A6;
  stop-opacity: 0.4;
}

.s5 {
  stop-color: #FCEF97;
  stop-opacity: 0.2;
}

#faucet {
  animation: faucet 4s linear infinite;
  transform-origin: 50% 50%;
}

.ff-glow {
  animation: stutter 4s linear infinite;
}

@keyframes faucet {
  25% {
    transform: scaleX(0);
    transform-origin: 50% 50%;
  }
  50% {
    transform: scaleX(1);
    transform-origin: 50% 50%;
  }
  75% {
    transform: scaleX(0);
    transform-origin: 50% 50%;
  }
}
@keyframes stutter {
  20% {
    opacity: 0.3;
  }
  30% {
    opacity: 1;
  }
  40% {
    opacity: 0.4;
  }
  50% {
    opacity: 0.7;
  }
  70% {
    opacity: 0.1;
  }
  80% {
    opacity: 0.5;
  }
}

HTML

A PHP Error was encountered

A PHP Error was encountered

Recommendation

A PHP Error was encountered

A PHP Error was encountered

Recommendation

Join Effecthub.com