Why isn't the Fading Effect of the fullPage.js code from GitHub working on my Webflow project?

TL;DR

Use fullPage.js v3+ and ensure it's correctly loaded via CDN or local file.
Place fullPage.js script in the Page Footer and initialize it properly with fadingEffect: 'sections' and scrollingSpeed: 0.
Disable Webflow scroll-based interactions to prevent conflicts.
Ensure proper HTML structure, where the wrapper uses id="fullpage" and sections have the .section class.
Check the browser console for errors, test in incognito mode, and try different browsers.

If the Fading Effect of fullPage.js from GitHub isn’t working in your Webflow project, there are a few common causes. Follow these troubleshooting steps to identify and fix the issue.

1. Ensure You're Using the Correct Version of fullPage.js

Check Compatibility: The fading effect requires fullPage.js v3 or later. If you're using an older version, it might not support fadeEffect.
CDN or Local Version: If you are loading fullPage.js from a CDN, make sure it's the correct version. Use this if needed:
Latest fullPage.js: https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.js

2. Verify Your Webflow Custom Code Placement

Add fullPage.js in the Page Footer (Before </body>): Placing it in the wrong section (like <head>) can cause issues.
Correct Initialization: Your JavaScript should be inside <script> tags at the end of the Before Body section in Webflow (Settings > Custom Code).

3. Enable fadeEffect Correctly in the JavaScript

Make sure you have fadeEffect enabled in your fullPage.js initialization script:
```js
new fullpage('#fullpage', {
autoScrolling: true,
scrollHorizontally: true,
fadingEffect: true
});
```
If fadingEffect isn't working, try using scrollingSpeed: 0 or fadingEffect: 'sections' instead:
```js
new fullpage('#fullpage', {
autoScrolling: true,
scrollHorizontally: true,
fadingEffect: 'sections',
scrollingSpeed: 0
});
```

4. Check for Conflicts with Webflow Interactions

Disable Webflow Scroll-Based Interactions: If Webflow’s built-in animations target the same elements, they can interfere with fullPage.js.
Test Without Webflow Animations: Temporarily remove Webflow interactions and check if the fading effect starts working.

5. Ensure Proper HTML Structure in Webflow

The fullPage.js wrapper and sections must be structured correctly:
```html

Section 1

Section 2

Section 3
\`\`\`
Each section must have .section as a class. Make sure Webflow doesn’t automatically add extra divs that might break fullPage.js.

6. Open Your Browser Console for Errors

Press F12 (Windows) or Cmd + Option + I (Mac) to open Developer Tools.
Go to the Console tab and check for JavaScript errors.
Common issues:
fullpage.js is not defined → CDN or local script isn’t loading.
fadingEffect is not a function → Using an outdated fullPage.js version.

7. Test in Incognito Mode and Other Browsers

Disable browser extensions that might block scripts.
Try different browsers (Chrome, Firefox, Safari) to rule out local issues.

Summary

Ensure that you're using fullPage.js v3+, correctly enabling fadeEffect, placing the script properly in Webflow, and checking for conflicts with Webflow interactions. Also, verify that your HTML structure matches fullPage.js requirements. If the issue persists, check the console for errors and test in different browsers.

Webflow Resources

Webflow templates

Webflow inspiration

Rate this answer