Fade in about scrollify HOT 4 CLOSED

This is super late, but here's a solution in case anyone is looking for this specific functionality:

CSS:

.section {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity 0.3s;

    &.selected {
        opacity: 1;
    }
}

JS:

$(function() {
        $.scrollify({
            section: ".section",
            scrollbars: false,

            before: function(index)
            {
                items = $('.section');
                item = $($('.section').get(index));

                items.removeClass('selected');
                item.addClass('selected');
            },
       });
    });

from scrollify.

Do you mean adding fade-in,fade-out on the page section? As that currently isn't possible, that would require the page sections to be layered on top of each other rather than stacked linearly as they currently are.

The before and after methods are called before and after the scroll transition respectively.

from scrollify.

Hey man, thanks for the answer. Can you give me an example? I was thinking to hide the next section on before and on after to show it with a fade-in, do you think this might work ?

from scrollify.

You're probably better off creating a wrapper for your content within the sections and fading them in/out rather than fading the sections in/out. If you're using jquery fade methods then I think fading out will end with applying a display:none to the element, which, if applied to a section, would change the position of all sections as a result. This would mess things up for scrollify.

Regarding before/after.
Within the after, for example, the method receives the current section index and an array of all sections so you can use that to find the content of the section and apply your animations etc to it.
I suggest adding console.log(arguments); to your after method to get a better idea of how what you have access to here.

from scrollify.