bill-k

Hi Jonathan, I tried your suggestion of wrapping the stage in a parent container and it looks like that did the trick! So I wrapped .stage in a container with the class .stage-parent, and gave it the following CSS properties: position: relative; top: 200px; Then all I had to do was add an offset value of 200px to my scene: var scene = new ScrollMagic.Scene({triggerElement: "#how-it-works", duration: 4000}) .setPin(".stage") .addTo(controller) .setTween(scrollAnimation); scene.offset(200); // offset amount should match the 'top' CSS property on stage's parent container Here's a new codepen with the changes: http://codepen.io/BillKroger/pen/mAJmAE I still think there's gotta be something built into ScrollMagic that solves this too, so I'll post that solution here as soon as I find it. Thanks again for your help with this, Jonathan!

Hi Jonathan, thank you for taking a look at this. I agree, I'd love to find a solution that doesn't rely on using !important in my CSS. I'll go ahead and post to ScrollMagic's forums and see what they come up with over there. Once I arrive at a solution I'll make sure to add it to this thread here too. Thanks again!

Hi, I created an animation using GSAP and ScrollMagic which is working great, but I can't figure out how to adjust the initial position of the stage/graphics (before the user triggers the animation). Currently, I am calling the .setPin method on a container element with the class of 'stage'. This stage element is inside of a larger parent container (#how-it-works) which is the triggerElement for the animation: var scene = new ScrollMagic.Scene({triggerElement: "#how-it-works", duration: 4000}) .setPin(".stage") .addTo(controller) .setTween(scrollAnimation); The issue I'm having is that the stage element is first seen at the top of the parent container, and I would like for it to just be vertically centered within the parent container prior to the animation being triggered. To get a better idea of what I'm describing, see my codepen at http://codepen.io/BillKroger/pen/bwNXZV (make sure to scroll down) Any help with this is greatly appreciated!