Auto Latch to Next Section on Scroll

Ask the community
, ,
1

Hi all

After scrolling through one section, I want the next section to jump to the top of the screen when it’s already, say, 50% in the screen.
So the lazy scrollers out there won’t have to actually scroll that remaining 50%, cuz it’s that in-between-sections zone that isn’t interesting enough…

When reaching 50% of the vh - the site latches the section to the top.

Can it be done in Studio ?
Haven’t tried anything yet, except browsing the web about it. I have no idea how to go about doing such thing

Thanks :slight_smile:

2

have a look at this tutorial from Studio II to see if it will suit

3

lol

I actually watched it already, and tried it.
But for some reason the slider won’t snap, even though I configured everything exactly like in the tutorial.
A bug maybe ?

4

I havnt had time to test this tutorial yet.

5

So the snapping did work after a little tweaking

but not only it’s very inelegant for complex sections, it also doesn’t quite do it for me.
My first section is 200vh high and is sticky to the top so I can have some scroll animations in it. The next section is just whatever, doesn’t matter…

Thing is, I can’t make anything within the slider to behave as sticky. Even when applying sticky on a container within the slider, it just keeps on scrolling and the elements go out of the screen.

Anyone knows if I can code this desired snappy behavior between sections?

6

Been trying to do this with code, but no success..

$w.onReady(function () {
    $w('#contactSection').onViewportEnter(() => {
            console.log("Viewport entered");
            $w('#contactSection').scrollTo();
    })
});

The log says the trigger is fired twice every time the section enters the screen. What could be the reason for that?

What am I missing here?