[Stage positioning with Scroll Magic]

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: 

See the Pen mAJmAE by BillKroger (@BillKroger) on CodePen

 

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! 

[Stage positioning with Scroll Magic]

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!

[Stage positioning with Scroll Magic]

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  (make sure to scroll down)

 

Any help with this is greatly appreciated!

See the Pen bwNXZV by BillKroger (@BillKroger) on CodePen