Streaming live at 10am (PST)

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 !