使用gsap制作背景位置动画

Animate background position using gsap

本文关键字：位置 动画 背景 gsap 使用      更新时间：2023-09-26

我有一张描述环境的大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的新手，请告诉我这里怎么了？

尝试用backgroundPosition 替换background_position

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

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

相关文章：