Scroll Trigger problem on mobile

[tropical]

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

[ZachSaucier]

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:

 

[tropical]

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?.

[ZachSaucier]

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.

[tropical]

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.

[ZachSaucier]

Sorry, I don't think we can be of much help in this case without being able to see it for ourselves.

[tropical]

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.

[ZachSaucier]

Two things about that:

1. 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.
2. 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.

[tropical]

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.