ynamite Posted June 25, 2020 Share Posted June 25, 2020 Hi there I'm experiencing an issue with scrollTrigger animating the top CSS property (with a percentage) of an element that also has its bottom property set in CSS, after changing the browser window height. I realize this is a little edgy (setting both bottom and top values), but it is working in all browser I've tested so far and only breaks when resizing, so I figured I'd mention it regardless. What do you guys think? See the Pen gOPReNq by ynamite (@ynamite) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 25, 2020 Share Posted June 25, 2020 Hey ynamite and thanks for supporting GreenSock by being a Business Green member! We couldn't do what we do without people like you. I'm curious: why do you feel like you need to animate the top value? Just use a y transform instead. It's more performant. y: "15rem" 1 Link to comment Share on other sites More sharing options...
ynamite Posted June 25, 2020 Author Share Posted June 25, 2020 @ZachSaucier Because I'd like to animate the div relativ to the parent and not relative to itself. As I understand it, transforms work relativ to the element that's being transformed, position values are relative to the closest parent which has position relative. No? Don't mention it, thank you for this awesome library that just keeps on giving Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 25, 2020 Share Posted June 25, 2020 1 minute ago, ynamite said: transforms are relativ to the element being animated, position values are relative to the closest parent which has position relative. No? Sure, but your units are rem anyway, which has nothing to do with either the element nor some parent. It only has to do with the root font size. Link to comment Share on other sites More sharing options...
ynamite Posted June 25, 2020 Author Share Posted June 25, 2020 (edited) Oops, I apologize, I must've messed with the fiddle after posting it (or entered it wrong initially) ... in my project I'm using a percentage value for top – for the reason stated in the previous post. I've updated the fiddle to reflect that. Edited June 25, 2020 by ynamite spelling etc. Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 25, 2020 Share Posted June 25, 2020 A few things: I recommend that you set a trigger for the ScrollTrigger so that the animation only happens when the element is in view. This also gives you finer control because it's not based on the total height of the page. Your parent element is sized based on the viewport height. I recommend that you just use the viewport height and y property instead. Here's how I'd set it up (more performant and with more control than your approach): See the Pen bGERxWd?editors=0010 by GreenSock (@GreenSock) on CodePen GSAP is indeed cacheing the first top value as a certain pixel value instead of a percentage value. 2 Link to comment Share on other sites More sharing options...
ynamite Posted June 25, 2020 Author Share Posted June 25, 2020 That does indeed work better. Also I didn't realize gsap could understand vh units (and never bothered to try). That's pretty sweet. Thanks! 1 Link to comment Share on other sites More sharing options...
GreenSock Posted June 25, 2020 Share Posted June 25, 2020 5 hours ago, ZachSaucier said: There does indeed seem to be some sort of bug that is cacheing the first top value as a certain pixel value instead of a percentage value. It's not really a bug. Try this and look in your console: console.log(window.getComputedStyle(document.querySelector(".text-bottom")).top); The browser reports it in px. GSAP must take what the browser reports as the starting value. And when the tween renders at its very start, it should return it to that value EXACTLY as it received it. That's typically a good thing because it avoids other potential problems (like not returning units to what they were before the tween, etc.). Sounds like Zach provided a solution, right? Is there anything else you need help with? 2 Link to comment Share on other sites More sharing options...
ynamite Posted June 25, 2020 Author Share Posted June 25, 2020 21 minutes ago, GreenSock said: The browser reports it in px. GSAP must take what the browser reports as the starting value. I see. Makes sense, thanks for explanation. Good to know it's not a bug. 19 minutes ago, GreenSock said: Sounds like Zach provided a solution, right? Is there anything else you need help with? Indeed, what Zach wrote helped solve the issue. Thanks a lot. Happy as a clam for now. 2 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