Moz Posted January 27, 2023 Share Posted January 27, 2023 Hi, I've only recently found GS but I'm having a lot of fun seeing what I can do with it. I'm having an issue on my website, seemingly specific to mobile devices where my code isn't running at the start and end of where I thought it should be. $('.animate-on-scroll').each(function(index, element) { let animateClass = ScrollTrigger.create({ trigger: element, start: "top bottom-=1", end: "bottom top+=1", once: false, onEnter: () => { $(element).addClass('animation-trigger'); }, onLeaveBack: () => { $(element).removeClass('animation-trigger'); } }); }); What I am trying to do is to apply the class 'animation-trigger' to each item that already has a class of 'animate-on-scroll' when it enters the screen (going downwards) and only removes it after going past it upwards, effectively meaning that the animation will be reset and re-triggered if you go back up past it. This seems to work as I expect it to on desktop displays, however, I am having mixed effects on mobile devices/screen sizes, it seems as though certain elements are able to get most of the way into the page before the class gets added, am I misunderstanding how the 'start' and 'end' properties work? In the picture below you can see that one of my items is half way into the page and it still doesn't have the class yet Any help would be great Thanks Link to comment Share on other sites More sharing options...
GSAP Helper Posted January 27, 2023 Share Posted January 27, 2023 It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer. Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen If you're using something like React/Next/Vue/Nuxt or some other framework, you may find StackBlitz easier to use. We have a series of collections with different templates for you to get started on these different frameworks: React/Next/Vue/Nuxt. Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. Link to comment Share on other sites More sharing options...
Rodrigo Posted January 27, 2023 Share Posted January 27, 2023 Hi @Moz and welcome to the GreenSock forums! Based on your description the only thing I can think of is using normalizeScroll in your ScrollTrigger setup: ScrollTrigger.normalizeScroll(true); Just call that at the start of your project or your top level entry file. That should prevent the browser's address bar from hidding/showing as you scroll which could be the cause of the issue you're having. https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.normalizeScroll() Happy Tweening! Link to comment Share on other sites More sharing options...
Moz Posted January 30, 2023 Author Share Posted January 30, 2023 Hi both, Thanks for the response, I'll try the 'normalizeScroll' to see if that's what is causing it. Normally I'd try to setup a codepen to demonstrate exactly what's going wrong, but it seems to only be happening on mobile view (all other breakpoints in the CSS don't seem to have any problems) so I can only assume it's something very specific to exactly what I have setup right now, rather than something I might be able to replicate on codepen quite so easily. But thank you for the response, if I'm still having troubles I'll see if I can replicate my issue somewhere else to further debug Kind regards 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