How can I fix the issue of Webflow animations not being triggered due to fullpage.js preventing default scrolling on my website?

Published on

September 22, 2023

Note

CommunityFAQ is not affiliated with Webflow. Click here if you'd like to visit Webflow's help resources.

If you are experiencing issues with Webflow animations not being triggered on your website due to fullpage.js preventing default scrolling, there are a few steps you can take to resolve the issue:

Disable fullpage.js on specific elements: If you want to retain the functionality of fullpage.js but still allow Webflow animations to be triggered on certain elements, you can disable fullpage.js on those specific elements. To do this, you can use the normalScrollElements option in fullpage.js to specify elements that should not be affected by fullpage.js scrolling behavior. Add the class or ID of the element you want to exclude from fullpage.js scrolling as a value of the normalScrollElements option.
Adjust the order of JavaScript code: Another solution is to adjust the order in which the JavaScript code is loaded on your website. Make sure that the fullpage.js script is loaded before the Webflow animation scripts. By doing this, you ensure that fullpage.js is fully loaded and active before any Webflow animations are triggered, allowing them to work as intended.
Customize the fullpage.js options: If you have the necessary knowledge of JavaScript and fullpage.js, you can customize the fullpage.js options to allow for the smooth functioning of both fullpage.js scrolling and Webflow animations. By modifying the scrollOverflow option, you can enable or disable fullpage.js scrolling on specific sections, allowing you to have both fullpage.js scrolling and Webflow animations on your website.
Remove or replace fullpage.js: If none of the above solutions work for your specific situation, you can consider removing fullpage.js from your website or replacing it with an alternative scrolling library that does not interfere with Webflow animations. Be sure to test any replacements thoroughly to ensure they do not cause any conflicts with other elements or functionalities on your site.

Remember to backup your website before making any significant changes to ensure you can revert back in case of any issues. Additionally, you may want to consult with a developer or reach out to the Webflow support team for further assistance.

Additional Questions:

How do I disable fullpage.js on specific elements in Webflow?
What is the recommended order of loading JavaScript code to avoid conflicts with fullpage.js and Webflow animations?
Are there any alternative scrolling libraries that work well with Webflow animations?

Is it possible to make the first accordion in a mobile view be opened by default using Webflow?

Why does the slider on my Webflow site not work when it is published, but starts working when the page is refreshed?

How can I ensure that the like button in my Webflow CMS content applies to each item independently instead of liking every item in the collection?

Can you suggest an alternative method to add an "onload" attribute to the body in Webflow since it is not allowed to fill in?

Is there a custom code solution in Webflow for creating a lightbox with zoom functionality for images that allows users to click between images without leaving the lightbox?

How can I push the email address to the datalayer on a form submission in Webflow for enabling enhanced tracking in Google Ads?

Can Webflow be used to create a drag and drop one page landing page builder similar to Bento - A Link in Bio?

Can anyone provide code or guidance on how to make a form in Webflow email the contents of the submission to a specified email address?

How can I add the "disabled" attribute to an input field in Webflow until the form is filled out?

Why is wow.js not working after linking it and adding it to an h1 on the page?