Create css3 animations between sections with fullpage.js

[@joshua.productions]

DUDE. I could kiss you. Thank you so much. This is EXACTLY what I have been looking for. A client of mine wanted this and Im real new to coding stuff. And I havent been able to figure it out for a while. Thank you so much. I will be making donation for sure.

[@alvaro_trigo]

Thanks Joshua! Glad it helped! :)

[@ederguiovanny7222]

Excelent Work. Congratulations bro!

[@redwolfmendoza]

DUDE!!! You saved me a ton of time! I was going crazy trying to experiment with your onLeave callback in Wordpress and was getting nowhere. This is much easier!

[@alvaro_trigo]

Glad you found it useful! :)

[@cristianm.310]

Thanks for making this, it's been very helpful.

[@alvaro_trigo]

Glad you find it useful!

[@Auzep]

It works great!! So much simple than using callbacks, I've been trying to understand how callbacks work for the last hour but the documentation doesn't explaing it clear enough.

[@henryvongsavath1706]

Great tutorial man! Thank you!

[@alvaro_trigo]

+Henry Vongsavath “DJ Pacman” you're welcome!

[@TheRicardoBandala]

I'm wondering how do you get time to help, document, develop and be so cool. My respects Sr.

[@alvaro_trigo]

+Ricardo Bandala haha! Thanks man! I guess it is an ongoing thing for a few years and not something I did in a couple of weeks :)

[@dixiao3163]

Very useful tutorial!!! Thanks QAQQQQ

[@alvaro_trigo]

+Di Xiao glad it helped!

[@deazlylol]

You really helped me!! Thank you so much bro! Like this video

[@alvaro_trigo]

I'm glad to hear that! ;)

[@Anthony-ro8rq]

I like your videos, your work is awesome! Thank you very much.

[@alvaro_trigo]

+Anthony Roani Thanks!

[@BlackJacketJones]

how to delay an animation on 2nd and 3rd slide until scrolling to those slides?

[@PublishOnline360]

Great script, is it also possible to animate in the second horizontal slide for example and not in sections?

[@whoelseisbored]

Thanks a lot for this guide! Very helpful! I've given it a go and obviously it works for things inside the sections (like the sweets), but is there a way to affect another ID that isn't contained within the sections? I have a fixed navbar element that I'd like to only fade in once scrolling to the 2nd section. Unless maybe you'd do it a different way? Once again, thanks a lot for a great video and an awesome plugin!

[@whoelseisbored]

Just found this... stackoverflow.com/questions/27992060/dynamically-making-an-element-fixed-header-in-fullpage-js Looks like it might solve my issue

[@juliajt3538]

Thanks a lot!

[@alvaro_trigo]

+Юлия Тюленева you're welcome!

[@dazmillion439]

Great video, just what I needed. I have a div "box" which fades gradually using ".fp-viewing" as an anchor to start the transition effect when a user scrolls to the next page. The page starts scrolling when .fp-viewing is triggered and scrolls "box" out of view before the finish of the animation. How can I delay the start of the scrolling when .fp-viewing is triggered till box has done its animation in 4s as I want the user to see "box" disappear before the scrolling to the next section? .box{ transition: all 4s ease-out; -webkit-transition: all 4s ease-out; } .fp-viewing-2 .box{ opacity: 0; }

[@alvaro_trigo]

+DAZ MILLION glad it helped!

[@shanusajid6217]

it will be more helpful if you provide these codes in your description :)

[@zeenimbalkar6137]

nice

[@alvaro_trigo]

I hope it helped! :)

[@KinTuza]

One last quick question I'm wondering whether I can use this library in conjunction with flex-box?

[@alvaro_trigo]

I don't see why not. Try it and check it yourself.

[@KinTuza]

How do you make the various sections automatically page through themselves without scrolling or navigating via pagination? I want my sections to seamlessly be timed to automatically slide between 2 second intervals. Thank you for the plugin and the tutorials.

[@alvaro_trigo]

Hi George, just check one of my other videos for it: kzbin.info/www/bejne/g5m9gWR3r9eJqNU

[@KinTuza]

Álvaro Trigo I just watched it. Thank you very much, I'll try and make a donation next month when I get paid. Again thank you!!!!

[@balticpork1366]

Hello - 1(forgive my language knoliges! 2) I am amazed and confused! I like what you have done - but i cannot understand does you give it for free and what wil be with seo on this page? If free then keywords and author must bee you?? 3) i canot anderstand i will need upgrades for this site or it wil live forever?? ... I find you becose i wanted to find platforms to do somthing good. And you have interesting and very good solution for some pages. And i cannot understand why you are not all over twiter and facbook??

[@Geemodrums]

little question, Im using video.js inside fullpage.js, I set the video cover one entire section, but when window resizes, the video pauses, how can I avoid this? thanks for your plugin, its great!

[@alvaro_trigo]

+German Andres Moreno Rojas if you think its an issue please open a topic in the issues fourm github.com/alvarotrigo/fullPage.js/issues. Otherwise, you can always play it again with javascript using the `afterResize` callback.

[@Geemodrums]

I just added data-ignore="true" on the html, that fixed it. Thanks!

[@Floydsea91]

Great! But how do I add a class to a div if I'm at, lets say, the second page?

[@alvaro_trigo]

To do so you should be using the callbacks the plugin provides. This option is just to do CSS actions based on the body element state.

[@Floydsea91]

Álvaro Trigo Can you give an example? :-)

[@alvaro_trigo]

Examples are provided in the "examples" folder of the plugin.

[@denisnaumov6816]

спасибо!

[@sagocode]

buen tutorial gracias

[@alvaro_trigo]

You're welcome!

[@JohnBriggs9]

Hi Alvaro, love fullpage.js, just running into some issues implementing the simple animations from this video. I'm trying the following css: pastebin.com/knQ5XZma the image I'm trying to animate is #texture, but it refuses to move even before the transition is added!

[@lucasdescause4316]

Hi Alvaro. I started using your plugin last month and it's been working great. I tried to add a new functionality to my site using your plugin today but I ran into a small animation bug. I was hoping you could help me with it. There is an element on a section which i would like to stay fixed on the screen for the next section. I used .fp-viewing-2 in css to create an animate on scroll to the next page at the same speed (using ease) to make it stay at the same position on the screen. This worked but the animation was shaky. Do you have a solution for this or maybe an alternative method? You can view the problem on this page beta.flashbrand.me/SITE/ Thank you in advance!