Center section on smooth scroll

[thangbe]

Hi guys!

I’m trying to center each section in the middle of the screen when user scroll through the page.
I did read the topic: https://discourse.webflow.com/t/center-a-section-on-smooth-scroll/1495 and did add a new custom attribute called data-scroll and set its value to mid for each section. But it doesn’t help.

Here is my site Read-Only: https://preview.webflow.com/preview/4pixos-version-2?preview=de6af0d0cd2dacb568447a70578cc76c

Any suggestions?
Thank you.

[garymichael1313 (G.J.)]

Did you add an ID to each element that you’re targeting?

[thangbe]

I didn’t but after reading your reply, I’ave add ID to each section.
However, it didn’t work neither.

Anythings else that I should try?

[effixx (Anthony)]

@thangbe I think I’m trying to do the same thing and the difference with the other thread’s reference is that it demonstrates how to align the smooth scroll target to centered on the element but what we want to do is make the smooth scroll activate on mouse scroll rather than a clicked anchor. Kinda like this, right? http://www.jackdecaluwe.com

[garymichael1313 (G.J.)]

Yes good question @effixx… @thangbe is the: http://www.jackdecaluwe.com what youre trying to accomplish?

[thangbe]

Yes, it is.

@callmevlad since you are an expert on this scroll issue, could you take a look at the website http://www.jackdecaluwe.com and give us some advise?

Thank you a lot!

[garymichael1313 (G.J.)]

Hi @thangbe I like that site effect too… Currently the only way to “auto scroll to a section” is with a click trigger… To use a scroll trigger you will need a bit of custom code. There have been discussions on this:

How to scroll to section?

I will be making my sections so they fit inside a screen width and height, when I scroll down a new section will start. I would like to create an action, that when I scroll the mouse, the next section comes up to the top. Is there a way to do this in webflow?

Fullpage.js scroll effect

Is it possible to implement the single scroll navigation like this?

GitHub - alvarotrigo/fullPage.js: fullPage plugin by Alvaro Trigo. Create...

Now these are slightly old discussions but they can still be deployed with a little snippet insertion.

[thangbe]

Hi @garymichael1313

I sincerely appreciate you taking the time to look up the forum and send me the discussions. Thank you so much.

Absolutely will try these and I’ll let you know if it works with me.

Good day!

[garymichael1313 (G.J.)]

@thangbe … no problem have a great weekend!

[vincent (Vincent Bidaux)]

I think the data-scroll=midthing doesn’t work anymore.

I had it working on this demo I’m sure (link to green section)

http://inb4.webflow.io/menus-smooth-scroll-stage

[garymichael1313 (G.J.)]

@vincent … I don’t think on the body does either… I tried it a number of ways to no avail.

[vincent (Vincent Bidaux)]

But for what you look to do, you can place dummy elements (empty absolute divs) as targets.

[garymichael1313 (G.J.)]

The data-scroll-time on the body. That doesn’t work anymore I don’t think.