элемент pin со скроллмагией, связанной с div - PullRequest
Новая
       12

элемент pin со скроллмагией, связанной с div

0 голосов
/ 09 сентября 2018

Я создал простую анимацию с помощью ScrollMgic: вращение колеса при горизонтальной прокрутке страницы. Проблема в том, что при прокрутке страницы окна анимация выглядит плавной, тогда как при прокрутке только элемента div, внутри которого расположен элемент, анимация выглядит довольно «рывком». Я хотел бы скрыть прокрутку окна, оставляя только прокрутку div, сохраняя анимацию. Кто-нибудь знает почему и как решить эту проблему? Спасибо!

HTML-код:

HTML 

<div class="scrollcontainer">
        <div id="scrolldiv" class="scrolldiv">
            <div class="weel">
                <img id="weel" src="weel.png" alt="">
            </div>
        </div>
        <div id="trigger">
        </div>    
    </div>

CSS 

body {

}

.weel img {
    width: 100px;
}

#scrolldiv {
   height: 500px;
    width: 5000px;
    background: url(bgterritorio.jpg);
    position: relative;
}

.scrollcontainer {
    overflow-x: scroll;
    white-space: nowrap;
    position: relative;
}

JAVASCRIPT 

var controller = new ScrollMagic.Controller({vertical: false});

var tween = TweenMax.to("#weel", 1, {rotation: 1080, ease: Linear.easeNone});

var scene = new ScrollMagic.Scene({triggerElement: "#trigger", duration: 5000})
    .setTween(tween)
    .setPin("#weel", {pushFollowers: false})
    .addIndicators() // add indicators (requires plugin)
    .addTo(controller);

1 Ответ

0 голосов
/ 09 сентября 2018

Решено! Необходимо было сообщить ScrollMagic, к какому контейнеру относится анимация. В моем случае я просто добавляю: 

container: '.scrollcontainer'

к объекту контроллера

...