search

matthieua / WOW

Reveal CSS animation as you scroll down a page
https://www.delac.io/WOW/
9.92k stars 4.11k forks source link

I'm using FullPage.js only 1st page works #255

Open anonet1 opened 8 years ago

anonet1 commented 8 years ago

I'm using this: http://alvarotrigo.com/fullPage/ and here is my html: `

<div class="section" id="section2">
   <div class="myContent">
     <div class="col-6 wow bounceInUp animated" data-wow-duration="2s">
       <img src="img/Endorssm-Phone.png" />
      </div>
    </div>
</div>`

I can see that on second section visability is hidden -- where as on 1st one is visibility: visible; How do I fix this..? BTW my css for visibility: visible; didnt work on second section.

graingert commented 8 years ago

@anetk do you have a JS fiddle with your code on?

graingert commented 8 years ago

@anetk or just the page where you're using this.

graingert commented 8 years ago

fwi you should use

```html
<div id="fullpage">
  <div class="section" id="section0">
    <div class="myContent">
      <div class="col-6 wow fadeInUp" data-wow-duration="2s">
        <img src="img/Endorssm-Phone.png" />
      </div>
    </div>
  </div>
  <div class="section" id="section2">
    <div class="myContent">
      <div class="col-6 wow bounceInUp animated" data-wow-duration="2s">
        <img src="img/Endorssm-Phone.png" />
      </div>
  </div>
</div>
```
anonet1 commented 8 years ago

it seems to be working now in my original case. but animation happen on window loading instead of once I actually scroll to that section... Do i have to set that manually with js?

graingert commented 8 years ago

@anetk I can't see your page working you're using a lot of resources that arn't on that page. Can you link me to the site that you're actually using this on?

graingert commented 8 years ago

@anetk please note that by linking to this wow.js project's source code you MUST release your website under the GPL. Please consider switching to the official https://wow.js.org library.

anonet1 commented 8 years ago

Sure. Ok look at this now - http://codepen.io/netk/pen/pbbZLy - i cleaned it up a bit. You will see that 1st one works great but than on the next scroll not...

graingert commented 8 years ago

I'm not sure what's going wrong, can you remove all the html unrelated to the error.

anonet1 commented 8 years ago

See now - http://codepen.io/netk/pen/pbbZLy

alvarotrigo commented 8 years ago

Check fullpage.js FAQs. The scroll event isn't propagated by fullpage.js as it doens't really scroll the site. It uses translate3d transformations unless you use scrollBar:true or autoScrolling:false.

Answer in stackoverflow as well.

anonet1 commented 8 years ago

thanks. I also had issues with huuuge space on one side on the mobile... Is that some common issue? It looks very strange... Thanks