Search code examples
animationfullpage.jseventtrigger

Full page scroll with animations triggered on scroll

I've been trying to accomplish this for like two weeks now. Does anyone here have any idea of how do this? I won't even paste my code because it's the worst ever.

Thanks.

Solution

  • Have you check fullpage.js?

    You might be able to get the same scrolling effect by creating your own CSS3 function with the CSS Easing Animation Tool of Matthew Lein.

    Then pass it to the parameter easingcss3 of fullPage.js.

    easingcss3: 'cubic-bezier(1.000, 0.000, 0.000, 1.005) 0.5s',

    Or, if you prefer, you can go for jQuery easing effects and use css3:false. (although it will be smoother with css3)

    Regarding the elements dissappearing on scroll, you'll have to do it by yourself by animating them on a callback such as onLeave or by using the classes added to the body as in this example. 

    body.fp-viewing-page2-slide1 #section1 .moveOut{
    transform: translate3d(0, -400px, 0);
}

    Something in this line.