Page needs to reload to show animations and interactions

Hi, recently I have completed a page, but I have been struggling finding a solution for bug that my animations and interactions loads the first time the page loads but if I gif to another tab and I come back to the home page my animation is gone, similar thing happens in the page oxaca, once the user enters the frost time and goes to the page oxaca the interactions and animations doesn’t work till you refresh the page, any idea to solve this issue?

Thanks


Here is the link:
https://punta-flecha.webflow.io/

You have to restart webflow interactions on every ajax page load, search on the forum restart ix2 you will find tons of posts

1 Like

Thanks, @pietrofalco , can you help me where I need to use Webflow.require(‘ix2’).init();?

At the end of your page transition, but you need also to correct that function, you must change the html attributes pased on the page you load

I have this code as a global style shared on the 3 pages, where should I add the code and which attributes should I add?

Thanks


/* ALL PAGES CSS */ /* Main Variables */ List item :root { --main-dark: black; --main-light: white; } /* Global Styles */ ::selection { background: var(--main-dark); color: var(--main-light); text-shadow: none; } img::selection, svg::selection { background: transparent; } /* Link color inherits from parent font color */ a { color: inherit; } /* Target any element with a certain "word" in the class name */ [class*="spacer"] { } .menu_link.w--current .menu_link-bg { opacity: 1; } .container.is-menu { pointer-events: none; } .menu_wrap { pointer-events: auto; } .content-wrapper.second { position: fixed; left: 0%; top: 0%; right: 0%; bottom: auto; z-index: 3; } html.animating, .animating body { overflow: hidden; } body::-webkit-scrollbar { width: 0 !important; } body { overflow: -moz-scrollbars-none; } body { -ms-overflow-style: none; } .overlay { pointer-events: none; }

Css is nothing that influences that, you have a tons of javascript to load the page in an async way, there is also a complete callback that do a pageTransition function, there you should reload, but when you load the ajax page you have also to change attributes to the html documentElement, otherwise interactions will still be broken

1 Like

Should it be add it here for the gobal styles html custom code?
html.animating,
.animating body {
overflow: hidden;
}

and also as well on page settings Before

thanks for all the help

@pietrofalco, can you tell me to which attributes do I need to change and what should be te correct function to add in which line?

Thanks

You are trying to fix it by modifying the css, it’s JS the issue. This makes me think that you are not the one who created the js script, in this case is way better if you contact that dev, you will not be able to fix it without js knowledge

1 Like