February 29, 2016 at 5:07 pm #238576simooParticipant
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.
So two questions really: why does the inline margin:auto style get added, and why is it taken away during the scene?
Thanks!February 29, 2016 at 8:31 pm #238578ShikkedielParticipant
All I can say is that the shift to the side isn’t directly caused by
margin: autobut 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.February 29, 2016 at 8:45 pm #238579simooParticipant
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:autoset on the container. ScrollMagic introduces a container around pinned objects, and when it reaches the trigger point the width of the container changes from
autoto 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.March 6, 2016 at 12:22 pm #238771MottieModerator
I don’t know why
margin: autois added inline, and this may not be an ideal solution, but you override the effect by adding an
!importantflag to your css margin:
margin: 20px 0 0 0 !important;December 10, 2019 at 12:05 am #300077melo077Participant
Adding “display: inline-block” to the container solved the problem for me.