анимация падающих блоков (надо сделать ограничения на скролл)

Question

Есть такой код (будет чуть ниже), это анимация падения блоков. Дело в том, что у людей, использующих тачпады, возникают проблемы, когда они делают резкий жест прокрутки. (просто пролистываются все блоки), надо это как-то ограничить по типу 1 прокрутка - 1 падающий блок и не более, и не важно какой силы или амплитуды был этот жест. Пробовал разные способы, но так и не нашел подходящего :(

const stackSrc = [
    'images/cube2.svg',
    'images/cube3.svg',
    'images/cube4.svg',
]

const stacks = document.querySelectorAll('.stack');

const stackHolder = document.querySelector('.stack__container');

const stackCount = document.querySelector('.stack__count');
ScrollTrigger.create({
    trigger: '.stacks',
    pin: stackHolder,
    start: 'top 300px',
    end: 'bottom +=900px',
        // markers: true,
})

stacks.forEach((stack, index) => {
    ScrollTrigger.create({
        trigger: stack,
        start: 'top center',
        end: 'top center',
        // markers: true,
        onEnter: function () {
            stackHolder.dataset.slide = index + 1;
            stackCount.innerText = index + 1;
        },
        onEnterBack: () => {
            stackHolder.dataset.slide = index;
            if (stackCount.innerText > 0) {
                stackCount.innerText = index;
            }
        }
    })
})

Answer 1

По моему (я не утверждаю, что это лучший вариант) вам нужно использовать ScrollTrigger для каждого блока отдельно, чтобы ограничить прокрутку только конкретным блоком:

stacks.forEach((stack, index) => {

    // Определяем triggerElement как текущий блок .stack
    const triggerElement = stack;

    // Определяем endTriggerElement как следующий блок .stack,
    // если текущий блок не последний,
    // иначе используем stackHolder в качестве конечного триггера
    const endTriggerElement = index < stacks.length - 1 ? stacks[index + 1] : stackHolder;

    ScrollTrigger.create({

        // Используем triggerElement как точку начала триггера
        trigger: triggerElement,
        // Используем endTriggerElement как точку окончания триггера
        endTrigger: endTriggerElement,
        start: 'top center',
        end: 'bottom center',
        onEnter: function () {
            stackHolder.dataset.slide = index + 1;
            stackCount.innerText = index + 1;
            },
        onEnterBack: () => {
            stackHolder.dataset.slide = index;
            if (stackCount.innerText > 0) {
                stackCount.innerText = index;
            }
        }
    });
});

Но возникнут проблемы в случае, когда у вас фиксированное навигационное меню и пользователь кликает по ссылке в меню, это может вызвать некоторые проблемы. Придётся дорабатывать различные условия в ScrollTrigger и в навигации.

БЛОГ НА HUSL

анимация падающих блоков (надо сделать ограничения на скролл)

Ответы (1 шт):