Skip to main content

Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #238576
    simoo
    Participant

    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!

    #238578
    Shikkediel
    Participant

    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.

    #238579
    simoo
    Participant

    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.

    #238771
    Mottie
    Moderator

    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;
    
    #300077
    melo077
    Participant

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

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.