CODEWITHSUNDEEP
javascriptjquerycssfullpage.jswow.js
ZeddTT
ZeddTT

Reputation: 11

Getting WOW.js and fullPage.js to work together when not using scrollbar?

So, I'm using the fullPage.js to create a one page style site. I decided I wanted to add some animations, however not having any knowledge of jQuery, I decided to opt for animate.css and WOW.js to go with it.

As I understand, however, fullPage.js removes the scrollbar and so WOW.js can't see when I've scrolled past a point. so I used 

scrollBar: true

and 

body,html{
    overflow: hidden !important;
}

to remove the scrollbar. This method works, however for some reason the animation when I'm scrolling to the first section (top of the page) is gone. I still get the animation when scrolling down. How can I fix this? (GIF: http://i.imgur.com/pom46OF.gifv)

EDIT: here's the site by the way - https://farooq.gq/portfolio/#top

Upvotes: 1

Views: 1885

Answers (1)

user4442171
user4442171

Reputation:

The anchor option seems to mess with animations, remove it. And also make sure you initialize wow on section or slide leave:

JS:

$(document).ready(function() {
    $('#fullpage').fullpage({
        'navigation': true,
        'navigationPosition': 'right',
        navigationTooltips: ['Top', 'Who Am I?'],
        scrollBar: true,
        onLeave: function(){
            new WOW().init();
        }
    });
});

Codepen: http://codepen.io/leonlaci/pen/WxoNqN

Upvotes: 2

Related Questions