fullpagejs and AOS - not working together

Question

I'm using fullpagejs and AOS to make some divs popping up from the bottom of the page on scroll (or at least that's what I'd like to achieve).

Unfortunately, it is not working.

Yes, I've read the FAQ sections of fullpage and yes, scrollbar is set to true and autoscroll is set to false.

My setup is the following:

<div class="section" id="test">
   <div class="slide">
      <div class="section">
      {someOtherContent}
      <!-- div i want to animate is down below -->
      <div data-aos="slide-up">test</div>
   </div>
</div>
<div class="slide"></div>
<div class="slide"></div>
</div>


$('#test').fullpage({
  
  lazyLoading: false,
  lockAnchors: true,
  
  scrollingSpeed: 300,
  fitToSection: false,
  easing: 'easeInOutCubic',
  easingcss3: 'ease',
  loopHorizontal: false,
  offsetSections: false,
  resetSliders: false,
  scrollOverflow: true,
  scrollOverflowReset: true,
  touchSensitivity: 0,
  bigSectionsDestination: top,

  
  keyboardScrolling: false,
  animateAnchor: false,
  recordHistory: true,

  
  controlArrows: false,
  verticalCentered: true,
  responsiveWidth: 0,
  responsiveHeight: 0,

  
  sectionSelector: '.section',
  slideSelector: '.slide',
  scrollBar:true

  //events
  afterLoad: function (anchor, index( {
    initArrowEventListener()
}

the afterLoad event function simply initialises my menu links (based on the slide index) and the only relevant part is that I initialise AOS when I click on one specific link (as I want the library to work only on a specific page and not everywhere.

So, I load the page, click to navigate on the slider page I want, the function is called (console log proofs it, as well as AOS classes are applied to the relevant div), I can see the scrollbar, but nothing, the div is not popping up from the bottom.

Any idea what am I doing wrong here?

There used to be this pen illustrating the same problem. Click on "About" (the function that initialises AOS is called as the one for the title works as well), scroll to the bottom and you will see a lot of white space. If you inspect the console, AOS is initialised on the element (its classes are applied) but the element never slides up)

Have you tried initialising AOS on the afterRender callback of fullPage.js as detailed in the FAQs? — Alvaro, Jan 28 '18 at 12:18
Yes, but still nothing. Also the strange part is than also thr onscroll event doesnt fire (even when trying without aos) — Nick, Jan 28 '18 at 13:13
You forgot to mention you are using `scrollOverflow: true`. And of course, that won't fire the scroll event. As that's using the library iScroll.js as detailed in fullPage.js docs. I'm afraid you won't have it that simple. You can check [this answer](https://stackoverflow.com/a/39369282/1081396) but it might not help you. — Alvaro, Jan 29 '18 at 00:52

Christoph Kohler · Answer 1 · 2018-02-12T08:00:51.343

Use only the css part of AOS and hook up aos-animate on fullpage.js callbacks.

Add the AOS body data manually

<body data-aos-easing="ease" data-aos-duration="1000" data-aos-delay="0">

Add the aos-init class

$('[data-aos]').each(function(){ $(this).addClass("aos-init"); });

Toggle the aos-animate class with fullpage.js callbacks

$('#fullpage').fullpage({
slidesNavigation: true,
controlArrows: false,
onLeave: function(){
    $('.section [data-aos]').each(function(){
        $(this).removeClass("aos-animate")
    });
},
onSlideLeave: function(){
    $('.slide [data-aos]').each(function(){
        $(this).removeClass("aos-animate")
    });
},
afterSlideLoad: function(){
    $('.slide.active [data-aos]').each(function(){
        $(this).addClass("aos-animate")
    });
},
afterLoad: function(){
    $('.section.active [data-aos]').each(function(){
        $(this).addClass("aos-animate")
    });
}});

Example HTML

<div id="fullpage">
<div class="section" id="section0">
    <div class="intro">
        <div data-aos="fade-up">
            <h1>fade me up!</h1>
        </div>
    </div>
</div>
<div class="section" id="section1">
    <div class="slide">
        <div class="intro">
            <div data-aos="zoom-in">
                <h1>zoom me in!</h1>
            </div>
        </div>
    </div>
    <div class="slide">
        <div class="intro">
            <div data-aos="flip-down">
                <h1>flip me down!</h1>
            </div>
        </div>
    </div>
</div>

That might even work, but i can't use fullpagejs callbacks i'm afraid as i need to create some sort of "lazy load effect" (on page scroll (not autoScroll, some divs need to slide up) and i don't think there's a callback for that on fullpage — Nick, Feb 06 '18 at 14:48

fullpagejs and AOS - not working together

1 Answers1

Linked