Bill Kroger Bill Kroger - 11 months ago 72
jQuery Question

Stage positioning issue with ScrollMagic

I created an animation using GreenSock 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})

The issue I'm having is that the stage element is initially "stuck" 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. I tried adjusting the 'top' CSS property on the .stage element, but this required me to use !important and it produces strange results. Are there some parameters/arguments that specifically control the positioning of a pinned element in ScrollMagic?

Here's a codepen with my animation - (make sure to scroll down)

Any help with this is greatly appreciated!

Answer Source

Ok I was able to figure it out - I ended up wrapping the stage/graphics inside of an additional container, and gave it relative positioning with a top property. Then for the Javascript I just added an offset to the scene instance, making sure it's equal to the top position property applied to the new container. Here's all of the changes:


<div class="stage-wrapper">  <!-- new container -->
   <div class="stage">
      <div class="svg-image"></div>
      <div class="svg-image"></div>
      <div class="svg-image"></div>


.stage-wrapper {
   position: relative;
   top: 300px;


var scene = new ScrollMagic.Scene({
   triggerElement: "#how-it-works", 
   duration: 4000


// add a scene offset amount equal to the top positioning for the new container

Updated Codepen:

This is probably not the only way to fix the issue, but the solution above ended up working in my case.