ScrollMagic and fullpage.js are fully compatible. You can use both of them together by using the fullPage.js option `scrollBar: true`.

ScrollMagic scroll interactions are based on the scroll position of the website. fullPage.js by default disables the scrollbar of the page and therefore the default scroll behaviour, making libraries like ScrollMagic and fullPage.js enter in direct conflict.

However, fullPage.js options allow you to overcome this problem. By just turning `scrollBar` on, fullPage.js will add a scrollbar like any other normal page and will perform the snap behaviour in a different way to achieve the same effect.

Here's an example of how to initialise fullPage.js to make it compatible with ScrollMagic:

new fullpage('#fullpage', {
     licenseKey: '[YOUR LICENSE HERE]',
     scrollBar: true
});

Here's an example of usage:

See the Pen Scroll magic and fullPage.js by Álvaro (@alvarotrigo) on CodePen.

 

You might also find these articles relevant: