Streaming live at 10am (PST)

Creating a section transition


#1

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


#2

Hello @Maydris

You can find what you’re looking for here:

It is called fullpage.js


#3

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)


#4

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.


#5

@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.


#6

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.