Define scenes (starts and offsets) relative to the whole page

[artemivanyk]

Hey Jan,

I think this still needs clarification: janpaepke/ScrollMagic/issues/222 The docs section for Scene new ScrollMagic.Scene(options) and your answer suggest that to get a scene starting position to be calculated relative to page’s scroll position 0 one needs to just omit triggerElement in options for Scene.

Yet here: http://codepen.io/anon/pen/qdJEwJ and by removing triggerElement in examples: http://janpaepke.github.io/ScrollMagic/examples/basic/scene_manipulation.html we see that the start of the scene is calculated relative to triggerHook.

So, is this the intended behaviour?

[janpaepke]

yes it is.

If you don't set neither triggerElement, nor offset, the start indicator of the scene will be exactly where the triggerHook is, so that the scene starts up immedeately. Of, if you add an offset it will start after scrolling that particular offset, regardless of triggerHook position.

Does that answer your question?

[artemivanyk]

It does indeed; although my point is that the docs are confusing ;–)

https://github.com/janpaepke/ScrollMagic/blob/master/dev/src/ScrollMagic/Scene.js#L25

If no triggerElement is defined this will be the scroll distance from the start of the page

https://github.com/janpaepke/ScrollMagic/wiki/Understanding-:-The-scene-trigger-position

If undefined the scene will start right at the start of the page (unless an offset is set)

After reading those it is not at all apparent that what you mean by “the start of the page” is not zero coordinate of either scroll plane, but a dynamic value calculated as: 0 + offset + triggerHook coefficient × containerHeightOrWidth. containerHeightOrWidth being a variable.

I wonder how to get rid of the last term in that equation? Or, in other words, how to define scenes relative to a container, not relative to triggerHook position inside that container?

It seems to me that now the only way to do this is to provide a DOM node for triggerElement that has its top/left aligned with the body’s top/left coordinate.

[janpaepke]

not really :) Simply set the triggerHook to "onLeave" or 0. :)

And your Forumula isn't quite correct. the reason is that the triggerHook stays in position, when scrolling, the start of the scene (defined by offset and triggerElement) move. So as soon as the user scrolled a little, it changes. That is the whole reason there is a triggerHook.

But I'd love to make the docs better if you have any suggestions?

[artemivanyk]

And your Forumula isn't quite correct.

Not my invention :-), triggerPosition method implements it: https://github.com/janpaepke/ScrollMagic/blob/master/dev/src/ScrollMagic/Scene/getters-setters.js#L278

the reason is that the triggerHook stays in position, when scrolling, the start of the scene (defined by offset and triggerElement) move.

I meant “dynamic” in way that the resulting value depends on the user’s viewport size, determined at run time.

not really :) Simply set the triggerHook to "onLeave" or 0. :)

I’m sorry I forgot to mention this explicitly, but that is the crux of the issue: triggerHook > 0. Certainly setting triggerHook coefficient to zero gets rid of the term in a way, but the question really is: how to achieve this with triggerHook greater than zero?

The answer to that question will make the docs better.

[janpaepke]

how to achieve this with triggerHook greater than zero?

still not sure, what exactly you mean. achieve what? to define the start of the scene without defining a triggerElement just add an offset and the scene will start after scrolling exactly that amount of pixels, regardless of the triggerHook setting.

Or are you saying you want a relative offset, like "100%" and the offset would be 100% of the viewport's height?

If that is the case you are asking the same as in this issue: https://github.com/janpaepke/ScrollMagic/issues/337

In the meanwhile I did find a potential usecase though: https://github.com/janpaepke/ScrollMagic/issues/339#issuecomment-119318062

So please let me know if this is what you are talking about. :)

[artemivanyk]

Suppose you have several sections of the same height starting from the top of the page. You want the scene to start at the bottom of the third one and continue for exactly the height of two sections. And you need triggerHook to be in the middle of the viewport (0.5). The order of the sections is not guaranteed (they are generated or depend on user input), so you can’t define the start of the scene by providing the fourth section as triggerElement. Though you know for sure that it will always be: sectionHeight × 3.

http://codepen.io/anon/pen/RPqGbx

My thinking (reinforced by the docs) was: since when triggerElement is provided, the start of the scene is calculated from the position of that DOM element (and does not depend on the triggerHook position) it must be that when you omit triggerElement it just falls back to the scroll container itself.

I thought I could achieve the above with this JS code: http://codepen.io/anon/pen/waQzdO

What I discovered was that a second offset appears (a third term in the equation mentioned earlier), making the start of the scene dependent on the viewport size and triggerHook position.

And to get the scene start/duration to be where I wanted them to be I would have to set triggerHook to 0: http://codepen.io/anon/pen/OVaRLw

But our requirement is to have triggerHook in the middle of the screen. That’s what brings this question: how to define the start of the scene relative to the scroll container, with triggerHook > 0?

To solve this, as it stands now, you have to work around ScrollMagic API by creating a DOM element and providing it as triggerElement. This element would have to be positioned in alignment to the start of either: a) the scroll container, in order to be able to explain the idea to ScrollMagic through offset, i.e. offset = sectionHeight × 3; b) or the fourth section.

I think the solution is a bit overcomplicated for such a simple thing as defining a scene relative to a scroll container. Or did I miss something very obvious? :-)