How to make Webflow animations work in React

Community resources Webflow Tips
1

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

image
image1299×130 12.1 KB

  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
2

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

3

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');
4

@PixZen @rogerfsosa
Guys,

Look my situation, I have an animation on PAGE_START but the animation only triggers in Zoom In or Zoom Out. Can you help me, please?