GSAP Animate CSS background-position (just clouds)

gsap-animate-css-background-position-just-clouds.markdown

GSAP Animate CSS background-position (just clouds)

Helps answer a question in the GreenSock Forum: http://greensock.com/forums/topic/12694-which-is-the-best-way-to-animate-css-background-position-property/#

A Pen by Jonathan Marzullo on CodePen.

License.

index.html

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

script.js

// window load event makes sure image is // loaded before running animation
$(window).on("load", function() {

var tl = new TimelineMax({repeat:-1});
tl.to("#clouds", 30, {
    backgroundPosition: "-2247px 0px",
    //autoRound:false,
    ease: Linear.easeNone
});

});

scripts

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

style.css

body{
  margin:0;
  padding:0;
  background:#ACE6FF;
}

#clouds{
  background:url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/56901/bg-clouds.png") repeat 0 0 transparent;
  width:100%;
  height:190px;
}