ScrollMagic - Как предотвратить запуск, когда div перемещается вниз и пересекает точку запуска - PullRequest
Новая
       23

ScrollMagic - Как предотвратить запуск, когда div перемещается вниз и пересекает точку запуска

0 голосов
/ 21 июня 2019

Я использую ScrollMagic, точка триггера находится в середине области просмотра. И я бы хотел, чтобы анимация запускалась в обоих направлениях (обратное: правда)

У меня проблема с перемещением div на 50px при срабатывании, это заставляет div подпрыгивать вверх и вниз.

Для этого простого примера у меня есть только два div с фиксированной высотой. Я хотел бы переместить второй Div вниз на 50px, когда он нажмет на курок.

Пожалуйста, смотрите полный код и CSS здесь: https://codepen.io/steve822/pen/EBWWeZ Чтобы смоделировать проблему, просто медленно пролистайте немного выше средней точки и остановитесь, когда она начнет прыгать. 

<div class="bluebox"></div>
<div class="my-div"></div> 

.bluebox {
  background: blue;
  height: 150px
}

.my-div {
    position: relative;
    top: 0px;
    background: tomato;
    height: 100px
}

.my-div.move-down {
    top: 50px;
    transition: top 1s;
}


var $j = jQuery.noConflict();

var controller = new ScrollMagic.Controller();

$j('.my-div').each(function() {
    new ScrollMagic.Scene({
            triggerElement: this,
            reverse: true,           

        })
        .setClassToggle(this, "move-down")          
        .addTo(controller);

});

Проблема возникает, если я наведу указатель мыши чуть выше середины области просмотра, div ожидаемо сместится вниз, ОДНАКО, он пересечет триггерную точку и удалит класс, заставляя div снова двигаться вверх и пересечь триггер на пути вверх, конечный результат - div, движущийся вверх и вниз без остановки.

Я ясно понимаю причину проблемы, но не очень уверен, как предотвратить это, если я хочу сдвинуть Div вниз. Спасибо !!

...