ScrollTrigger issue: Three.js object won't get back to it's initial state on mobile.

[danosaur]

Hey dear Greensock community! Please let me demonstrate my scroll trigger issue here: https://www.loom.com/share/ec4e84db15d846119f13d7e85fdb340b
Unfortunately I can't provide any codepens. But you may have come across a similar issue.
Everything works perfectly on desktop but the animation becomes very jittery and out of hand on mobile. I tested it on an actual phone as well, not only in the Xcode simulator. When I try to scrub the animation, the object doesn't move back to its initial state or it jumps back and forth.
Any help or advice is appreciated
 

    this.tl = gsap.timeline({

        

        scrollTrigger: {

          trigger: ".container",

          start: "top top", 

          end: "+=900", 

          scrub: 1.5, 

        }

      });

    

    this.tl.to(this.model.rotation, { y: -3})

           .to(this.model.position, { x: 25, y: 4}, "<")

[GreenSock]

Welcome to the forums, @danosaur. 

 

It's super difficult to troubleshoot blind (well, with just a video and a small code snippet) but my guess is that it's related to the fact that your viewport is changing sizes a lot when the chrome shows/hides based on your scroll direction. By default, ScrollTrigger waits until scrolling ends before it does a .refresh(). You can disable the refresh() on resize if you prefer - just use the ScrollTrigger.config() method for that. 

 

If you need more help, just post a minimal demo and we'd be happy to take a peek. 

 

Good luck!

[danosaur]

Hey Jack, thank you for sending me how to do a demo, I didn't know how to use different libraries and such.
It's very basic now the main part is between the the double dashed lines. I'll look into the ScrollTrigger.config() as well. Thanks again  

See the Pen RwpGvmW?editors=0010 by danielapro (@danielapro) on CodePen

[Cassie]

Heya!

I just looked at this on IOS safari and it seems to be working a ok - is there still an issue on your end?

[danosaur]

Hey Cassie, thanks for the reply. You can also take a look at the staging link of the page I'm building. I'm using it's the same animation the only difference is that I'm using a model. https://5c98ad-2bd965dd7504daa4ac960eec46ab6863.webflow.io/ 
I'm also using smooth scrolling. That might interfere.