ayamflow/virtual-scroll

Integration with GSAP ScrollTrigger

Closed this issue · 5 comments

ashehzadgec commented

Hi,

I tried to implement it with gsap, following are my feelings:
1- There is no demo.
2- It felt quite choppy or not smooth at all. It's like I am jumping just 120px.
3- How to integrate it with GSAP and ScrollTrigger.
4- There is a destroy event to call on page switch when using SPA. But I don't see the option to update it or enable it for the next page like with other libraries.

Regards
Shehzad Asif

ayamflow commented

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 commented

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 commented

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 commented
dzcpy commented

Does it work well?