使用 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

尝试用 backgroundPosition

替换 background_position

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

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

使用 gsap 动画背景位置

Animate background position using gsap

javascript

jquery

gsap