Animate background position using gsap

Question

I have big svg picture which describes environment, and trying to create loop, moving picture left to right:

html:

<div class="animation-wrapper" id="scroller" style="position:absolute">
</div>

css:

.animation-wrapper{
    top: -0;
    left: -10000px;
    width: 100%;
    height: 100%;
    @include background-cover("../pictures/animation-background.svg");
    background-position: -10000px 0;
    margin: 0 auto;
}

jsap:

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

    headerBackgroundContainer = jQuery(".animation-wrapper");

    function backgroundMoveInitiate()
    {
      tl.to(headerBackgroundContainer, 40, {background_position: 0, ease:Linear.easeNone});
    }

    backgroundMoveInitiate();

There is no javascript errors, but nothing happens at all. i am new in gsap, please tell me what's wrong here?

Answer 1

try replacing background_position with backgroundPosition

  tl.to(headerBackgroundContainer, 40, {backgroundPosition: 0, ease:Linear.easeNone});

btw you can also pass selector directly to TweenMax.to so tl.to(".animation-wrapper",...)