Jump to content
Search Community

Animations not working only on iphone 6 and 5s

Pablitooten test
Moderator Tag

Recommended Posts

Hi, thanks for making possible this fantastic animations.

I have a webpage where animations work fine on a laptop computer or android phones, nevertheless, when i try to use my iphone 5s or 6 with either safari or chrome, the page goes like crap, animations just don't happen, texts won't appear, all looks awful. I have a friend with an iphone 8 and he told me it works fine. I have cleaned safari and chrome browser data, but same crap. Iphone 6 works fine for me when i play videogames or do other tasks, i just can believe that its hardware is not powerful to more cope with gsap animations....

Any ideas coming to your bright brains?

 

My page is: nogunsdrugsbets.com

 

Appreciate it. 

Link to comment
Share on other sites

I'm afraid we don't have the scope to debug live sites in these forums.

I doubt the issue is GSAP itself. More often than not this boils down to cross browser compatibility of layout or the properties you're animating.

 

If you can make a minimal demo of one of the problematic animations we'll take a look and see if we can help.

 

 

  • Like 2
Link to comment
Share on other sites

Hi Cassie, thx for ur answer.

Well, i didn't give your a minimal demo, i gave you a maximal one, the whole page. I wouldn't know what to pass you since i don't know where is the error but it seems as you've said it is about the old version of browser compatibility. 

 

My page doesn't work in an ipad 2 neither. I can't update the browser since i can't update the operative system version. Same happens in my iphones. They just do it so we keep on buying things and destroying the planet.

 

It seems GSAP is not compatible with older versions of browsers. Anybody can just try loading my page with an old ipad or iphone?

Is there a way or a piece of code to say to the page that if the browser or the device is an old one, just don't execute gsap?

 

Thank you.

Link to comment
Share on other sites

39 minutes ago, Pablitooten said:

It seems GSAP is not compatible with older versions of browsers.

Actually, quite the opposite. We've bent over backwards to make it extremely compatible, much more than other animation engines. It definitely works on old iPhones/iPads. 

 

41 minutes ago, Pablitooten said:

Well, i didn't give your a minimal demo, i gave you a maximal one, the whole page. I wouldn't know what to pass you since i don't know where is the error but it seems as you've said it is about the old version of browser compatibility. 

That's sorta the problem :) One of the most important troubleshooting steps you can take is to isolate the issue. We just don't have the resources to offer free consulting on live sites that have various complexities, other libraries, etc. In my experience, I'd say that the vast majority of the time when someone thinks GSAP is causing an issue, it actually has nothing to do with GSAP at all. 

 

It looks like you're using several non-GreenSock libraries. Like LocomotiveScroll - I have no idea if that's compatible with old browsers but I'd suggest trying to remove that to see if it resolves things. And again, isolate, isolate, isolate. Strip everything back to the most basic part, then slowly build it up until it breaks. That will tell you which step broke it and where the issue most likely is. 

 

Good luck!

  • Like 2
Link to comment
Share on other sites

Thank you for your wise words Jack.

Locomotive scroll makes possible a smooth scroll which together with gsap animations, makes possible a smooth animation.  I wish you guys had a smooth scroll library, so I don't need to bring third parties. I know gsap is very trustworthy.

I did it following a video tutorial i found in youtube: https://www.youtube.com/watch?v=JnLn8Rq4p_I&t=552s

 

It is very difficult to work live in the server deleting things until error are gone and building again back as you told me.  I can't expect an immediate result when you try in a navigator, for example, my hosting is hostinger, if i take a radical step and delete a file called main2.js which contains all the gsap animations and i go to test in chrome for example, the animations are still executing, even when no main2.js is in the server and after deleting all navigator history data..... Looks like difficult to work live with the server, maybe changes in the server takes 30 minutes to take place...

 

Thank you Jack.

Link to comment
Share on other sites

Apparently i solved my issue as you told me  Jack by eliminating all trace of smooth scroll library, thank you so much for that. I believe safari has its own native smooth scroll incorporated, so if you put another smooth scroll they bump with each other.

 

I have a question that is not strictly gsap but maybe it helps to others to see your opinion. I have search around but i don't find anything.

If i go with my mobile to a site like BBC news and i zoom out the screen with two fingers the images and texts always come back to its original size, covering the whole screen.  But in my page, when i zoom out, the image and text gets small, and they get stuck to one size of the screen and I can't center. How can i get the BBC page behaviour? I have tried to give a min-width to html in CSS of 100vw and also to the body, but that didn't work, the whole page gets smaller than the screen and later is difficult to center, zoom back or read ultra small fonts.  Please help with this! thank you.

Link to comment
Share on other sites

3 hours ago, Pablitooten said:

I have a question that is not strictly gsap but maybe it helps to others to see your opinion. I have search around but i don't find anything.

If i go with my mobile to a site like BBC news and i zoom out the screen with two fingers the images and texts always come back to its original size, covering the whole screen.  But in my page, when i zoom out, the image and text gets small, and they get stuck to one size of the screen and I can't center. How can i get the BBC page behaviour? I have tried to give a min-width to html in CSS of 100vw and also to the body, but that didn't work, the whole page gets smaller than the screen and later is difficult to center, zoom back or read ultra small fonts.  Please help with this! thank you.

I'm not quite sure what you mean; please provide a minimal demo and we'd be happy to help with any GSAP-specific stuff. 👍

Link to comment
Share on other sites

No worries Jack, I answer myself to this one. To turn off zooming out just add inside <head> tag of the html this line. The important addition is the part which says minimun-scale, this way you are saying not to allow zoom out of the page. Extremely useful at least for me.

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
  • Like 2
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...