tween How to handle tween variables that are relative to window resize

[LipstickVoid 3 Likes (Newbie)]

I'm trying to tween an element that has a relative height and it sits inside a container with relative height using absolute positioning. 

The desired tween animation is to move the element from the bottom of the container until it reaches the center.

I'm also using scrollmagic as this animation should only appear during scroll to this container.

 

I tried a few ways

 

first way:

• default css of the element is already absolute positioned to center,

container {
  position: relative;
}

element {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

• get the height of the element and its container. 
• Minus off the element height from the container height.
• divide result by *two
• pass this height as a parameter in tween
• created window resize function and update the heights 
• and also refresh the scenes
• scene is updated but tween is not.

The culpit here is Tween not refreshing the variables on resize.

 

Second way:

• default css of the element is at the bottom of the container with bottom: 0;
• position is still absolute
• used a to tween with 

top: "50%",
yPercent: -50

• this doesn't put the element in the center
• it's not centered and it only moves slightly

The culpit here is using bottom: 0; and that breaks the absolute centering. Without bottom zero it works but the element comes in from outside of the container.

 

Is there a workaround to this? Please help. Thanks!

[Carl 9,066 Likes (Superhero)]

does this work?

 

See the Pen yoEPee by hansel234 (@hansel234) on CodePen

 

[LipstickVoid 3 Likes (Newbie)]

It worked perfectly. Thanks! Saved me a lot of headache lol