Creating a section transition

Hey,

I was wondering if someone knew how I could create a page transition like the one in the link I included below. The effect I have been trying to create (but failing) is when you do a short scroll of your mouse (or press the up/ down arrow on your keyboard) the view-port jumps between static sections.

Anyone know how I might accomplish this?
Thanks!


Site refrence: LINK

Hello @Maydris

You can find what you’re looking for here:

It is called fullpage.js

Awesome, thank you @aaronocampo ! I should have just enough coding knowledge to make that work.

I was wondering though if you might also know of something similar (or a way to do it in webflow interactions).

This sites nav (press the center icon) possesses a similar effect. Do you know of of a way to make this?

(meaning the inside of the nav)

Wow! Those are amazing site animations. From my point of view it can be done, it will require lot of work but it can be done.

@aaronocampo I agree, their site is pretty phenomenal! The difficulty in creating the menu interaction so far has been getting elements to remain in place.

I tried setting it up with a section containing the elements in fixed positions rigged to move and hide; replacing it with the next element. The trigger was rigged to change the elements on page scroll position. I made the page length such that slight scrolls would exchange the elements, but obviously it did the things, but just scrolled through them, like scrolling down a page. I couldn’t work out how to get them to stick -> transition -> stick -> etc.

It might be more trouble than its worth, but I thought it would be neat if I could pull it off. No worries if you aren’t sure. I suppose this is more experimental than anything.

Have you tried percentages?

I think is quite tricky but if it’s worth it go for it, you can always learn something new on the road.