Cross-dissolve transition for scrolled elements

[wmodes]

This is not an "issue" but there is a lot of concentrated scrollmagic knowledge here, so I ask. Maybe these will be interpreted as feature requests. In the meantime, I need a clever solution

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.

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?

[janpaepke]

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/

hope this clears things up...

[janpaepke]

did this resolve your issue?

[wmodes]

It will take a little bit for me to reverse engineer the jsfiddle, but that is exactly what I wanted. Thank you.

[janpaepke]

you're welcome.

[wmodes]

Jan, here is a jsfiddle that is closer to what I was seeking. Your fiddle helped me get there.

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/

Wes

[janpaepke]

cool. thanks for sharing! :)

[wmodes]

Jan, looking at the following fiddle https://jsfiddle.net/wmodes/kkc47u52/ can you see a graceful way of moving frame 3 up behind frame 2?

In the earlier fiddle I did a faux pin setting frame 3 to position:fixed, but I lose the ability at that point to pin it properly. It looks good in the fiddle but in practice not pinning frame 3 makes the following frame unpredictable.

I know this is a bit of an abuse of scrollmagic, but nailing this adds the ability to use scrollmagic to do a whole host of cinematic transitions including dissolve, fade to black, flare to white, and even cuts.

[janpaepke]

Really not sure what you mean by "moving frame 3 up behind frame 2"?

It still seems to me like you're over complicating things.

All the transitions you speak of are definitely possible and to be honest nothing new and what ScrollMagic was developed for.

Please clarify how the current animation is different from what you're trying to achieve and I might be able to help you sort this out.

[lschneiderman]

I had to code it this way to get it to work.

var hide01 = TweenMax.to('#first', 1, {opacity: 0}); //fade 01 image to 02 image

//pin container
var scene = new ScrollMagic.Scene({
triggerElement: "#pinned",
            duration: $(window).height(), 
            triggerHook: 0, 
            reverse: true 
})
        .setPin("#pinned").addTo(controller);   

// fade image
var scene = new ScrollMagic.Scene({ 
        triggerElement: '#pinned'
})
setTween(hideAni)
.addTo(controller);