LoginGet started — it’s free
Made in Webflow

PagePiling with Webflow (FullPage JS Free Alternative) Cloneable

Clone in Webflow222
Joe Brindle's avatar
by Joe Brindle
site profile thumbnail


Using PagePiling with Webflow is simple. - Start by creating a DIV with ID 'pagepiling' - Within the DIV create several sections with the class 'section' - Make these sections height:100vh - Add this code inside <head> tag <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/pagePiling.js/1.5.6/jquery.pagepiling.css" /> - Add this code before <body> tag <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pagePiling.js/1.5.6/jquery.pagepiling.min.js"></script> <script> $(document).ready(function() { $('#pagepiling').pagepiling(); }); </script> You can customize this more, eg with anchors, scrolling speeds and menu navigation by looking at the GitHub here https://github.com/alvarotrigo/pagePiling.js/

Feeling inspired?

If this Made In Webflow site sparked some inspo, why not get started on a project of your own? Clone a site, purchase a template or start building from scratch.
fullpagejsfullpagefull pagefullpage sliderpagepilingslides

More by Joe Brindle

See profile
View details
Recreating the Rider 404 website in Webflow without any code
© 2022 Webflow, Inc. All rights reserved.