使用 gsap 为背景位置设置动画

Question

我有描述环境的大 svg 图片，并尝试创建循环，从左到右移动图片：

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();

没有 javascript 错误，但什么也没有发生。我是 gsap 的新手，请告诉我这里出了什么问题？

Answer 1

尝试将background_position 替换为backgroundPosition

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

顺便说一句，您也可以将选择器直接传递给TweenMax.to 所以tl.to(".animation-wrapper",...)