使用ScrollMagic和GSAP水平滚动

Question

我有严重的问题，使水平滚动正常工作。你可以看到http://kodo.house/pr/的努力（向下滚动查看水平 - 有多个，那些砖工作更糟）。你可以看到总有从正常水平切换时的跳跃。任何想法怎么打呢？我将非常感谢所有帮助，谢谢！

这是代码，我希望你的想法如何工作的：

function initScroll(horizontal) {
    var $this = horizontal;
    var $thisId = $this.attr('id');

    $items = $this.find('.horizontal__item');
    var containerWidth = $items.outerWidth(true) * $items.length;
    $this.find('.horizontal__list').css({'min-width' : containerWidth, 'width' : containerWidth});

    var contentsWidth = $this.find('.js-horizontal-list').width()
                  - $this.find('.horizontal__heading').width()
                  - parseInt($this.find('.js-horizontal-container').css('padding-left'));

    if ((contentsWidth - 180) > 0) {
        var thisTween = new TimelineMax()
        .fromTo('#' + $thisId + ' .js-horizontal-container', 1, {x:  '0%'}, {x: -contentsWidth, ease: Linear.easeInOut});  // in from right

        thisScene = new ScrollMagic.Scene({
            triggerElement: '#' + $thisId,
           triggerHook: 'onLeave',
           duration: contentsWidth * 2
        })
        .setPin('#' + $thisId)
        .setTween(thisTween)
        .addTo(controller);
    } else {
        var paddingLeft = 
$this.find('.horizontal__container').css('padding-left');
        $this.find('.horizontal__container').css('padding-right', paddingLeft);
    }
    $this.find('.horizontal__list').addClass('horizontal__list--init');
}

Answer 1

就这一水​​平滚动效果https://codepen.io/gulnoor1/pen/xmPywb希望这有助于仍然这支钢笔。继承人从它的JS

var controller = new ScrollMagic.Controller();

var tl = new TimelineMax();

var elementWidth = document.getElementById('container').offsetWidth;

var width = window.innerWidth - elementWidth;

var duration = elementWidth / window.innerHeight * 100;

var official = duration + '%';

tl
.to('.container', 5, {x: width, ease: Power0.easeNone});

var scene1 = new ScrollMagic.Scene({
    triggerElement: '.container',
    triggerHook: 0,
    duration: official
})
.setPin('.container')
.setTween(tl)
.addTo(controller);

console.log(elementWidth);