Scroll anchor animation triggered by scroll into view

Design help Animations & Interactions
1

Hello guys,

I’m trying to make something that maybe is simple but for me gets tricky.

I have a Hero Header that is 100VH, I want on user scroll down, that the page will auto scroll down (with ease in out animation) to the next section under (Page_Content) until the Hero Header is fully out of view.
And reverse on scroll up.

How can I create scroll anchors and “ease in-out” scroll to them when let’s say a section scroll into view?
And is it the right way to do this?

In the preview link go to CMS page “Projects Template” for the page i’m talking about.
Already tried a work around with interactions, but then it leaves me with all my content at -100VH and a big gap at the bottom of my page. And doesn’t work on scroll up…

Thanks in advance!

Here is my public share link: LINK
(how to access public share link)

1 Like
2

Anybody can help please? I’m stuck there.

1 Like
3

Hello @Philemon

So you want to achieve something like fullpage.js? See the effect here > http://fullpage-js-speed.webflow.io/

Scrolling section per section.

Piter :webflow_heart:

4

Yes that’s it, only I also like to do decide when to do it.
My page will be a mix of 100VH sections and longer ones that need a regular scrolling.

Is there a way to achieve this in webflow only?
Thanks.

1 Like
5

Nut sure. I’m using a js code and it’s not hard. You can clone and explore here > Full Page js speed - Webflow

Feel free to reach out if you want some help :webflow_heart:

6

Thanks, I guess it’s time to switch to paid Webflow, despite I don’t have much money to spend at the moment, having a nice portfolio should bring more clients and therefor money :).

2 Likes
7

Absolutely! If you want to make money you need to invest money.

Have fun :webflow_heart:

1 Like
8

So I did upgrade to paid. Now I copied the custom script, what else do I have to do?
Is it important that fullpage-wrap contain only sections named “section”?

My hero is a video BG and there is alos my nav and the footer.

1 Like
9

No, they can be with different classes.

Do you have time for a fast hangouts voice chat? Talking will be easier :smile: