Shanda Posted November 12, 2021 Share Posted November 12, 2021 I am having an issue with elements not animating unless they are in the viewport or unless I resize the browser. https://cantoncc.wpengine.com/amenities/ I had this same issue when I tried to use animate on scroll AOS See the Pen vYJzzLo by okcwebdev (@okcwebdev) on CodePen Link to comment Share on other sites More sharing options...
Shanda Posted November 12, 2021 Author Share Posted November 12, 2021 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 More sharing options...
GreenSock Posted November 12, 2021 Share Posted November 12, 2021 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 More sharing options...
Shanda Posted November 12, 2021 Author Share Posted November 12, 2021 Hi Jack, I recreated the issue in this codepen. Your help would be much appreciated! Link to comment Share on other sites More sharing options...
Solution GreenSock Posted November 12, 2021 Solution Share Posted November 12, 2021 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 1 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now