Use functions to detect variables in tweens based on getBoundingClientRect()

[dr.Pxl]

Hey, 

I am looking for a solution to my problem. 

I want to use some functions to position my elements in my tweens. 

It looks like this:

 

.to(seoATFHardware, {y: centerElementBasedOnAxis(seoATFHardware, "y"), 180, "right"), duration: 1, ease: Power3.in})

So far, so good. 

In the function I do stuff like that:

function centerElementBasedOnAxis(elem, axis) {

...

    if (axis === "y") {

        let windowHeight = document.documentElement.clientHeight;

        centeredPosition = 

(windowHeight - element.getBoundingClientRect().height) / 2

;

    }

...
return centeredPosition;

}

The problem: 
The tween above is part of a timeline based on scroll progression. I scale the element "seoATFHardware" in the tween before and the getBoundingClientRect returns the unscaled height the element had when the page loads.

Is there a way to fire the function right before the tweens starts so that the Bounding gets the "correct" size of the element. 

Or do you guys know a better solutions for my approach?

Thank you very much in advance! 
 

 

[OSUblake]

getBoundingClientRect always includes transforms. You can remove the transforms, measure, and then reapply the transforms. 

 

Or use something like element.clientWidth/clientHeight or element.offsetWidth/offsetHeight depending on your needs.

 

 

 

[OSUblake]

11 minutes ago, OSUblake said:

You can remove the transforms, measure, and then reapply the transforms. 

 

More context about how you can do that.

 

See the Pen 4ccc5df5ce195ae1527e923babb5429f by osublake (@osublake) on CodePen

 

 

[dr.Pxl]

Hey Blake,

thanks for your answer. The problem is, that the bounding fires before transform happens. So I need a solution where I can fire a function in the tween right before the tween animates on scroll. 

Thank you!

[OSUblake]

Hm... I'm not sure what you're trying to do. Can you make  a really simple demo showing the issue?

 

[GreenSock]

Yeah, a minimal demo would REALLY help. Here's another idea: use a function-based value:

.to(seoATFHardware, {
  y: () => centerElementBasedOnAxis(seoATFHardware, "y"), 180, "right"), 
  duration: 1, 
  ease: "power3.in"
})