Converting Webflow Site to React With Appfairy - Ultimate Guide
I’m working on a side project. We are using material-ui and are having a great time with their React components. However, we were looking to really spice up our index page. This is where webflow comes in. It let’s you create crazy animations that would take a million years to pull together.
Check it out for yourself here: Artifai.
We went into webflow thinking it would be easy to move it over into the react project. We were very wrong. Luckily someone wrote Appfairy which makes the process way easier. Thank you Eytan! There were still a few quirks though.
Make sure to read the Appfairy README.md, and watch this video to get an overview of how the process works.
This guide assumes some familiarity with React and Create React App.
Export your webflow site as a zip.
For the purpose of this walkthrough i’ll be starting over from create-react-app, but you could just as easily follow along from inside your own react project.
Copy the unzipped contents of your zip to .appfairy, and perform the following very difficult step!
Phew. The hardest part is behind us :)
In order to see your sight on the screen, you have to import your view!
In index.js make sure to add the following imports:
<App /> with
Great! Now by running
npm start you’ll see your webflow sight running locally on your computer! However, if you navigate around you’ll notice that some of the animations are amiss. Follow the next section to get your site to full power!
js and css
Make sure to add webflow.js and your css files to index.html
- If you don’t add css to index.html, the page will do a first paint without css which doesn’t look very aesthetic.
Webflow Page Id and Site Id
In implementing this and the next modification I had a lot of help from this github issue. I recommend that you read through it.
In order for webflow.js to function properly on your react site, you need to add the necessary meta data to index.html. Thanks to rolandocpontes for the below code which makes this process easy.
Get the meta data by running the following commands on the console from a deployed webflow site:
Then put them into your site by adding the following to
Now your ready to get the animations working.
Page Trigger Interactions
The idea is that while Appfairy prepends all the webflow element classes with “af-class-” in order to prevent conflicts, it doesn’t make the relevant changes in webflow.js that are necessary for the animations to work. Luckily there is a quick solution to this issue.
Thanks to rolandocpontes for the following node script which makes the necessary changes to the animation json in webflow.js:
I wrote a short bash script that automates the process of applying rolandocpontes’ script (make sure to only run it once. The script is not idempotent).
Copy both of the above scripts into your
public/js folder as
apply-converter.sh respectively, run
bash apply-converter.sh, and you’re good to go!
On Enter page animations
Unfortunately, “On Enter” page transitions don’t transfer over very easily to React applications from Webflow. It’s possible to get them to work on initial page load, but when leaving and returning to a page using react router, the animation may not retrigger.
The easiest way to get around this is to change from using an “On Page Load” trigger to a “Button Click” trigger. Assign the button click trigger to a button which you then set
display: none, and
Now from inside the useEffect (or componentDidMount for a React component) function of the view controller you can add in the following in order to trigger the animation the right way everytime!
I hope these steps help you save a day of debugging. Appfairy is an awesome tool thank you Eytan Manor! Let me know in the comments if you have any questions or if I should elaborate more on this guide.