Problem with the Trigger Hook

[Phenelo]

Good day!

I'm trying to make the simple tween example but I'm stuck with this problem. I have a spacer section before my trigger div and box div (the one that will be animated). Everytime I set the spacer height to like greater than the screen's height, the trigger hook will not be on the center anymore but it's in the bottom of the screen (sometimes off-screen). Why does this happen?

Thank you in advance.

[Phenelo]

Update: I tried pasting my own code in jsfiddle but it works no matter how large the height of the spacer is. But in my local, the trigger hook is still off screen. What could be the problem?

[janpaepke]

First please confirm terminology: Are you using the ScrollMagic debug extension? The triggerHook is the blue mark on the right. Are you sure it moves? Or does in fact the scene's start position move?

[janpaepke]

Oh, here's a guess if the spacer indeed changes the position of the triggerHook it might be because it changes the size of the scroll container.
If so the container maybe isn't set up to scroll overflowing elements.

[Phenelo]

Thanks for the response! I'm using both the scrollmagic and scrollmagic debug extension. Like what I've said, in jsfiddle it is initially centered (I assume it is the default).

[Phenelo]

The problem is that whichever height I change, be it the container or the spacer, the triggerHook's position changes. Most of the time it is off-screen when the height is greater than the screen's height.

[janpaepke]

Okay: Again my guess is that you use a custom container element and the change of the spacer influences the height of the container.
triggerHook is "onCenter" by default, which means it will take the height of the container and divide it by 2 and this is where it will be positioned.
So if the height of the container changes, obviously so does the triggerHook.
Normally the height of the content does not influence the height of the container.
But if for example you don't really scroll within the container, but the container itself, this means it will also change the triggerHook position, as it is positioned in relation to the container position.
This can happen if, for example you don't set the container to overflow: scroll.

So please check if changing the height of your spacer also influences the height of your container and get back to me.

[Phenelo]

Thanks for replying. I'll check my work tonight 'cause I'm not in my workstation now. But correct me if I'm wrong, the container target of the triggerHook is the parent of the element you set as the triggerElement and this parent element will be divided by two?

[janpaepke]

No. The container is the element you supply as the container option when initializing the controller.
The default value is the window element.
There is always only one scroll container per controller and multiple scenes happening at different scroll offset positions of the container.
See here: http://janpaepke.github.io/ScrollMagic/docs/ScrollMagic.html#ScrollMagic

[Phenelo]

Oh, now I get it. And you're correct. I've used a custom container:

As you can see, I changed the spacer's height. It didn't affect the container's height. Fortunately, I got it now. I've set the container's height to 100% so that it will inherit the window's height. In that case, the triggerHook will be placed at the center throughout the page. Thank you for enlightening my muddled mind!

[janpaepke]

glad I could help.