tropical Posted October 20, 2020 Share Posted October 20, 2020 Hi everyone, new to gsap and animations, and i have a question, do i have to set something specific to get scrolltrigger properly triggering on mobile? The problem is that the onEnter callback does not fire when the element .trigger reaches the top of the viewport while scrolling down but quite a lot later, i have this problem only in fixed viewport of the browser mobile emulator while the touchscreen emulator is enabled and on android devices. ScrollTrigger.create({ trigger:".trigger", start:"top top", end:"bottom bottom", pin:".pin", onEnter: self => console.log(self.isActive) }); Thanks in advance Link to comment Share on other sites More sharing options...
ZachSaucier Posted October 20, 2020 Share Posted October 20, 2020 Hey tropical and welcome to the GreenSock forums. We haven't heard of this happening yet. Can you please create a minimal demo of the issue so that we can take a look? This thread talks more about how to do so: Link to comment Share on other sites More sharing options...
tropical Posted October 20, 2020 Author Share Posted October 20, 2020 I made a demo See the Pen wvWzmvb by tropicalAd (@tropicalAd) on CodePen but i can't reproduce the issue here not sure if it is due to code pen viewer or something else, also i noticed that scroller markers do not appear in my live version (not the demo) always only on android mobile or the browser mobile emulator with touch emulation, what could be the issue?. Link to comment Share on other sites More sharing options...
ZachSaucier Posted October 20, 2020 Share Posted October 20, 2020 10 minutes ago, tropical said: what could be the issue? You could be targetting the wrong target, changing something after the ScrollTrigger has been initialized, the emulator could be buggy, and a plethora of other things That's why a minimal demo that reproduces the issue would be very helpful/necessary. Link to comment Share on other sites More sharing options...
tropical Posted October 20, 2020 Author Share Posted October 20, 2020 Yes i do understand that, but as i tried i couldn't reproduce the issue on code pen, therefore i'm lost i can't upload all the project inside it. Link to comment Share on other sites More sharing options...
ZachSaucier Posted October 20, 2020 Share Posted October 20, 2020 Sorry, I don't think we can be of much help in this case without being able to see it for ourselves. Link to comment Share on other sites More sharing options...
tropical Posted October 20, 2020 Author Share Posted October 20, 2020 I found a live version that can rapresent the same problem i do have https://www.williamrchase.com/scroll_trigger_demo/ As you can see if you use the mobile emulator with touch emulation on you see the animations on scroll triggering at a different time. (and some other issues). Not sure if this is a css related issue or what. Link to comment Share on other sites More sharing options...
ZachSaucier Posted October 21, 2020 Share Posted October 21, 2020 Two things about that: That website uses a pretty old version of ScrollTrigger (relative to its short life). A lot of bugs have been fixed since then. So make sure you're using the latest version of ScrollTrigger. I see the issue that you're talking about when using the mobile emulator but only when I open the emulator after I load the page. I.e. the page doesn't handle resize well. When I view the page on my phone (without rotating it) it works great. So make sure your code is handling resizing properly. Link to comment Share on other sites More sharing options...
tropical Posted October 21, 2020 Author Share Posted October 21, 2020 I have installed gsap with npm , so i assume i have the most recent version, to handle the resize i force a ScrollTrigger.Refresh() on window resize event so it should work correctly, and it does, when i go to flexible emulator mode, the problem arise when i snap form ipad to iphone viewports etc, but probably is only an emulator issue. 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