Javascript 具有scrollmagic和动态子宽度的水平滚动

我在玩魔术。 我想包括水平滚动。子元素必须能够具有不同的宽度

我找不到任何适合我研究的东西。 有没有人为我实现过这个或可能的资源

---

我不喜欢用Javascript动态计算子元素的宽度。

首先需要创建两个主div

水平滚动容器和
滚动容器，然后包括子div：

    <div class="horizontal-scroll-container"> <!-- Will be the fixed main container on animation start --> 
       <div class="horizontal-scroll"> <!-- Will be the scrolling container that include the childs  -->
          <div class="scroll-child 1"> <!-- Then the childs (You can set the width that you want) -->
          <div class="scroll-child 2">
          <div class="scroll-child 3">
       </div> 
    </div> 

之后，您需要使用插件来实现这个示例

    //Create new scrollmagic controller
    var controller = new ScrollMagic.Controller();

    //Create horizontal scroll slide gsap function
    var horizontalSlide = new TimelineMax()
      .to(".horizontal-scroll", 3,   {x: "-65%"}); //Depends on the final width you want to scroll.

    // Create scrollmagic scene to pin and link horzontal scroll animation
    new ScrollMagic.Scene({
        triggerElement: ".horizontal-scroll-container", //Div that will trigger the animation.
        triggerHook: "onLeave", //The animation will start on leaving the .horizontal-scroll-container section.
        duration: "200%" //Scroll Duration, the amount of pixels you want to scroll to see the entire animation. 
    })
    .setPin(".horizontal-scroll-container")
    .setTween(horizontalSlide)
    .addIndicators() // add indicators (requires scrollmagic indicators plugin)
    .addTo(controller);

    //Create new scrollmagic controller
    var controller = new ScrollMagic.Controller();

    //Create horizontal scroll slide gsap function
    var horizontalSlide = new TimelineMax()
      .to(".horizontal-scroll", 3,   {x: "-65%"}); //Depends on the final width you want to scroll.

    // Create scrollmagic scene to pin and link horzontal scroll animation
    new ScrollMagic.Scene({
        triggerElement: ".horizontal-scroll-container", //Div that will trigger the animation.
        triggerHook: "onLeave", //The animation will start on leaving the .horizontal-scroll-container section.
        duration: "200%" //Scroll Duration, the amount of pixels you want to scroll to see the entire animation. 
    })
    .setPin(".horizontal-scroll-container")
    .setTween(horizontalSlide)
    .addIndicators() // add indicators (requires scrollmagic indicators plugin)
    .addTo(controller);