I am trying to use a webflow site I built with react, however, it is not working. Everytime I try to export my code and put it into my react project, the content and styles show up, but my animations don’t appear. It just stays at the first keyframe and does not trigger when the page is scrolled. I have purchased a webflow pro account under the impression it would work properly with my react project. I have seen other people have this problem but with Wordpress on the webflow forum as well but they did not get an answer.
Unfortunately without seeing the site in question it will be hard for anyone to determine the cause of the issue. Are you able to include a link for us to check out?
That said, I would imagine that utilizing a Webflow site export within a React build is resulting in some conflicts, so I’d check the console on your live website for any errors and debug from there.
Consider the info in this thread;
or these libraries;
Better yet. Keep your project in Webflow;
Here is my project: https://preview.webflow.com/preview/russ-6723e7?utm_medium=preview_link&utm_source=designer&utm_content=russ-6723e7&preview=800ffc771b1e4165bc5245244ef765aa&mode=preview
I have no errors in the console when I run the site. Technically its not an error with the page, but the animations just don’t start and I am wondering if that has something to do with babel or some other react dependencies that causes this.
Can you confirm you’re running webflow.js on your website?
Yes, webflow.js is running on my site. I included it through the index.html script tag instead of importing it from the src folder because it gives me a lot of errors when I import it that way.
Ok, out of curiosity then, just to be sure: When you open you browser’s console tab with your website open, and you type Webflow. Do you get an undefined message or do you actually get something back?
Ok…now let’s try the following: Drop this in the console and run it:
window.Webflow.destroy();
window.Webflow.ready();
window.Webflow.require('ix2').init();
document.dispatchEvent(new Event('readystatechange'));
Let me know if anything changes in regards to the animations working or not or if you get any errors.
If that doesn’t work, try comparing the HTML output of the React App and the HTML that webflow produced when you exported the code and seeing if there are any missing attributes or something that webflow might have added that could be used as a target for animations selectors
1 Like
In the console, it responds true. I also get an alert from the browser which says, “Oops! This page has improperly configured forms. Please contact your website administrator to fix this issue.” This also comes up after I refresh the page. I have just tried implementing webflow code into another project without react. I just created a simple express server with handlebars.js and I still got the same problem, animation does not start and console returns the same thing as the react project. So I have ruled out that there is no dependencies in my react project that are interfering with webflow code.
Thanks, it works for me to display the animation.