Create css3 animations between sections with fullpage.js

What people said

Recommends Alvaro · 2014-07 · Stack Overflow · on “fullPage.js with wow.js animations”

Wow.js depends on the scroll event. Fullpage.js doesn't really scroll the page (fires the scroll event) unless you use the option autoScrolling:false or scrollBar:true as detailed in the FAQ of fullpage.js [LINK] . If you still want to use wow without any of those options, the only solution would be trying to use the callbacks afterLoad or onLeave of fullpage.js to add the needed classes or data for wow.js to work. Here's a topic in the fullpage.js github forum about it: [LINK] You can also see my video tutorial [this video] regarding how to create CSS 3 animations by using the fullpage.js state classes.

Recommends Alvaro · 2015-02 · Stack Overflow · on “Initializing/Uninitialized a jQuery plugin on page change”

You should be using the callbacks provided by fullPage.js such as onLeave and afterLoad : $(document).ready(function () { $("#custom-nav").ferroMenu({ position: "center-center" }); $('#fullpage').fullpage({ anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'], onLeave: function (index, nextIndex, direction) { //going to section 3 ? if (nextIndex == 3) { $('.ferromenu-controller').show(); } else { $('.ferromenu-controller').hide(); } } }); }); Or even by using the css3 class added to the body by fullpage.js as detailed in this tutorial [this video] .

Recommends Alvaro · 2015-03 · Stack Overflow · on “fullpage JS animation on section”

Check out this video: [this video] That's ideal to deal with CSS animations, if you are looking for javascript or jQuery animations, then you should use the callbacks provided by fullPage.js [LINK] such as afterLoad or onLeave : $('#fullpage').fullpage({ anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'], afterLoad: function(anchorLink, index){ var loadedSection = $(this); //using index if(index == 3){ alert("Section 3 ended loading"); } //using anchorLink if(anchorLink == 'secondSlide'){ alert("Section 2 ended loading"); } } });

Recommends Alvaro · 2015-03 · Stack Overflow · on “Mobiles not detecting anchor change to toggle menu”

You should not be using the change in the URL to trigger any action. That's not the way to do it with fullPage.js. You should be using the callbacks provided by the plugin such as onLeave or afterLoad . Or you could even use the class added to the body element as suggested in this tutorial [this video] The reason for it is because fullPage.js doesn't change the location hash but uses the HTML5 History API [LINK] for mobile phones due to problems with the location hash behaviour in Mobile Chrome [LINK] : //Mobile Chrome doesn't work the normal way, so... lets use HTML5 for phones :) if (isTouchDevice || isTouch) { history.replaceState(undefined, undefined, '#' + url); } else { var baseUrl = window

Recommends Alvaro · 2015-03 · Stack Overflow · on “svg animation on anchor”

Consider also using only CSS for it. fullpage.js adds a class to the body element. Check this video [this video] .

Recommends Alvaro · 2015-04 · Stack Overflow · on “Change fullPage.js Options on Events”

You can not change options in that way. If you dont want to show the slides navigation just hide it with jquery or with CSS. I would recommend you to check this video [this video] about how to take advantage of the CSS class added to the body depending on the section you are in. You could do it in this way as well, taking into account that the class active is added to the active section in the viewport. #section2.active .fp-slidesNav{ display:none; } Online demo [LINK] Or by using events: $(document).ready(function() { $('#fullpage').fullpage({ sectionsColor: ['#7396FF', '#FFFFFF'], controlArrows: false, onLeave: function(index, nextIndex, direction){ if(nextIndex == 2){ $('#section2').find('.fp-

Recommends Alvaro · 2015-07 · Stack Overflow · on “fullPage.js onLeave event triggers”

You are working in an answer provided one year ago... Now the onLeave event has 3 parameters intead of two as you can see here in the documentation. [LINK] onLeave: function(index, nextIndex, direction){ Regarding your questions, to change a class you need javascript. But maybe that's not what you need. Check out this video [this video] . Remember fullPage.js adds the class active to the active section, and in the body element it adds the class fp-viewing-xxx where xxx is the anchor name of the current section or its index if no anchors are provided. This way you can play with css: #demo{ color: red; } /* applied only on the section with the anchor `firstpage` */ body.fp-viewing-firstpage #demo{

Recommends Alvaro · 2015-07 · Stack Overflow · on “fullpage.js animation with onLeave and afterLoad”

Three things: If you post a jsfiddle, make sure it works... because it doesn't at all. You are initializing fullPage.js twice in your site. Inside myjs.js and outside it.. You can create animations with just css if you want. Check this video [this video] . If you want the images to dissappear again you'll have to tell fullPage.js to do it. It won't magically happen. Just use the onLeave again and say something like "whenever the next slide is not section 2, then hide my images". if(nextIndex != 2){ //hide images }

Recommends Alvaro · 2015-09 · Stack Overflow · on “fullPage.js scroll to fixed header”

I would recommend you to do it with CSS directly. Check out this video tutorial [this video] in which you can see how to use the class added to the body element to fire your own CSS changes. Otherwise, you can also do it using callbacks such as afterLoad [LINK] or onLeave [LINK] . You have an example of it available in the fullpage.js files [LINK] . You even have an example of how to use them in this Apple demo [LINK] also available in the files to download [LINK] .

Recommends Alvaro · 2015-10 · Stack Overflow · on “How can I change an image based on URL hash when using fullpage.js?”

As pointed out by @Brian Ray you should be using fullpage.js callbacks for it. You can use afterLoad [LINK] or onLeave for sections and afterSlideLoad or onSlideLoad for slides. For example: $('#fullpage').fullpage({ anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'], afterLoad: function (anchorLink, index) { var loadedSection = $(this); //using anchorLink if (anchorLink == 'secondSlide') { alert("Section 2 ended loading"); } } }); Although in your case I would directly do it in CSS by using the css class of the type fp-viewing-section-slide that fullpage.js adds to the body element. Check out this video tutorial [this video] where it explains how to use it. For example: