What is a simple step-by-step guide for setting up fullpage.js in Webflow?

Setting up fullpage.js in Webflow allows you to create smooth full-screen scrolling sections. Follow these steps to implement it in your project.

1. Add fullpage.js to Your Webflow Project

• Go to the fullpage.js CDN and copy the latest script link (e.g., from jsDelivr or CDNJS).
• Open Webflow Designer, go to Pages, and click the gear icon for the page where you want fullpage.js.
• Scroll to the "Before tag" section and paste the following script:
  ```html```
• Click Save.

2. Structure Your Webflow Layout

• Create a div with the ID fullpage that will act as the wrapper.
• Inside it, add multiple div blocks, each representing a section.
• Assign a common class to all sections, such as "section".

3. Initialize fullpage.js

• In the same Before </body> section, paste the following script:
  ```html```
• Save and Publish your project.

4. Customize Styling

• To ensure full-screen sections, go to the Webflow Designer and apply these styles:
• Set #fullpage to 100vh height and relative position.
• Set .section to 100vh height and flexbox (center alignment).

5. Test and Debug

• Publish your Webflow site and ensure smooth scrolling is active.
• If it's not working, open the browser console (F12 > Console) to check for errors.

Summary

To add fullpage.js to Webflow, include the CDN script, structure sections inside a #fullpage container, and initialize the library via JavaScript. Adjust styles for full-screen sections and test the functionality after publishing.