Search the Community
Showing results for tags 'responsive design'.
Found 3 results
-
scroll issue In the second section, during mobile scrolling, the title and three images are vibrating. How can I fix this?
Abox Agency posted a topic in GSAP
I am sharing the URL of my live website; please check it: https://drinkelder.com/pages/about-us
-
Hello All, I am happy to use gsap. Now I cannot solved the gsap code when resize the browser, it cannot be responsive. I am new user and I dont know how to handle it. Here is my project issue. I hope someone to advice me. Thanks alot.
-
Help me improve this code to adapt mobile viewports to any dimension by using scaling
Halcyon posted a topic in GSAP
I have got this snippet of gsap code working pretty well to adapt my 1280x768 webgame to almost any mobile viewport size. It's not perfect, but I think it's pretty close. I'm looking for any constructive advice or ways to improve this method as adapting viewport sizes is kind of a pain. // disable all mobile dragging of webpage $("html").on("touchmove", function(e){ // only disable dragging of html element if(e.target===this){ e.preventDefault(); } }); // make html page scaling originate from top-left corner TweenMax.set("html", { transformOrigin:"0 0" }); function resizeWindow(){ var w=window.innerWidth; var h=window.innerHeight; // width less than 1280? if(w<1280){ TweenMax.set("html",{scaleX:w/1280}); }else{ TweenMax.set("html",{scaleX:1}); } // height less than 768? if(h<768){ TweenMax.set("html",{scaleY:h/768}); }else{ TweenMax.set("html",{scaleY:1}); } } $(window).on("resize", function(){ // only do this for mobile devices if(isMobile===true){ // do not resize if focusing on an input or the keyboard will squish the whole webpage if(inputFocus===false){ resizeWindow(); } } });
