scroll animation like vertical slider or fullpage.js

[perfecti]

Hi, how can I fix my animation to make the scroll look like this slider?

 

 

See the Pen JjrMPMW by Speculant (@Speculant) on CodePen

[perfecti]

I tried to solve like this, delete scrolltrigger, and add wheel event

 

let section = 0;
const maxSection = 3

$container.addEventListener('wheel', (e) => {
    const direction = e.deltaY > 0 ? 1 : -1;
    e.preventDefault()

    if (scrollTween) return

    section += direction;
    console.log(section)

    if(section < 0) {
        section -= direction;
        return
    }

    if(section >= maxSection) {
        section -= direction;
        return
    }


    scrollTween = true;
    goToSection(section)
}, { passive:false })

its work, but how enable scroll after last section?

[GreenSock]

21 hours ago, perfecti said:

I tried to solve like this, delete scrolltrigger, and add wheel event

 

let section = 0;
const maxSection = 3

$container.addEventListener('wheel', (e) => {
    const direction = e.deltaY > 0 ? 1 : -1;
    e.preventDefault()

    if (scrollTween) return

    section += direction;
    console.log(section)

    if(section < 0) {
        section -= direction;
        return
    }

    if(section >= maxSection) {
        section -= direction;
        return
    }


    scrollTween = true;
    goToSection(section)
}, { passive:false })

its work, but how enable scroll after last section?

 

If you need some help, please provide a minimal demo and a GSAP-specific question and we'd be happy to take a look. 

 

That site does indeed look like it's not actually scrolling - it merely listens for wheel events and creates animations accordingly. If you want to actually scroll after the last section, you'll probably have to rework the logic because the page will either allow scrolling or not. So you'd probably need to build it with actual scrolling but override that in your "sections" and then when the user reaches the end, implement your logic so that it no longer overrides anything after a certain scroll position. Again, a minimal demo will go a long way to getting help. This certainly isn't a simple scenario - you'll need to .preventDefault() on wheel/scroll/touch/pointer events in various scenarios too. 

 

We really try to keep these forums focused on GSAP-specific questions, though, so you may not get a lot of "how do I build this whole thing" answers here since a lot of this is related to logic issues and handling native events, etc.

[perfecti]

2 hours ago, GreenSock said:

 

If you need some help, please provide a minimal demo and a GSAP-specific question and we'd be happy to take a look. 

 

That site does indeed look like it's not actually scrolling - it merely listens for wheel events and creates animations accordingly. If you want to actually scroll after the last section, you'll probably have to rework the logic because the page will either allow scrolling or not. So you'd probably need to build it with actual scrolling but override that in your "sections" and then when the user reaches the end, implement your logic so that it no longer overrides anything after a certain scroll position. Again, a minimal demo will go a long way to getting help. This certainly isn't a simple scenario - you'll need to .preventDefault() on wheel/scroll/touch/pointer events in various scenarios too. 

 

We really try to keep these forums focused on GSAP-specific questions, though, so you may not get a lot of "how do I build this whole thing" answers here since a lot of this is related to logic issues and handling native events, etc.

I thought maybe the scrolltrigger can do this behavior, but didn’t know how, so I turned here. I updated the code in the first post, it seems to work well now