Scrollmagic: Pin spacer too big

[suzukijak3]

Hey so I just started learning how to use this awesome plugin today, so thanks for writing it. I just have a question and I cannot figure it out. I am trying to pin a couple items, first the black bar at the top of the image here to stick the whole way ( it does)

And I am pinning the green section below it, only problem is the white space in between. Here is the site with no pins on it.

When I inspect the menu its adding the white space and pushing my content down in the green section. How can I get rid of this?

[suzukijak3]

I guess I should post my code also.

var scrollMagicController = new ScrollMagic();

// Create Animation for 0.5s
// var tween = TweenMax.to('#animation', 0.5, {
//     color: 'rgb(255, 39, 46)',
//     scale: 3,
//     rotation: 360
// });

// Create the Scene and trigger when visible with ScrollMagic
var scene = new ScrollScene({
    triggerElement: ".topbar",
    triggerHook: 0,
    reverse: true})
.setPin(".topbar")
.addTo(scrollMagicController);


var scene1 = new ScrollScene({
    triggerElement: ".greenbar",
    triggerHook: 0,
    offset: -132,
    reverse: true})
.setPin(".greenbar")
.addTo(scrollMagicController);

var scene2 = new ScrollScene({
    triggerElement: ".greybar",
    triggerHook: 0,
    offset: -132,
    reverse: true})
.setPin(".greybar")
.addTo(scrollMagicController);

var scene3 = new ScrollScene({
    triggerElement: ".white-top",
    triggerHook: 0,
    offset: 0,
    reverse: true})
.setPin(".white-top")
.addTo(scrollMagicController);

var scene4 = new ScrollScene({
    triggerElement: ".grey-bottom",
    triggerHook: 0,
    offset: 0,
    reverse: true})
.setPin(".grey-bottom")
.addTo(scrollMagicController);

var scene5 = new ScrollScene({
    triggerElement: ".white-bottom",
    triggerHook: 0,
    offset: 0,
    reverse: true})
.setPin(".white-bottom")
.addTo(scrollMagicController);

// Add debug indicators fixed on right side
   scene.addIndicators();
   scene1.addIndicators();
   scene2.addIndicators();
   scene3.addIndicators();
   scene4.addIndicators();
   scene5.addIndicators();
});

I have tried using the pushFollowers: false and no luck there either.

[janpaepke]

Hi
It's very difficult to tell for me without actually being able to inspect the page.
One thing is certain though: pushFollowers: false can not have an effect, because all your scenes have no duration, so it's disabled by default.
Now as to why there is the white-space appearing I can only speculate.
It feels like you're doing to much pinning, if there's only 2 elements that are supposed to be pinned.
The spacer that appears should have exactly the size of the pinned element and replaces it while it's taken out of document flow.

Another question would be:
If you're pinning elements without a duration (so indefinitely) right from the beginning, why use pins in the first place? Just set them to position: fixed.
Pins only really make sense, if an element should be in scroll flow at one point and taken out at another.

If this doesn't help clear things up, please post a link to a jsfiddle or a demo site I could inspect.
If you host it yourself, please make sure it will stay available for future reference, as requested in the support guidelines.

Some general advice:
Remember that all options are (as the name suggests) optional.
There is really no need to set offset: 0 or reverse: true for every scene, as those are the defaults and will be set automatically, if not supplied.
Also have a look at the controller option globalSceneOptions.
If you supply that as {globalSceneOptions: {triggerHook: 0}} you don't have to do it for each individual scene.

[suzukijak3]

Ok so I set up a jsfiddle here ,http://jsfiddle.net/suzukijak3/cxr7t4Le/2/, but cannot recreate it.

I did end up giving the black menu a height and the white space went away. I dont have a height specified in the jsfiddle tho and there is no white space. Its almost as if the html is making the black menu seem taller than it really is. Is this standard to give your element a fixed height in order for pins to work?

The only items that would make sense to use position fixed on is the menu and the green section. The other 3 sections below it are scrolling on top of the green box. Like the jsfiddle.

[janpaepke]

Well it also makes sense for the top menu, as my guess is it should be right at the top.
The issue with that though is that there will be no spacers and the following elements won't be pushed down accordingly.
You could add a margin to the first and second div to account for that: http://jsfiddle.net/cxr7t4Le/4/

But this only works if you know the height of the menu.
So especially for the case you don't know it or it is dynamic, you can use ScrollMagic.
This should answer your question: You shouldn't have to give pinned elements a defined height.

A possible explanation might be that the height of the menu changes from when ScrollMagic initializes it to when the page is fully rendered.
To check that you could add a line of code, right before you define the pin for the menu to log the height:

console.log($(".menu").height());

Then run the same thing from the console when the page is fully rendered and compare the values.

Again this is guesswork and I can only really help you if I see the problem.
So try to reproduce it in the fiddle or make a demo publicly available.

[suzukijak3]

You nailed it, that console.log is showing its height at 132 before the page loads then after its only 92. I need it to be 92 but I know what the reason is now thanks to you. I am moving an element with jquery in the topbar menu on page load, thats why the height is 132 then 92. I am sorry I couldn't get it to a location for you to see, but I now see that this is my fault. Thanks for the help, I really do appreciate it. I'll try to find another way to do what I am doing to avoid this problem.

[janpaepke]

You can either do your fix, before you initialize the pin or eliminate the need for it.
It's exactly the reason why I always advise against using jquery "fixes" to brute force a layout to look some way.
It is usually the better, faster, cleaner and more cross-browser compatible way to do it in pure css.
Sure this will sometimes mean a little more work and a little more "why won't it just do what I want?!", but the more you force yourself to do it, the quicker you will become the next time and the more you will see the benefits.
Trust me on this. =)

[suzukijak3]

Yes I agree, I am going to try to do it without jquery. The crazy thing is that it is done before I initialize the pin but I want to fix it to use css or find a way to include it in the layout through the theme. Thanks again!