Cross-dissolve transition for scrolled elements

Question

I am creating a long single page website and using ScrollMagicJS v1.3.0 to trigger events and to make some elements sticky. I would like to create a variety of other transition effects as one scrolls down the page.

Here's a jsfiddle that replicates the horizontal scrolling of my site.

scrollControl = new ScrollMagic({
    vertical: false,
});

var myScrollScene = new ScrollScene({
    triggerHook: 0,
    offset: 0,
    triggerElement: '#shot-0-1',
    duration: '100vw',
    pushFollowers: true
})
    .setPin('#shot-0-1')
    .addTo(scrollControl);

For instance, I want to create fade-to-black, flare-to-white, and cross-dissolve transitions between pages.

I understand some of the basic principles of HTML5 transitions, how to make one image dissolve into another, but I haven't been able to figure out a clever way to do it using the ScrollMagic scrolling.

Things I've considered: The next page slides under the current page and then transitions from 1.0 to 0 opacity using ScrollMagic triggers?

But how to do it in a way non-hacky and consistent with ScrollMagic's framework?

score 1 · Accepted Answer · answered Mar 18 '15 at 15:25

This has been asked and answered in the ScrollMagic's issues section: https://github.com/janpaepke/ScrollMagic/issues/269

here's a copy:

A common misconception is that you need to do everything with the ScrollMagic pin functionality. If the content isn't moving within the scroll flow anyway (it stays in position and is faded out or moved to side or sth. like that) you can have it as "fixed" right from the beginning. That saves a lot of work and confusion.

The only reason to use ScrollMagic's pinning functionality is when an element should sometimes scroll naturally with the DOM and sometimes it shouldn't.

So if you have elements that are in place and should just be replaced by others, have them fixed the whole time. Like this: https://jsfiddle.net/janpaepke/6kyd6ss0/1/

If it is indeed a case were you should use ScrollMagic's pinning method, then do the animation inside of a wrapper, that you pin. Like this: https://jsfiddle.net/janpaepke/6kyd6ss0/3/

score 0 · Answer 2 · edited Apr 24 '15 at 07:47

Here's the solution I settled on.

scrollControl = new ScrollMagic({
    vertical: false,
});

vw = $(window).width();
console.log("width:" + vw + "px");

// pin frame 2
var myScrollScene = new ScrollScene({
    triggerHook: 0,
    triggerElement: '#shot-2',
    // This pin is considerably longer than average
    offset: 0,
    // duration = stickyLength + disolve_duration
    duration: 1.5 * vw + 'px'
})
    .setPin('#content-2', {
        pushFollowers: false
    })
    .addTo(scrollControl)
    .addIndicators({
    zindex: 100,
    suffix: 'pin2'
});

//  move frame 3 up early and pin it
var myScrollScene = new ScrollScene({
    triggerHook: 0,
    triggerElement: '#shot-2',
    offset: 0,
    // duartion = 1.5, but why?
    duration: 1.5 * vw + 'px'
    // the faux pin doesn't actually expand the container the way SM does
    // so the results are a little strange
})
    .on("start end", function (e) {
        $('#content-3').css({left: 0, position:'fixed'});
    })
    .on("enter leave", function (e) {
        $('#content-3').css({left: 0, position:'relative'});
    })
    .addTo(scrollControl)
    .addIndicators({
        zindex: 100,
        suffix: 'pin3faux'
    });

var dissolve = TweenMax.to('#content-2', 1, {
    autoAlpha: 0
});

// dissolve frame 2 to frame 3
var myScrollScene = new ScrollScene({
    triggerHook: 0,
    // Note that though we are fading frame 2, we are
    // using the arrival of frame 3 the trigger
    triggerElement: '#shot-2',
    // The sets the rapidity of the dissolve
    // offset = stickyLength
    offset: 0.33 * vw + 'px',
    // The sets the rapidity of the dissolve
    duration: 1 * vw + 'px'
})
    .setTween(dissolve)
    .addTo(scrollControl)
    .addIndicators({
        zindex: 100,
        suffix: 'dissolve'
    });

I used a pushFollowers: false on a pin and z-index to slide the next frame (also pinned) behind the first. Then a Tween to dissolve into the second frame. The result is a nice cinematic dissolve feature with adjustable duration.

Hope it is useful to others.

https://jsfiddle.net/wmodes/b4gdxeLn/

Cross-dissolve transition for scrolled elements

2 Answers2