Попытка сделать медленную прокрутку, но кажется, что gsap не может обработать столько событий за прокрутку - PullRequest
Новая
       26

Попытка сделать медленную прокрутку, но кажется, что gsap не может обработать столько событий за прокрутку

0 голосов
/ 09 января 2020

Мне нужно замедлить скорость прокрутки на странице, чтобы лучше анимировать элементы (например, одно событие колеса на моем ноутбуке делает deltaY = 378, и слишком сложно рассчитать правильное смещение для запуска анимации). Я решил отключить прокрутку с помощью e.preventDefault () и e.returnValue = false. Это работает хорошо, но иногда страница начинает «прыгать», когда вы пытаетесь прокрутить. 

import { gsap } from 'gsap'
import { ScrollToPlugin } from 'gsap/src/ScrollToPlugin.js'

gsap.registerPlugin(ScrollToPlugin);


export default {
    data: () => {
        return {
            currentSlide: 0,
            offsetTop: 0,
            pageHeight: 0,
            wheelCounter: 0,
            scrollCounter: 0,
            slides: [
                {
                    id: 'ad1',
                    bg: '/hall.jpg'
                },
                {
                    id: 'ad2',
                    bg: '/home.jpg'
                },
                {
                    id: 'ad3',
                    bg: '/hall.jpg'
                },
                {
                    id: 'ad4',
                    bg: '/home.jpg'
                }]
        }
    },
    methods: {
        checkScroll (event) {
            event.returnValue = false
            event.preventDefault()
            let sliderGap = 300
            let current, next
            let tl = gsap.timeline()
            this.wheelCounter += parseInt(event.deltaY / 5)
            if (this.wheelCounter < 0) this.wheelCounter = 0
            gsap.to(window, {scrollTo: this.wheelCounter, duration: 0.2})
            current = parseInt(this.wheelCounter / sliderGap)
            if (current > 4) current = 4
            if ((current != this.currentSlide) && (current < 4)) {
                document.getElementById('main').style.backgroundImage = 'url("' + this.slides[current].bg + '")'
                tl.to('#' + this.slides[this.currentSlide].id, {x: 20, opacity: 0, duration: 0.3})
                tl.to('#' + this.slides[current].id, {x: -20, opacity: 1, duration: 0.7})
                this.currentSlide = current
            }
            if (window.scrollY > 300) {
                tl.to('#about_header', {x: 0, opacity: 1, duration: 0.7})
                tl.to('#about_description', {y: 0, opacity: 1, duration: 0.7}, 0.5)
                tl.to('#about_picture', {x: 0, opacity: 1, duration: 1}, 0.5)
            }
            if (window.scrollY > 500) {
                tl.to('#left_offer', {y: 0, opacity: 1, duration: 1}, 0)
                tl.to('#right_offer', {y: 0, opacity: 1, duration: 1}, 0.5)
                tl.to('#offers_description', {x: 0, opacity: 1, duration: 0.5}, 1.5)
            }
        }
    }
}

Я думал о добавлении пакета vue -observe-visibility и выполнении анимации через него. Но свиток тоже должен быть плавным, и я не знаю, как мне это сделать.

...