Streaming live at 10am (PST)

Hey Webflow - Section Transitions

Hello everyone! I’m working on a project, but I can’t find any information on the following ;

I want to create a Nav-Bar that instead of changing pages, it slides the section and replaces the old one. Is this possible?

(Screen capture - bb92a17cbdd429301d4dc6f83ae7ffbc - Gyazo)

More Clear Explanation - instead of the entire page, if I clicked for instance “About Me” on the Navigation - The “Process” section will change to “About Me”, leaving the rest of the information on the page.

1 Like

@Elogetic

You may want to try delay page transition.

Embed code at the end of your <’/body> tag

<!-- Start .onClick delay transition  -->
<script>function delay (URL) {setTimeout( function() { window.location = URL }, 850 );}</script>
<!-- End .onclick delay transition -->

After embedding the code <’/body> tag, attribute your buttons / links as external url:
image

You can replace the ‘850’ with however many miliseconds you’d want your transition event to be.

In my particular usecase I have a page_loader grow in serve as my transition, which is exactally 850ms image

Then I assigned all meny with the same class .NB01_nav_link for page transitions: image

For nav links I did not want to initiate page transitions, I named it .NB01_nav_link_static or somthing else.

For links with .NB01_nav_link_static or somthing else, I use the regular link Page or link external function
image

Make sure to attribute onclick transition IX for all your buttons with the link delay transition attribute.

Since my Page Load IX2 uses the same page load frame, the transitions are seamless.
Set up your Transition Load Init on 'When Page Starts loading: image

image

(![image|349x300](upload://oSXjgb56ObPQFqW2ued6tJudOvi
.png)

I use this for seamless transitions between pages on one of my projects.

Then on the buttons, you;d want to create a transition slide.

See the folloing about IX2 transitions for tutorial: How to build page transitions in Webflow | Webflow Blog

Good luck!!