fullPage.js Best Alternatives

You know fullPage.js scrolling library but now you want to create a snap scrolling effect without it. We have you covered! If you want to replace fullPage.js you have a few options to choose from.

Here’s a list of where you’ll be able to find the best alternative to fullPage.js, depending on your needs. From pure JavaScript libraries to jQuery plugins, all of them have a very similar effect:

1. Onepage-scroll

This jQuery plugin has been out there for almost the same amount of time as fullPage.js. It has 9.6K stars on Github and it will provide you with the basic snap scrolling effect just like fullPage.js does.

Pros:

• Only 9.6 Kb (without considering jQuery) compared to 37Kb of fullPage.js. However, this comes at some cost. See the cons.

Cons:

• It requires jQuery, adding a “big” dependency to your site and slowing down its loading time.
• It is not maintained anymore, and the last update was in 2014! Big warning!
• The number of configurable options is much smaller than fullpage.js.
• It won’t support non full-screen sections, which come on handy for website footers.
• It doesn’t support scrollable content inside sections.
• It doesn’t support both vertical and horizontal scrolling at the same time.
• It has no continuous vertical scrolling.
• It doesn’t support scrolling with a visible scrollbar. This can be quite a big issue if you are planning on using third-party libraries that rely on the scroll of the page, such as lazy load, wow.js, scrollMagic, skrollr, parallax effects, etc.
• It won’t come with navigation bullets or linkable menu out of the box. So, if you are not very good at JS implementing this will be an additional trouble.
• It doesn’t come with lazy load as fullPage and will be more difficult to integrate it, as the scroll event is not being fired.
• Keyboard navigation has a few bugs.
• No official wrappers for React, Vue or Angular.
• No official plugins for WordPress.
• No support.

2. Pageable

A small 17Kb JavaScript library that will help you achieve snap scroll if you are looking for something very basic. Keep in mind that the library is no longer maintained and that the last update was in early 2019.

Pros:

• It’s a bit lighter than fullPage.js. 17kb vs 37Kb of fullPage.js. However, as expected, this doesn’t come for free. See the cons below.
• It comes with a “delay” option that might come in handy.
• Provides a very basic mouse “drag” feature out of the box. fullPage.js doesn’t, but it provides a far more advanced Dragging extension at a reasonable price. Working in both desktop and touch devices.

Cons:

• Unmaintained since early 2019.
• Transitions won’t be as smooth as in fullPage.js, especially in low-budget devices. It uses JavaScript to update the translate3d property every few milliseconds instead of a CSS transition.
• Apple devices such as laptops or Apple Magic can suffer from a bad user experience. The library doesn’t seem to be dealing well enough with kinetic scrolling devices.
• It doesn’t support scrollable content inside sections, making it really difficult to create a truly responsive site.
• It doesn’t allow non-full-height sections.
• It supports horizontal scroll but not both vertical and horizontal on the same page.
• The number of configurable options is much smaller than that of fullpage.js.
• There are no official wrappers for React, Vue, or Angular.
• No official plugins for WordPress.

3. ScrollMagic

This JavaScript library is not designed to create a snap scrolling effect. In fact, that’s one of the less common uses for it. ScrollMagic is a great tool to animate almost anything based on the scroll position. However, with a few tricks, you can use this great library to get the snap scrolling effect.

I dug a bit in Greensock forums and I was able to find a solution based on ScrollMagic:

Pros:

• None

Cons:

• It is not designed with a snap scroll effect in mind.
• Lacks many of the specific use case needs for snap scrolling.
• It won’t be straightforward to implement. You’ll need to really know what you are doing here. Not for everybody.
• The example I found is using GSAP library (TweenMax) on top of scrollMagic in order to do the animation. That’s 115kb more! I imagine you can replace that for jQuery or CSS animations? But that’s something you’ll have to figure out.

4. PanelSnap

PanelSnap, also known as jQuery.panelSnap, is a JavaScript library that allows you to create a basic page with snap scroll made out of vertical sections.

The main difference in this case with fullPage.js is that it won’t auto snap to the next section on scroll, it will only do it when the user stops scrolling. So basically, working exactly as the CSS snap scroll feature works.

On top of the CSS snap feature, it provides a way to use a menu linked to each section and callbacks that can be useful.

Pros:

• It’s basically CSS scroll snap with extra features, so if CSS scroll snap is enough for you, this might be a good candidate.
• It provides wrappers for jQuery, Vue, and React.

Cons

• It uses tweezer.js dependency.
• Very basic features. It won’t be ideal in many scenarios as it’s relying on CSS scroll snap. See when not to use css scroll snap.
• Won’t support many of the specific use cases snap scrolling, such as anchors in the URL, responsive modes, URL history, scrolling speed, continuous scroll etc.
• It supports horizontal scroll but not both vertical and horizontal on the same page.
• No official plugins for WordPress.
• No official wrapper for Angular.

5. Smartscroll

A jQuery plugin that attempts to solve the snap scroll problem. It has similar features to other plugins and libraries but it seems to have some issues working on kinetic scrolling devices like Apple laptops and some laptops trackpads.

Pros

• Supports non-full-height sections as fullPage.js (although without auto snap)
• Supports URL anchors (although browser history back/forward won’t work as expected)
• Supports hybrid mode (in some way, but it’s quite buggy)

Cons

• Unmaintained since late 2018. Big warning!
• Requires jQuery, lethargy.js, and EventEmitter.js if you want to use callbacks.
• It feels quite buggy en general, even with a normal mouse wheel you’ll experience some glitches when scrolling.
• It just won’t work well enough if you have a Mac or a kinetic scrolling device or trackpad. Looks very flaky and it won’t be something you want your visitors to experience.
• It won’t snap correctly to sections when using free scroll or dragging the scrollbar.
• Resizing up/down won’t keep the active section on the viewport.
• It works only with a scroll bar and won’t enjoy the CSS3 hardware-accelerated animations that fullPage.js uses by default.
• The number of configurable options is much smaller than fullpage.js.

6. ViewScroller

Another basic solution that might be enough for you if you look for something simple? Unfortunately not something I would recommend to anyone. The page is down and it is unmaintained. Not something you can rely on.

Cons

• Unmaintained since late 2018. Big warning!
• The website is down.
• It uses jQuery as a dependency as well as jquery.mousewheel.js and jQuery easing. Adding quite a big amount of code on top of the component itself that will for sure slow down the load of the page.

7. Angular-snapscroll

This lightweight Angular library provides the same snap scroll feature as other libraries but it’s focused only on the Angular framework and unfortunately, it is no longer maintained.

Pros

• Supports nested snapscroll elements. This is quite original and something none of the other libraries does. Is it really useful? That’s perhaps another topic 🙂
• Partially supports bigger height children elements. Although the scroll experience on those looks a bit unnatural and limited to a full-screen scroll per scroll event. fullPage.js deals with this much better.

Cons

• Unmaintained since 2017. Big warning!
• Angular-only solution.
• Uses two dependencies: angular-wheelie.js and angular-scrollie.js.
• Very few configurable options compared to fullPage.js.

8. ks-vue-fullpage

This is a Vue-only alternative to fullpage.js. If you are using Vue.js you might want to take a look at it. Just don’t forget that fullPage.js also supports Vue with its official wrapper.

This component was probably born when fullPage.js was still a jQuery plugin at version 2 as an alternative that didn’t have dependencies. This won’t make much sense now that fullPage.js doesn’t use jQuery anymore and has full support for Vue.

Pros:

• None

Cons:

• Only available for Vue.js
• It won’t support kinetic scrolling devices such as Apple laptops or magic mouse. They’ll experience unexpected scrolls.
• Very basic features.
• Unmaintained since 2017.

9. Impressjs

An amazing presentation library based on CSS3 transformations and transitions.
It was born as an alternative code-solution to Prezi, which was at the time an alternative to PowerPoint presentations.

As it happens with other libraries, Impress.js goal is not to create snap scrolling websites. But this doesn’t mean we can’t use it for that too!

Cons:

• Not designed with snap scroll effect in mind.
• Lacks many of the specific use case needs for snap scrolling.
• It won’t be straightforward to implement. You’ll need to really know what you are doing here. Not for everybody.

10. PagePiling

This is actually the younger brother of fullPage.js. Developed by the same person but with a different approach in mind. Sections won’t just slide up or down but rather pile on top of each other on scroll. This way scrolling will reveal the sections underneath or cover them with the ones on top. It adds some kind of “parallax” effect to it.

In addition to that, switching to non-consecutive sections will skip the sections in between instead of passing through all of them.

The library still has basic maintenance but it doesn’t get updated regularly. fullPage.js has clearly been the most popular one and the one getting all the attention.

Pros:

• Skips sections in between when scrolling.

Cons:

• Requires jQuery.
• Slightly different effect.
• Far fewer options than fullPage.js.
• No official wrappers for React, Vue, or Angular.
• Very basic maintenance and very few updates.

Conclusion

There are a few libraries out there you can use instead of fullPage.js, however, I would say there’s none as complete and as reliable as fullPage.js is. And there’s a reason for that.

fullPage.js has the advantage of being maintained full-time by the main developer, Alvaro Trigo, and having a small team of people working on it, too, from the excellent and fast support persons to the team working on WordPress plugins or wrappers for different front-end frameworks.

On top of that, it has plenty of extensions you can use to change the default animation or to add more features.

fullPage.js was the first library of this kind, released back in 2013 and it has been trusted by the big ones, like Google, eBay, Sony or McDonalds. It currently has more than 33K stars on GitHub (not a small deal!), tens of thousands of downloads per month on npm, millions of hits per month on jsdeliver, and the docs are translated to 6 different languages.

If however, you are willing to sacrifice some of the features fullPage.js provides, or perhaps you just need a very rudimentary and basic scroll snap feature, then you can probably use an alternative library from this list.

Or if you are even more radical and prefer not to use any library at all, you can consider using plain CSS snaps scroll. However, I would recommend you also take a look at when or why not to use CSS scroll snap.