Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Shanda

ScrollTrigger only works if I resize window

Go to solution Solved by GreenSock,

Recommended Posts

I found the issue is in my ccs. Is there a trick to make my animations work without removing the overflow styles.

overflow-y: scroll;
overflow-x: hidden;
Link to comment
Share on other sites

Hi @Shanda. Thanks for being a Club GreenSock member!

 

It's super difficult to help without a minimal demo. Can you please provide one, maybe in CodePen? It isn't feasible to troubleshoot a live site - way too many factors and it's hard to make tweaks and see what's going on. 

 

In terms of animations working, GSAP doesn't really care what your overflow is set to.

 

From a cursory glance at your excerpt and description, my guess is that you're dynamically loading assets in AFTER the page fires its "load" event and whatever you're doing after that is affecting layout. For example, if you've got an <img> that's initially empty and has no height/width set (so the browser has to default to 0), and then you load an 800px-tall image into that and it pushes all the elements under it down on the page, can you see how that would change the start/end values for your ScrollTriggers? When you resize the window, that forces a ScrollTrigger.refresh() which recalculates those values - that's probably why it seemed to work after you resized. But again, you'll exponentially increase your chances of getting an accurate answer here if you provide a minimal demo :)

 

Happy tweening!

Link to comment
Share on other sites

  • Solution

Oh! Yeah, that's because you forgot to define the "scroller" for the ScrollTriggers since you're not using the default of the body/window. In other words, ScrollTrigger is mapping all the start/end values to when the <body> scrolls...but you're actually scrolling the ".page__frame__area" element:

scroller: ".page__frame__area",

See the Pen PoKddVp?editors=0010 by GreenSock (@GreenSock) 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.
×