dr.Pxl Posted May 10, 2021 Share Posted May 10, 2021 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! Link to comment Share on other sites More sharing options...
OSUblake Posted May 10, 2021 Share Posted May 10, 2021 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. Link to comment Share on other sites More sharing options...
OSUblake Posted May 10, 2021 Share Posted May 10, 2021 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 Link to comment Share on other sites More sharing options...
dr.Pxl Posted May 10, 2021 Author Share Posted May 10, 2021 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! Link to comment Share on other sites More sharing options...
OSUblake Posted May 10, 2021 Share Posted May 10, 2021 Hm... I'm not sure what you're trying to do. Can you make a really simple demo showing the issue? Link to comment Share on other sites More sharing options...
GreenSock Posted May 10, 2021 Share Posted May 10, 2021 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" }) Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now