How to make Webflow animations work in React

Hi, I was building a project with React and as I imported my webflow libraries and code into it I found out that the animations wont work.

Why?

The secret lies within Reacts way of rendering your html code ( jsx code ).
Your webflow js code gets executed before your html code gets rendered on the canvas… Makes sense ?

How to fix it

It is relatively easy.

  1. Import all your webflow css and js libraries in your index.html file

  1. Webflow adds specific properties to your html tag.

The data-wf-page and data-wf-site tags

Make sure that those are added to your html tag or the animations will not work.

<html lang="en" data-wf-page="5f8f21e880224557366b9fec123" data-wf-site="5f8f21e8805573a426f112ec122">
  1. Use this useEffect hook in the component you want your animations to show up in
    Because the useEffect hook fires after the html has been loaded , we pass in some code that just restarts the webflow.js.
    It finally finds the loaded html and does its magic.
useEffect(()=>{
    window.Webflow && window.Webflow.destroy();
    window.Webflow && window.Webflow.ready();
    window.Webflow && window.Webflow.require('ix2').init();
    document.dispatchEvent(new Event('readystatechange'))
  })

Quick tips

If you have more than one page that relies on animations a common problem is that you need to change the data-wf-page and data-wf-site tags.

Just use a useLayout hook that has some DOM code that changes the tags

Hope this article provides a useful solution for you guys !

4 Likes

Thanks its very useful trick, I using it in my react app too

also you have to know that if you have multiple pages with diferent ids on the html top you should use html node id substitution for animations to work inside Hook or DidMount:

// html node
const html = document.getElementsByTagName('html')[0];
html.setAttribute('data-wf-page', '622ec068c499760b8f839913');
html.setAttribute('data-wf-site', '622ec068c49976688c839911');