如何使用 TimelineMax 和 ScrollMagic 插件来实现这个动画？

Question

我不太擅长 JavaScript，但我需要做这个动画才能完成工作。

需要实现on this website这样的动画。用牙刷和手机查看blue block“是什么让这成为世界的”。为了实现它，作者使用了插件TimelineMax和scrollMagic。

我设法用滚动修复了块，但我不知道下一步该怎么做.. 如何滚动#slider 块？

链接到Codepan。

$(document).ready(function() {

// scrollmagic

(function($) {

    var wh = window.innerHeight,
        $zone = $('#owlZone'),
        $slider = $('#slider'),
        $itemOne = $('#itemOne'),
        $itemTwo = $('#itemTwo'),
        $itemThree = $('#itemThree');
    var ScreenHeight = $(window).height();
    
    var ctrl = new ScrollMagic.Controller({
        globalSceneOptions: {
            triggerHook: 0,
            tweenChanges: true,
            duration: ScreenHeight
        }
    });
//create scene
     $("#owlZone").each(function(index){

            new ScrollMagic.Scene({
                triggerElement: this
            })
                .setPin(this)
                .addTo(ctrl);
    });

// animate phone
    var SMController1 = new ScrollMagic.Controller();

    // var tlm = new TimelineMax();
    // tlm.fromTo('#itemOne', 1, {x:0, y:0}, { x:0,  y:0    })
    //    .fromTo('#itemTwo', 2, {x:"0", y:0},   { x:0,  y:0  })
    //    .fromTo('#itemThree', 5, {x:0, y:0}, { x:0,  y:0    })

       // .to('.toushbrush-slider', 3, {opacity:0});
       // .fromTo('#slider', 2, {}, {});
       // .to('#slider', 2, {rotation:90, left:'50%'});

    var scene = new ScrollMagic.Scene({
                        triggerElement: "#owlZone",
                        duration: 1500, 
                        triggerHook: 0.2
    })
    // .setTween(tlm)
    .addIndicators()
    .setPin('#slider')
    .addTo(SMController1);


}) (jQuery);
 

});

.section-block-three {
  background: linear-gradient(to bottom right, #02050b 0, #0f204b 50%, #1c3b8b 100%);
  background-color: #1c3b8b;
  padding: 150px 0 100px;
  position: relative; 
  }

.mob-app__head h4 {
  font-size: 50px;
  font-family: "centrale_sans_light";
  position: relative;
  color: #fff;
  font-weight: 300; 
  }

.mob-app__head p {
  margin: 20px 0;
  color: #fff;
  font-size: 30px;
  line-height: 35px; 
  }

.mob-app__content p {
  line-height: 23px;
  color: #fff;
  font-size: 20px; 
  }

.mob-app__image {
  background-color: lime;
  -webkit-background-size: cover;
          background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  width: 135px;
  height: 549px; 
  }

.mob-app__store {
  margin-top: 100px; }
  .mob-app__store .app-store, .mob-app__store .google-play {
    -webkit-background-size: cover;
            background-size: cover;
    background-position: center center;
    width: 150px;
    height: 44px;
    display: inline-block; 
    }
  .mob-app__store .app-store {
    background-color: white;
    margin-right: 20px; 
    }
  .mob-app__store .google-play {
    background-color: purple; 
    }

.toushbrush-slider {
  overflow: hidden;
  height: 350px;
  margin: 100px 0 0 60px; 
  }

.toushbrush-slider__images {
  position: relative;
  }
  .toushbrush-slider__images .images__image-one, .toushbrush-slider__images .images__image-two, .toushbrush-slider__images .images__image-three {
    -webkit-background-size: cover;
            background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    width: 175px;
    height: 350px;
    display: inline-block;
    }
  .toushbrush-slider__images .images__image-one {
    background-color: red; 
    }
  .toushbrush-slider__images .images__image-two {
    background-color: green; 
    }
  .toushbrush-slider__images .images__image-three {
    background-color: yellow;
    }
  .toushbrush-slider__images .images__content {
    display: inline-block;
    width: 200px;
    vertical-align: top;
    margin: 50px 0 0 20px;
    }
    .toushbrush-slider__images .images__content p {
      color: #fff;
      line-height: 20px;
      font-size: 16px; 
      }

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="section-block-three" id="owlZone">
		<div class="container">
			<div class="row">
				<div class="col-md-5">
					<div class="mob-app__head">
						<h4>this is text<span></span></h4>
						<p><span>this is text</span> this is text</p>
					</div>
					<div class="mob-app__content">
						<p>this is text</p>
					</div>
					<div class="mob-app__store">
						<a href="#" class="app-store" alt="App Store"></a>
						<a href="#" class="google-play" alt="Google Play"></a>
					</div>
				</div>
				<div class="col-md-1">
					<div class="mob-app__image"></div>
				</div>
				<div class="col-md-6">
					<div class="toushbrush-slider" id="slider">
						<div class="toushbrush-slider__images" id="itemOne">
							<div class="images__image-one"></div>
							<div class="images__content">
								<p>this is textthis is textthis is textthis is textthis is textthis is textthis is textthis is text</p>
							</div>
						</div>
					  <div class="toushbrush-slider__images" id="itemTwo">
						<div class="images__image-two"></div>
						<div class="images__content">
							<p>this is textthis is textthis is textthis is textthis is textthis is textthis is textthis is text</p>
						</div>
					</div>
					  <div class="toushbrush-slider__images" id="itemThree">
						<div class="images__image-three"></div>
						<div class="images__content">
							<p>this is textthis is textthis is textthis is textthis is textthis is textthis is textthis is text</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
</section>

Answer 1

我使用了一些滚动插件，但在主要浏览器（从 IE 到 Safari）上的性能方面总是遇到困难。

我发现最好的方法是将事件处理程序绑定到滚动，请参阅 .scroll():

$( "#target" ).scroll(function() {
  globalScroll = $(window).scrollTop();
});

我将全局变量更新到最后一个位置，然后安装另一个超时处理程序：

setTimeout(function() {
    // set your object properties according to last scroll position
    // $('someobject').animate(...);
}, 200 /* experiment with timeout value for performance in all browsers */)

这很有帮助，因为实际处理是在主线程空闲时完成的，并且通过不为每个滚动事件值执行渲染来避免潜在的缓慢行为 - 用户甚至可能看不到。设计用于许多通用场景的插件总是会带来性能损失，因此通过学习根据您的特定需求定制代码将获得巨大的回报。

我知道我可能会得到一些反对意见，但我要走了：您应该尽可能多地尝试首先了解 Javascript 以及您的代码是如何工作的，因为您迟早会遇到麻烦。不幸的是，让某人在这里为您实施此功能只会在您的客户有小抱怨之前有所帮助。