city animation gsap

city-animation-gsap.markdown

city animation gsap

Template animation for survey, city theme

A Pen by Rodolfo on CodePen.

License.

index.html

<div id="wrapper">
  <div id="clouds"></div>
  <div id="ground"></div>
</div>

script.js

// wait until DOM is ready
document.addEventListener("DOMContentLoaded", function(event) {

  function ground() {

    var tl = new TimelineMax({
      repeat: -1
    });

    tl.to("#ground", 20, {
        backgroundPosition: "1301px 0px",
        force3D:true,
        rotation:0.01,
        z:0.01,
        autoRound:false,
        ease: Linear.easeNone
      });

    return tl;
  }

  function clouds() {

    var tl = new TimelineMax({
      repeat: -1
    });

    tl.to("#clouds", 52, {
      backgroundPosition: "-2247px bottom",
      force3D:true,
      rotation:0.01,
      z:0.01,
      //autoRound:false,
      ease: Linear.easeNone
    });
    
    return tl;
  }

  var masterTL = new TimelineMax({
    repeat: -1
  });
  
  // window load event makes sure image is 
// loaded before running animation
window.onload = function() {
  
  masterTL
  .add(ground(),0)
  .add(clouds(),0)
  .timeScale(0.7)
  .progress(1).progress(0)
  .play();

};
  
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>

style.css

html {
  height:100%;
  background:#63D0FF;
}

body{
  margin:0;
  padding:0;
  background:#63D0FF;
  height:100%;
}

#wrapper {
  position:relative;
  width:100%;
  height:100%;
}

#clouds{
  background:url("https://s3.amazonaws.com/assets-turistik/clouds.png") repeat-x 0 bottom #ACE6FF;
  width:100%;
  height:230px; /*190px*/
  min-height:230px;
  position:absolute;
  top:0;
  left:0;
  z-index:1;
  -webkit-transform:translate3d(0,0,0.01);
  transform:translate3d(0,0,0.01);
}

#ground {
  background:url(" https://s3.amazonaws.com/assets-turistik/buildings.png") repeat-x 0 0 transparent;    
  position: absolute;
  bottom: 0;
  left: 0;
  z-index:2;
  width: 100%;
  height: 192px;
  min-height:192px;
  border:0 none transparent;
  outline:0 none transparent;
  -webkit-transform:translate3d(0,0,0.01);
  transform:translate3d(0,0,0.01);
  will-change: transform;
}

test.markdown

test

A Pen by Rodolfo on CodePen.

License.

Template animation for survey, city theme