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.
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.
<div id="clouds"></div> |
// 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 | |
}); | |
}); |
<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> |
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; | |
} |