Page transition animation from overlay menu

[thebergdesign (Cillian Sheahan)]

Hello,
I would like to create a page transition for when my site visitors switch between pages using my full page overlay menu. Currently, there is a sliding animation added to a hamburger menu icon which brings up the overlay menu but there is no page transition. I would like to have the same animation play in reverse to reveal the new selected page. Can anyone advise me on this?

---

Here is my public share link: https://preview.webflow.com/preview/the-berg-design?utm_medium=preview_link&utm_source=designer&utm_content=the-berg-design&preview=91c9062ddd3222d634b69dca1276b6da&pageId=5fde6b3c9e715145e8a7b954&mode=preview
(how to access public share link)

[ryang2723 (Ryan Gilden)]

I’m looking for this too. Can’t find it anywhere. I’ll let you know if I find anything

[miekwave (miek)]

@thebergdesign
@ryang2723

Follow instructions on this page:

How to build page transitions in Webflow | Webflow Blog

Here is reference code:

<!-- Start .onClick Page Transition -->

<script>
function delay (URL) {setTimeout( function() { window.location = URL }, 850 );}
</script> 

<!-- End .onClick delay Transition -->

‘850’ is how many ms you want your transition event to be.

Look at these screenshots for guidance.

You can put code only on certain pages OR on the whole website in project settings.

You need to make an IX2 On Button Click for your transition event. I reccomend staying the same 'x’ms you defined in the code for your transition. In this example, my transition sequence is 850ms.

Assign the button linkblock or textlinkblock the transition element trigger

apply ‘javascript:delay(’/page-path/pagr’) exactally as instructed in the link above.

Optional - assign id onclick-delay , then you can reference #onclick-day in custom code for other stuff on an as-needed basis.

Good luck!!

miek

[thebergdesign (Cillian Sheahan)]

@miekwave Wow, this looks a little above my pay grade Thank you for explaining it so well. I’m going to give it a try and I’ll come back here if something confuses me

[ryang2723 (Ryan Gilden)]

Thanks for this. All the steps are pretty straight forward. I don’t know code at all and it’s real easy to impliment. However, mine isn’t quite working. It only goes through part of my menu animation and doesn’t close the drawer. There’s probably something in the build preventing this. Back to detective work

[miekwave (miek)]

@thebergdesign
Practice it in a blank sandbox webflow project before implementing on your main project. This way you can mess arround until you understand how it works.

Thats what I always do, I have a sandbox project just for screwing arround until I learn exactally how things work, before putting it on a main project.

@ryang2723
Can you make a loom.com video or post screenshots of your error?

[thebergdesign (Cillian Sheahan)]

Hi @miekwave, I just finished with the guide as laid out in the Webflow Blog and it’s working pretty well now. I’m missing where I need to implement your screenshots though?

One things I’ve noticed overall is that in the designer, the page links take me to either a 404 page or the about page of the Webflow website itself. I’ve published the site, and it works completely as intended there, with each link taking me to the correct page on my site - do you know why this is happening? I guess it’s better that having it the other way around, but I’d like to be sure that it doesn’t lead to problems down the line. You can view it if you go to [https://the-berg-design.webflow.io]

Lastly, I’ve also noticed that the animations can run a bit choppy sometimes, it detracts from the quality of the website so I’d prefer if I could guarantee a smoother flow of the animations if possible. Are you aware of any solutions?

Thank you for your continued help, I appreciate it.

[ryang2723 (Ryan Gilden)]

This is my sandbox project. Trying to experiment and troubleshoot to get things as close as possible and then rebuild it by referencing what I’ve done. I find that when people do a barebones version it doesn’t really address some of the complications that may arise. They are usually too simple to account for unforeseen design challenges.

Here is a video of what I’m dealing with

The Published link:
https://test-menu-bar-9dc523e7ea54e0f9026d4c876.webflow.io/

The read only link:
https://preview.webflow.com/preview/test-menu-bar-9dc523e7ea54e0f9026d4c876?utm_medium=preview_link&utm_source=designer&utm_content=test-menu-bar-9dc523e7ea54e0f9026d4c876&preview=8a3c4d25e2c11303280b5099dc491077&mode=preview

Thanks for taking a look, greatly appreciated.

[miekwave (miek)]

@ryang2723
Thanks for sharing that!

- assign lose drawerto CLASS in IX2 this will ensure uniformity across all pages.

Does that work?

I would reccomend converting your main menu to a symbol so its easier to apply to all pages.
Define class names and bind them in IX2.

(your designer navigation is a little confusing to me because of certain show/hide/x-y states, if youd explain click classes or sections are masks or not it would help diagnose better)

[miekwave (miek)]

@thebergdesign

@thebergdesign

One things I’ve noticed overall is that in the designer, the page links take me to either a 404 page or the about page of the Webflow website itself. I’ve published the site, and it works completely as intended there, with each link taking me to the correct page on my site - do you know why this is happening? I guess it’s better that having it the other way around, but I’d like to be sure that it doesn’t lead to problems down the line. You can view it if you go to [https://the-berg-design.webflow.io ]

Lastly, I’ve also noticed that the animations can run a bit choppy sometimes, it detracts from the quality of the website so I’d prefer if I could guarantee a smoother flow of the animations if possible. Are you aware of any solutions?

Designer preview mode using delay click
Links will not work with /.onclickDelay in designer view because your using relative link references, so it references {currentdomain}.com/{yourpage} within designer. So if you click it within webflow designer, it points to webflow.com/{yourpage}, if you click it from .io it will point to .io/{yourpage} and so forth.

SEO implications
Crawlers do not recognize onClick delay links. If you want those links crawled on the page, be sure to include them in the footer or some other content section as natural links.

Croppy Animation:
Please be more specific about what you mean by choppy animations.

https://the-berg-design.webflow.io/ Menu clicks pages seem to work for me and seamlessly transition. Though, there is an awkward load time between some pages, that can be addressed with a loading icon.

[ryang2723 (Ryan Gilden)]

So I followed your steps above AND made my nav bar and menu drawer symbols and the nav animation works on both pages now. I for sure don’t understand why lol. Is it because I made them symbols OR is because I assigned the class to my Close Drawer? All part of the learning process I guess but it’s def hard to know why things work the way they do when you don’t fully understand the code concept behind it.

However, the page transition from menu to page link still does not work.
https://test-menu-bar-9dc523e7ea54e0f9026d4c876.webflow.io/

There is also one other problem I am realizing. In order for the Delay Code to work you need to add the slug to the JS in the URL field. Your home page does not have a slug. So Work in my menu would essentially go back to my Home page but there is no way to enter a non-existing slug.

As far as the design navigation, you can chalk that up to I just don’t know what I’m doing at this point. And I guess I don’t know fully what you mean by “click classes or sections are masks”. Sorry this must be frustrating for you.

In my IX2:
•Drawer Open:
I have hide show for the close button (X) because I don’t want it to be visible in the initial state and I don’t want it to interfere with the three dots in any way. I think this may have been an artifact from when I had the close-menu-wrapper and dot-menu-wrapper as two different things, i.e. there was no menu-button-wrapper and both were contained in the Menu Wrapper as their own buttons essentially. This proved problematic in setting up the interactions and once I contained them in the menu-button-wrapper and assigned interactions only to that element (instead of to the dot and close buttons individually), everything work fine. Except for the problem we just remedied.

I’m basing this on some tutorials I’ve watched where the hamburger animates to an X but the elements are contained in a Div that triggers the animation. I’ve tried to recreate this but I have dots instead of lines so the animation isn’t as straight forward. (dots>X instead of lines>X)

I hope this makes sense, really sorry I’m not better versed in this. A lot of trial and error at this point.

[thebergdesign (Cillian Sheahan)]

Hi @miekwave thank you again for your reply.

Designer preview mode
Understood

SEO implications
Understood

Croppy Animation
Here is a quick video showing what I mean. In particular, the ‘Portfolio’ page looks really ugly during loading.

[miekwave (miek)]

@ryang2723

There is also one other problem I am realizing. In order for the Delay Code to work you need to add the slug to the JS in the URL field. Your home page does not have a slug. So Work in my menu would essentially go back to my Home page but there is no way to enter a non-existing slug.

assign homepage java with ‘/’ or “/” will trigger onclick delay t homepage.

Remember everytime you use onclick delay for transition, make a natural link somewhere else on the page such as the footer

[miekwave (miek)]

@thebergdesign

Croppy Animation
Here is a quick video showing what I mean. In particular, the ‘Portfolio’ page looks really ugly during loading.

Choppy animation is subject to opinion. As I mentioned earlier, it looks fine on my device, and it looks fine to me in yor screenshot, but thats my opinion. I would suggest experiementing with tweening curves, animation times, and offsets. such as ease-in vs ease-out or sine or other curves.

As far as portfolio loading… i reccomend creating a loading asset, for example one of these

Lottieflow | Loading Category

and you can set up special onclickdelay and pageload init and page load complete rules for the loading icon

that would make it less ugly

[thebergdesign (Cillian Sheahan)]

@miekwave Thank you for this, for some reason, the animations have mostly all smoothened out - I think I had too many tabs open on my system so it was running at max capacity. The portfolio page still loads too slowly so I will follow your suggestion of created a loading asset.

I have gone further and tried to add the page transition to the logo button at the top of the page, and the footer links to each page too, however the method you linked to at the top isn’t working for these elements. I think it has something to do with adding the code `javascript:delay(‘/’) to these elements - it doesn’t work the same way as for the on-page elements. Do you have any suggestions?

Thank you

[icexuick (Martijn Hoppenbrouwer)]

This worked well, and smooth and nice.
I have one big problem - When using “back” in a browser, the previous page gets shown with the outro animation » in my case a fully blank page.

Do you happen to know of a way to (re)trigger something so that this works.
Ideally you want the “back” command to really go back and (re-)open the page - including the outro-animation on the current page and the reloading/intro animation for the page in history you’re navigating towards.

I found a page where this works well: https://www.engineeredfloors.com/
But I have no idea how they did that (not Webflow i think)