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

Question

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

Yeah here - https://jsfiddle.net/60xvk37f/1/ I can't get it working though because I'm not too sure how jsfiddle works lol — ZeddTT, Jun 21 '16 at 10:53
I am now trying to remake the site you made, I noticed you use center tags which are not supported in html5, you should use css for that. — , Jun 21 '16 at 11:14
Thank you. Please don't change too much though -- I'm trying to learn HTML so I'd like some of my work to be original (though most of this site was made using plugins). As for the I know but I was feeling lazy :P — ZeddTT, Jun 21 '16 at 11:54

score 2 · Answer 1 · 2016-06-21T12:18:59.123

2

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

edited Jun 21 '16 at 12:18

answered Jun 21 '16 at 11:52

You are not including properly the `css` styles of fullpage.js. When doing so the animation in the 2nd section doesn't seem to work. Not sure why. – Alvaro Jun 21 '16 at 12:16
Why am I not including css styles properly? – Jun 21 '16 at 12:18
Check the javascript console. You are trying to load `jquery.fullPage.min.csss` instead of `.css` – Alvaro Jun 21 '16 at 12:19
Interesting, I copied the link from cdn site, but when fixing it, animations are broken. – Jun 21 '16 at 12:20
Also, you don't need to remove the `anchors` option. It should work as expected. You can try it in your codepen and see how it works well. – Alvaro Jun 21 '16 at 12:22
I figured it out, it was because the scrollBar false, chaning it fixed the problem. – Jun 21 '16 at 12:22
If I add anchors animation when scrolling back to top are broken. – Jun 21 '16 at 12:23
Working fine for me in [your own codepen](http://codepen.io/alvarotrigo/pen/MebYXE) Anchors have nothing to do with the animations. – Alvaro Jun 21 '16 at 12:25
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/115205/discussion-between-leon-laci-and-alvaro). – Jun 21 '16 at 12:27
I'd join you guys but I don't have 20 rep. This seems to be working though, however I would like to keep the anchors :/ – ZeddTT Jun 21 '16 at 12:32
Anchors seems to mess up the animation when going to top. – Jun 21 '16 at 12:34
Yeah, maybe I should open an issue on the devs' Github – ZeddTT Jun 21 '16 at 12:36
Oh, I didn't realise Alvaro was the dev! haha. Also about the ".csss" thing you guys are arguing about in chat, those CDN links were just for the jsfiddle. I have the files downloaded over here and they make no difference, the animation still jumps when going to the top page – ZeddTT Jun 21 '16 at 12:44
Even when adding more sections, animation jumps only when going to #top – Jun 21 '16 at 13:00

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

1 Answers1