After nav link click interactions

Community resources Product feedback
1

Hey,

I’m looking for a way to have an interaction executed after a nav link is clicked. Like the contant below faded to 0 opacity before the new page is loaded. I’m wondering if there is a way and I just don’t know of it, or if it was possible to have a similar interaction like the page load. So that the interaction(s) is/are executed before the new page load beings?

Thanks,
Dennis

2

Hi, no, there isn’t a Webflow way for in between pages interactions. This behavior, I’m 100% sure, can be set site wide with Javascript (something is the line of "fade out any page before linking to another). And when it comes to JS I know close to nothing sorry (:

In Webflow, you could se an interaction saying onclick of certain a nav element, fade out the Body. And you could add delays… but I keep thinking and find no way to delay a link event. Which kind of make sense because who wants to delay a link action when everybody tries to have a fast website?

Edit, did a quick search, it’s not a very complicated JS, something with $(“body”).fadeOut(); in it.

Found this here (Fade Out between pages - CSS-Tricks - CSS-Tricks) , this one even fades in the next page

$(document).ready(function() {

$('body').css('display', 'none');

$('body').fadeIn(1000);



$('.link').click(function(event) {

event.preventDefault();

newLocation = this.href;

$('body').fadeOut(1000, newpage);

});



function newpage() {

window.location = newLocation;

}

});
1 Like
3

Still no way to do this in Webflow?