scrollTrigger Resize issue

[ynamite]

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

[ZachSaucier]

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"

 

[ynamite]

@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

[ZachSaucier]

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.

[ynamite]

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.

[ZachSaucier]

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. 

[ynamite]

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!

[GreenSock]

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? 

[ynamite]

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.