Integration with GSAP ScrollTrigger

[ashehzadgec]

Integration with GSAP ScrollTrigger

[ayamflow]

Hello!
Thanks for the feedback.

1 - I'll think about adding demos for common use cases.
2 - it's up to you to smooth or not the scroll delta. By default it just copies what the mouse is sending.
3 - I have not used ScrollTrigger, but after a quick look at the docs it looks like you should be able to set the ScrollTrigger scroll value to sync with your virtual-scroll. Something like ScrollTrigger.scroll(y) where y is your virtual-scroll value.
4 - I am not sure what you mean - each page should have their own virtual-scroll instance, not a global one for the whole site. You can also enable/disable each instance by calling .on/.off

[ashehzadgec]

Thanks for replying back. Here is my reply with reference to the points above in your reply.

2- How I can enable smooth?.
4- I was talking about ajax page loading or single-page application using routers. And in that case, I will have to destroy the current page scroll instance and then reinitiate the scroll instance when the next page dom is loaded or in the second scenario, I will just update the scroll instance when the next page dom is loaded. I hope that makes sense but in either situation, I don't see the options in docs for the scroll.update() or destroy, etc like locomotive scroll is doing.

I love smooth scroll and I have some libs in my code cupboards and that's the reason I gave yours a try and gave my feedback to you.

Regards,
ShehzadAsif
https://www.shehzadasif.com/

[ayamflow]

To smooth the scroll value, you can use a simple easing like so:

const scroller = new VirtualScroll()
let smoothY = 0
scroller.on(event => {
    smoothY += (event.y - smoothY) * 0.1;
    wrapper.style.transform = `translateY(${smoothY}px)`
})

There is a .destroy() method that you can call when destroying the current page. Then create a new virtual-scroll for the new page.

[ashehzadgec]

thanks

…

On Wed, Aug 11, 2021 at 10:34 PM Florian Morel ***@***.***> wrote: To smooth the scroll value, you can use a simple easing like so: const scroller = new VirtualScroll()let smoothY = 0scroller.on(event => { smoothY += (event.y - smoothY) * 0.1; wrapper.style.transform = `translateY(${smoothY}px)`}) There is a .destroy() method that you can call when destroying the current page. Then create a new virtual-scroll for the new page. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#24 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/APQYRBRMYGVUMJ4CTOBN4FLT4KYD5ANCNFSM5BXGFIPA> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&utm_campaign=notification-email> .

[dzcpy]

Does it work well?