Fade in

[fnbns]

Hello, do you think transitions can be added (fade-in, fade-out)?

I've tried checking with viewPortChecker if content is visible and add different classes based on that, but it seems that when I use scruffily viewPortChecker won't detect either the classes are visible or not. Can you guide me a bit in what 'before' and 'after' methods do ?

Thanks,
Alex.

[lukehaas]

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.

[fnbns]

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 ?

[lukehaas]

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.

[ncaroyannis]

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');
            },
       });
    });