Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Thomas Günther

Percentage transform ScrollTrigger after window resize

Recommended Posts

Hi there,

 

I stumbled upon an issue with percentage based transforms and ScrollTrigger. I created a minimal demo with .good_boxes using pixel values and .bad_boxes using percentage values. Only the bad boxes are displayed incorrectly after resizing the window. First things that came to mind were using xPercent/yPercent and invalidateOnRefresh: false but neither had an effect.

 

To reproduce the issue, please visit the following codepen, resize your window and then scroll down: 

 

Thanks in advance for any help 🙌

See the Pen JjWxzxd by medienbaecker (@medienbaecker) on CodePen

Link to comment
Share on other sites

Hey @Thomas Günther

 

I can not give you a thorough explanation on this, but I guess it's just related to the way GSAP handles those transforms.

 

It works properly when you set up your transforms ( picking up your thought about using xPercent and yPercent here ) beforehand with GSAP  - which is recommended btw and also covered in the most common GSAP mistakes.

 

Hope this is a bit helpful at least :) 

 

See the Pen b11fe418a3f865afd848d124120026e6 by akapowl (@akapowl) on CodePen

 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

Thank you so much, @akapowl ❤️

 

My actual code is a lot more complex so I didn't even think of setting the initial CSS values via gsap.set(). Now I put the logic into JS and it works just fine. Thanks again!

  • Like 3
Link to comment
Share on other sites

4 hours ago, akapowl said:

I can not give you a thorough explanation on this, but I guess it's just related to the way GSAP handles those transforms.

Please see the explanation here: 

 

  • Like 1
  • Thanks 1
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.
×