Jump to content
Search Community

Window resize messes with ScrollTrigger horizontal x axis

Innat test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

Hello, I'm beginning with ScrollTrigger and I'm trying to create a fake horizontall scroll and I'm having trouble to handle window resize. Even though the scrollContainer width seems to be recalculated, it doesn't fit its right size and I don't get why. I've thought that put end value in a callback function and set invalidateOnRefresh to true should do the trick but it doesn't.


Thanks for your help and for this amazing product that is greensock !

See the Pen vYdxYbV?editors=0111 by heskir-the-bold (@heskir-the-bold) on CodePen

Link to comment
Share on other sites

  • Solution

Welcome to the forums, @Innat


The problems I noticed: 

  1. You need to make your "x" value function-based so that it can get dynamically refreshed after resize. Right now, it's feeding in a normal number at the beginning. So let's say -containerWidth - window.innerWidth evaluates to 1000 initially...but then you resize the window 500px larger. See the problem? It's still going to be animating x to -1000. You need a way to repopulate those (by making it a function). 
  2. You calculate the containerWidth initially and never again, even though it would dynamically change when the viewport resizes. So again, you shouldn't be using that variable. You need to dynamically calculate those values. 

I assume this is more like what you wanted? 

See the Pen PoQKzKj?editors=0010 by GreenSock (@GreenSock) on CodePen


I hope that helps. Happy tweening!

  • Like 5
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...