Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
LipstickVoid

How to handle tween variables that are relative to window resize

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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!

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×