Stage positioning with Scroll Magic

[bill-k]

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

[Jonathan]

Hello, and Welcome to the GreenSock forum!

 

Thank you for the example. Even though ScrollMagic is made with GSAP, it is not made by GreenSock. This looks more like a question about the ScrollMagic API and CSS. From what i can tell in your codepen, is that the top CSS property is being manipulated by ScrollMagic.. No matter what i did to set a default top value it was being overridden by ScrollMagic. I could override inline with !important in the style-sheet but using !important is a last resort type of thing.

 

But if it was me i would first position your .stage element so it is vertically centered before even adding ScrollMagic in the mix. So this way your elements are already positioned the way you want. Also You might want to target .stage parent so this way ScrollMagic doesn't override .stage top css property.

 

There might be other users in the forum that can help you with this ScrollMagic question, since i am not familiar with ScrollMagic since i do not use it.

 

Maybe the ScrollMagic git page can help with the support of ScrollMagic if no one else chimes in:

 

On the ScrollMagic git page it says the following:

 

Should you still be unable to figure it out, feel free to post your questions in the project's issues section.

 

https://github.com/janpaepke/ScrollMagic/issues

 

https://github.com/janpaepke/ScrollMagic

 

So it wont hurt to also ask your question on the ScrollMagic issues page.

[bill-k]

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!

[Jonathan]

Thank you, yeah posting back with your solution would be nice! Also see if you can add a parent div around .stage and position that so ScrollMagic doesn't override .stage CSS top property, unless ScrollMagic has something you can modify how high you can bring .stage to your liking

[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: 

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! 

[Jonathan]

No worries glad to help!