Mobile scroll

[Clou]

Hi, my is the whole page freezing on mobile version?

https://clou.agency/frontpage-new/

 

Desktop works perfectly, im using scrollsmoother and scrolltrigger...

[Rodrigo]

Hi,

 

Unfortunately we can't debug live sites, there are just too many things to look into.

 

The one thing that I can tell you is that on an iPad on portrait it works fine, but on an android phone the issue is there. It also happens if you launch the site in chrome using devtools' device view to emulate smaller screen sizes. So I would look into that as I see a few errors in the console:

 

Hopefully this helps.

Happy Tweening!

[Clou]

Hi, thank you. I fixed these errors, but it seems that the problem exists even on the subpages. What could be the problem for freezing screen?

[GSAP Helper]

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. 

[Clou]

Hi, here is the demo: 

See the Pen jOQYEKB by Matev-Pevec-the-selector (@Matev-Pevec-the-selector) on CodePen

 

And this is the live page: https://clou.agency/contact/

[Cassie]

Hi there. That page works fine for me on mobile. (iphone, safari)

I'm going to have to echo what's been said before though, we can't debug entire sites and we really need a working demo in order to assist.

Your demo has a few issues in the console. "svg-animacija" should be ".svg-animacija" and you aren't loading in jQuery, so there isn't really a good starting point for us to help you with.

 

 

 If you need help debugging please provide a minimal demo that clearly shows the issue and provide steps to us to replicate. e.g.

 

- Open site in x browser on android device 

- Scroll down around 200px

- You will see Y

Thanks!

[Rodrigo]

Hi,

 

On top of Cassie's advice I find the way you're animating your custom cursor very odd to say the least. I strongly suggest you to check GSAP QuickTo and don't use top and left for it:

https://greensock.com/docs/v3/GSAP/gsap.quickTo()

 

If you want to do something every X amount of seconds as this:

TweenMax.to({}, 0.011, {
  repeat: -1,
  // ...
});

Just use GSAP Ticker:

https://greensock.com/docs/v3/GSAP/gsap.ticker

 

Or GSAP QuickSetter:

https://greensock.com/docs/v3/GSAP/gsap.quickSetter()

 

Hopefully this helps.

Happy Tweening!

[Clou]

hi, i found the problem; user scalable was yes insrtead of no :)))))

<meta name="viewport" content="width=device-width, user-scalable=yes">

 

<meta name="viewport" content="width=device-width, user-scalable=no">