ScrollMagic centers pinned object

[simoo]

Hey! Getting to grips with ScrollMagic and already hit a weird hurdle.

The problem I’m hitting is that pinning an object also seems to center it. Is it supposed to? It sets an inline margin: auto – before the scene even starts.

Not only does this take effect before we hit the trigger, the centring actually goes away once we hit the trigger and the scene starts. The effect is that the object starts out centred (which it shouldn’t even be, right?) and during the scene it jumps to one side.

Check out this simple example to see what I mean.
http://codepen.io/anon/pen/LNEyjj?editors=1000

So two questions really: why does the inline margin:auto style get added, and why is it taken away during the scene?

Thanks!

[Shikkediel]

All I can say is that the shift to the side isn’t directly caused by margin: auto but by switching from relative to fixed positioning. The margin value is always there but is to no effect with fixed, that’s why it changes place.

[simoo]

Hey! Thanks for having a look at this.

The position to the side is where it “should” be the whole time. It’s actually the centring that’s the problem.

I believe the “pinning” shouldn’t affect the position of the object, it should just pin it in place, hence the fixed positioning.

After looking again, it’s now looking like the problem could also be the width:auto set on the container. ScrollMagic introduces a container around pinned objects, and when it reaches the trigger point the width of the container changes from auto to 204px (the width of the object), so even though the object is still centred the container now fits snugly around it.

Either way there must be something wrong here and unsure whether it’s a bug or if I’m misconfiguring it somehow.

[Mottie]

I don’t know why margin: auto is added inline, and this may not be an ideal solution, but you override the effect by adding an !important flag to your css margin:

margin: 20px 0 0 0 !important;

[melo077]

Adding “display: inline-block” to the container solved the problem for me.

[Author]

Posts