Delayed scrolling effect

[deiucanta]

Hello,

First of all thank you for your hard work on this library. It is really usefull! I want to make a scrolling effect like the one in this image

Is it possible with ScrollMagic? Could you give me some guides?

Thanks

[krnlde]

First you need to $('html, body').animate({scrollTop: $(window).height()}, 1000); to accomplish the "next slide" stuff.The delay can be done be adding TweenMax tweens to all the different layers of the page for example new ScrollScene().add(TweenMax.to(".yourlayer1", 1, {top: "+=70", delay: 0.1})).addTo(controller); Add a different delay to your layers and you're done.

Consider having a look at the awesome examples by Jan.

Greets

[deiucanta]

Those are not slides. Actually I want to have that effect on scroll.

Could you provide me a basic example on this?

[krnlde]

Unfortunately I can't produce you a complete webpage because of the lack of time. If you understand the essentials of ScrollMagic and consider the examples mentioned, you'll manage to figure it out by yourself.

"Next slide" means "advance/scroll by exactly one window.height()" as seen in your example. The animations are still done on scroll.

[deiucanta]

I'm not sure I understand your solution. Here is how I see it (pseudocode)

when the scroll position is changed
{
    pin every element in it's current state
    x = the difference from the previous scroll position
    if x is positive (scroll down)
        for each section
            d = 10 * index
            move the section up "x" pixels with a delay of "d"
    if x is negative (scroll up)
        for each section in reverse order
            d = 10 * index
            move the section down x pixels 
}

Does it make sense? How to write this in ScrollMagic?

[krnlde]

Erm, no. I think you didn't get the point of scrollMagic yet. It already does what you're trying to do. OK, now seriously, please consider the basic examples done by Jan.

[deiucanta]

I check all of them and I get the point, don't worry. The example above was to describe how it should work, not how to implement it. The question was: "How to write this in ScrollMagic?"

I tried to implement your solution. Check the JS Bin The issue with this is that it happens only once, not every time you scroll.

[janpaepke]

Hi deiucanta,

I think what you are looking for is the same thing as theirf was trying to do here: https://github.com/janpaepke/ScrollMagic/issues/18 Have a look and try my suggested solution.

This wasn't really the intended use for ScrollMagic (as it was intended to for a direct link between scroll position and animation state) but it is still possible. :)

regards, J

[deiucanta]

Hi janpaepke,

I think this is much harder to implement than we might think. We also have to consider the viewport of the browser. Lets say you have a document with 100 sections. Now imagine the next scenario

• you scroll to 20% of the page
• every section goes up from first to last
• you scroll to top of the page
• every section goes down from last to first

Now imagine you have to way for 80 sections that are now in your viewport to make their move and only after that you will be able to see some changes in the viewport.

I think this requires two stacks of hidden sections above and below the viewport. This might be tricky.

[janpaepke]

next week I have more time. I'll read in detail what you are trying to do and will hopefully be able to give you some pointers. :)

[deiucanta]

@janpaepke that would be awesome! :)

Thank you both for your support (@krnlde, @janpaepke).

[krnlde]

A js bin is a good start where we all could collaborate :) same for me: next week more time.

[janpaepke]

All right, so here we go.

first it is important to clear up terminology. In your pseudocode you write "pin every element in its current state". Pinning would mean that its position is fixed within the viewport, regardless of the scroll position. I don't think this is what you want to achieve. What I think you are trying to achieve is sort of a delayed scrolling effect.

I'll first focus on your pseudo code and later tell you why I think it is not really the outcome you should go for. (or may actually desire)

First: Don't add multiple scenes for animations that happen at the same position. This neither wise in terms of performance, nor very readable. Think of a scene like one in a movie. You wouldn't start two scenes in a movie at the same time, would you? Have a deeper look at the incredible possibilties of Tween Max and in this special case use "staggerTo" or "staggerFrom" which were made specifically for this occasion.

Second: Since you want your animations to start at different scrolling offsets of the page you have to chose one of these two routes: update the start position of the scene accordingly or ignore it all together.

Algorithm for path 1:

make tween
add tween to scene
on scroll {
    did scroll direction change? {
        set scene start to scroll position
    }
}

the result would be that the tween is played forward, when scrolling down and reversed when scrolling up. This is basically what I already suggested to you (see Issue https://github.com/janpaepke/ScrollMagic/issues/18).

algorithm for path 2:

make tween and pause it
on scene update {
    did scroll direction change? {
        if scrolling down {
            play tween forward
        } else {
            play tween reverse
        }
    }
}

As you see in this algorithm you don't add the tween to the scene but instead only use the scene to easier detect the scrolling movement and direction. With this path you could actually cut out ScrollMagic alltogether, because you don't really need it just to detect the scroll event and direction.

That is why I took the liberty of implementing algorithm 1 in your js bin. Check it out here: http://jsbin.com/xamerufi/2/edit

Still personally I don't think this is a very good solution. And here's why:

All your elements are in one animation and it triggers whenever you scroll up or down. So if you have a lot of items and scrolled down last and now scroll up it takes ages for the animation to reach the first element.

What you probably really want is to break this down into sections. To do this you should add multiple scenes with different start positions (either using a trigger element or an offset). Give them a duration but DON'T add the tween (like in algorithm 2). Now use algorithm 2 to control the playback but when checking wether the scroll direction changed also checked if you are inside of the scene (scene.state() == "DURING"). With this additional condition you can better control when the tweens are actually fired.

But I might be wrong and the current solution already suits you perfectly. In either case: good luck. :)

hope this helps.

regards, J

[deiucanta]

Thanks for your detailed answer.

First of all, I think you're wrong from the animation perspective. Before thinking on how to implement it we need to figure out how it works as an animation. As I mentioned before "I think this requires two stacks of hidden sections above and below the viewport.". Then, when you scroll you only handle the visible sections.

I could do this in plain jQuery in order to prove the concept and maybe then you will be able to guide me on how to do this in ScrollMagic. But I wonder if it makes sense or is it enough to use jQuery?

[janpaepke]

Hey Andrei,

I really took the time to get into the problem, so I would kindly ask that you take the time to really try to read and understand every part of my answer. I said with the current jsbin solution I focussed on what you wrote in your pseudo code. In your pseudocode the viewport is ignored completely. That is exactly why in the second part of my answer I wrote that I don't think it is a good solution and I also wrote how to make it better, which is breaking it into sections to mind the viewport.

There's one more important decision you need to make: Should it be possible to scroll between the two states? Or are there basically 2 charts and there is no "in between".

regards, J

[janpaepke]

Hey Andrei,

did you mange to figure it out?

regards, J

[deiucanta]

Hey Jan,

No, I didn't. It has been two extremely busy weeks for me and I skipped this for now. I've read your answer carefully and I can't thank you enough for your patience with a newbie like me. Now I'm pretty sure I understand the concepts behind ScrollMagic and I'll be more than happy to use it in a real world project.

The previous "example" was just a GIF I saw and I asked myself how could I make this happen. Then, I found your library and I saw it is a great tool for this kind of stuff. Anyways, I'll let you know when I'm coming back to this.

Also, I may be off topic, but are you available for a small freelancing project? It's a simple scenario that fits perfectly in ScrollMagic's capabilities but I'm just too busy for it. I need you to do just the "skeleton" and then one of my team mates will do the design using CSS. Please contact me at canta.andrei@deiu.ro if you are interested in helping out.