Jump to content


Responsive scaling not working on mobile

Go to solution Solved by AdObeOne,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

So I have to install a server to be able to use the load command instead of iframe, to avoid the problem with webkit mobile browsers. That sounds like shooting with a canon on a fly ;-) Thank you for all your time and effort explaining this to me. I hope it benefits more users than just me.


Running a web server during development is pretty much standard operating procedure for reasons just like this. There's other stuff that won't work correctly without a server, but I won't get into that. It all has to do with security restrictions enforced by the browser. You can remove these restrictions, but I wouldn't recommend it.


And it's not that crazy of an idea. How do you people view your website? It has to go through a server. Running a server lets you replicate the how your site will run.

  • Like 1
Link to comment
Share on other sites

Hello OSUblake,


Thank you for your response.


The animations I hoped to make were for sale for other websites. So installing a server isn't a solution. I put some animations on my site as a demonstration of the possibilities. Not being able to make the animations behave correctly in all browsers kills this business activity for me. Which seriously damages my business.


Kind regards,



Link to comment
Share on other sites

Sorry, but I can't provide any further assistance. I provided you with a quick fix, yet you continue to ignore the most critical part of it. AJAX and iframes might not run correctly without a server. It's called same-origin policy

  • Like 2
Link to comment
Share on other sites

OSUBlake, thank you for all your assistance. That may well be so, but you continu to ignore that I can't force this quick fix on my clients.


I guess inline is the best, although inconvenient option, to avoid the embed problem altogether.

Link to comment
Share on other sites

That may well be so, but you continu to ignore that I can't force this quick fix on my clients.


Trying to use my line against me I see. How about this one. I spent all this time trying to help you out because I was looking out for your business and your clients.  ;-)


I'll give this one more go because I think there is a communication problem here. Where are you from anyways? Netherlands?


I think you got the impression that I was suggesting that a server is needed to run your animations. At no point did I ever say that. The only thing I said about running a server is that you need to use one when developing your site locally, i.e. running it on your computer due to restrictions placed on iframes and ajax. Once you put your content online, there won't be security issues because it will be running on a web server.


You're not selling your site, just content from it, correct? So problem solved. The only person who needs to worry about running a server is you.


I know some people fear using servers because they think they are complicated. And some are. Which is why somebody came up with Node.js. Look at that... I created a server in 5 lines of JavaScript!

var http = require("http");
http.createServer(function(req, res) {
  res.writeHead(200, { "Content-Type": "text/plain" });
  res.end("Hello AdObeOne");

But you don't have to worry about creating your own server. Somebody else already did that for you. It's called BrowserSync, and is a MUST have tool. If you're not using it, you're doing it wrong.





I just took a screenshot of running it in Visual Studio. As you can tell from the image, it's pretty hard to start. Oh wait, nevermind. You just press the serve button.


You can see it started up a a Local server on localhost:3000, but there's also an External address, so you can connect other computers and mobile devices. Tunnel is optional, and you can name the subdomain whatever you want. What it does is it creates a public URL right to your computer! When I took this screenshot like 5 minutes ago, if you would have gone to that url, https://gnomesayin.localtunnel.me, it'd connect you to my computer and you would have seen the site I'm working on. How crazy is that? It's a great way to show off some work to your clients during development. They can just view your site on their phone, and won't have to download or install anything.


And probably the most important part about BrowserSync, the syncing. It's watching my files, so whenever I change one, it will reload all the browsers. Gone are the days of pressing F5 to refresh your browser. And here's another feature that will blow your mind. You can edit your site inside the browser or dev tools, and it will update your code in your editor! In Visual Studio it will even open the file and highlight your code. Total WYSIWYG. Editing divs and code in realtime across different types of software is pretty amazing.


You can also sync changes between any other devices you have hooked up. So if you scroll the window on one computer, the other computers will scroll too! 


So there you go. Get BrowserSync, run your animations again, and have fun being in control. You'll quickly see that GSAP works perfectly fine in a mobile environment. Jack and Carl have spent a lot of time building a solid product and GSAP has never failed me, nor will it fail you.

  • Like 4
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.