Jump to content
Search Community

Percentage transform ScrollTrigger after window resize

Thomas Günther test
Moderator Tag

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

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.
×
×
  • Create New...