CODEWITHSUNDEEP
javascriptcssanimationgsapscrollmagic
kacpergalka
kacpergalka

Reputation: 263

Horizontal scrolling using ScrollMagic and GSAP

I have serious problems with making horizontal scroll work properly. You can see the efforts on http://kodo.house/pr/ (scroll down to see horizontal - there are multiple, those with tiles work worse). You can see there is always a jump when switching from normal to horizontal. Any ideas how to fight this? I will highly appreciate any help, thank you!

This is the code, I hope you get the idea how it works:

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');
}

Upvotes: 0

Views: 3254

Answers (1)

stnee spc
stnee spc

Reputation: 59

Made this pen on the horizontal scroll effect https://codepen.io/gulnoor1/pen/xmPywb hope this still helps. Heres the js from it

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);

Upvotes: 2

Related Questions