Some animations not working on with server side rendering (React/NextJS)

Community resources Bugs
1

Hi!

I’m currently using exported webflow files within a React project with server side rendering using NextJS.

I’m sending this HTML structure with each request.

        <>
        <Head>
            <link href="/css/normalize.css" rel="stylesheet" type="text/css" />
            <link href="/css/webflow.css" rel="stylesheet" type="text/css" />
            <link href="/css/saint-patrick.webflow.css" rel="stylesheet" type="text/css" />
            {/* [if lt IE 9]><![endif] */}
            <link href="images/favicon.jpg" rel="shortcut icon" type="image/x-icon" />
            <link href="images/webclip.png" rel="apple-touch-icon" />
            <link rel="stylesheet" href="/css/ReactToastify.min.css"></link>
        </Head>
        <Header2></Header2>
        <div style={{ marginTop: '0px'}}>
            {children}
        </div>


        {/* <Footer></Footer> */}
        <script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.4.1.min.220afd743d.js?site=5da0657b754316944047c5a6" type="text/javascript" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
        <script src="/js/webflow.js"></script>
    </>

I have jQuery and webflow.js added to the bottom of the body and all the css files.

All animations work fine (slider, fade-in, etc) but the navigation is not showing when I click the nav-menu-button (on mobile resolutions), other growing animation (it’s a loop that grows and shrinks) and other animation that should go from height 0 to auto is not working.

I don’t know why some animations are working and some aren’t. I’ve also tried to do Webflow.ready() but it didn’t work.

This is an example of the site working fine. You can see the text that says: “Conoce mas sobre nuestros cursos online!” next to the big ben image.

saint-patrick.webflow.io

2

you have to modify also the html tag to make interactions work, look your exported code and check data-wf-page and data-wf-site attributes, without them interactions will not work

2 Likes
3

Thank you very much! That worked perfectly.

4

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.