LarsFinley

Thanks for your help OSUblake! I ended up watching some tutorials and hacked it all together. Here is my final solution.. var tl = new TimelineMax({ paused: true, repeat: -1 }); tl.fromTo("#pic1", 30, { ease: Power0.easeNone, x: -300}, { ease: Power0.easeNone, x: -2200}); $('.jumbocolor').mouseenter(function() { tl.play(); }); $('.jumbocolor').mouseleave(function() { tl.stop(); });

Yes, super simliar to your example. However when I tried it like your example it only rendered 600px of my image.

So, I'm totally new here and probably haven't figured out the search option well enough so please don't kill me Well I have a banner image that is 1800px wide 200px tall. I want it to scroll right to left through a container that is 600px wide by 200px tall. I also want to to repeat when it finishes its path through the container. I have it to the point where it sliding in and getting to the end of the 600px wide container and then it restarts at the beginning. thanks for your help, Complete Newbie. also this is in React.js, dont know if that matters. here is my code.... The id="pic1" is referring to the picture in my css file <div className="cd-scrolling-bg cd-color-2"> <div className="jumbotron"> <div className="row"> <div className="col-md-6"> <h2> A brief personal History </h2> </div> <div id="pic1" className="col-md-6"> </div> </div> </div> </div> this is my TweenMax script... <script> TweenMax.staggerFrom(['#pic1'], 8, {ease: Power0.easeInOut, opacity: 1, x: 1500, repeat: -1}, .5); </script> and here is the pic1 css... #pic1 { display: inline-flex; overflow: hidden; position: center; height: 200px; background-image: url('./picture/pic1.jpg'); }