The easiest way to use GSAP ScrollTrigger together with fullPage.js is to enable the scrollBar option on the fullPage.js initialization.

For example:

new fullPage('#fullpage', {
     //turning on scroll bar for GSAP ScrollTrigger
     scrollBar: true

     licenseKey: "your_license_key_here"
});

//Your GSAP code here
gsap.to('.box', {
    scrollTrigger: '.box', // start the animation when ".box" enters the viewport (once)
    x: 500
});

Once you enable the scrollbar, then GSAP will be able to access the scrolled position and trigger animations based on that. 

Here's a codepen example illustrating how to integrate GSAP ScrollTrigger and fullPage.js:

See the Pen fullPage.js GSAP Scrolltrigger integration by Álvaro (@alvarotrigo) on CodePen.

Using GSAP ScrollTrigger on fullPage.js with overflowing content

Let's say that you have a section that has a lot of content and that overflows the viewport dimensions. 

In this case, fullPage.js creates a scrollable section for you by default. See this example.

So, what if you want to use GSAP animations on scrollable content inside fullpage.js sections?

In this case, we'll have to:

  • Disable the scrollBar option in fullPage.js (Overflow sections won't work well with two scrollbars)
  • Enable the scrollOverflow option in fullPage.js (Enabled by default)
  • Use the `scrolller` option in your scrollTrigger options so we can define the scrollable parent. (Which won't be the body of the page anymore, but the fullPage.js section scrollable wrapper)

Here's the code to illustrate it:

new fullpage('#fullpage', {
  sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
  
  // REQUIRED to trigger scroll-based animations on GSAP
  scrollOverflow: true,
  scrollBar: false,
  
  // Get your license at https://alvarotrigo.com/fullPage/pricing/
  licenseKey: 'YOUR LICENSE KEY HERE '
});

gsap.to('.box_animated', {
    scrollTrigger: {
        /* 
        * Important to make it work with fullPage.js sections that overflow. */
        scroller: '#section-2 .fp-overflow',
      
        trigger: '.box_animated', 
        start: 'top center', // Adjust this based on when you want the animation to start
        end: 'bottom top', // Animation can reset when scrolled out
        toggleActions: 'play none none reverse', // Replay animation every time you enter
        scrub: false, // Set to true if you want smooth animation while scrolling
    },
    x: 500
});

And here's the demo of GSAP ScrollTrigger working with fullPage.js scrollOverflow:

See the Pen fullPage.js GSAP Scrolltrigger integration scrollOverflow by Álvaro (@alvarotrigo) on CodePen.

 

 

You might also find these articles relevant: