Pablitooten
Pablitooten's Achievements
2
Reputation
-
Changing the device's orientation changes gsap animation
Pablitooten replied to Pablitooten's topic in GSAP
Hi OSUblake, maybe i wasn't using the correct syntaxis but invalidate() method didn't do the trick. I got through using ScrollTrigger matchmedia, differentiating between min-width 502 and max-width 501. Even when using the exact same values in both medias, it seems to do the trick and kind of refresh the animation when changing the orientation of the device. Appreciate your answer. -
Hi! I have a general problem in my page when using a mobile phone, when I change from horizontal view to vertical view or viceversa, some effects apply incorrectly so i have to refresh the page to make them apply correctly. You can check what I say just executing my page nogunsdrugsbets.com in any mobile device. In example, all is going smoothly, paragraphs have an animation to make them go up when they are reaching the top of the screen, but when I change the orientation, the paragraphs just go too soon up, changing the whole animation, so i have to refresh the page to make them work right back, but if i change the orientation back, again the paragraphs go to soon and i have to refresh again the page... and so on. My question is simple, is there a way to avoid this or any code in gsap make it "refresh" automatically. A user who enters to my page will think is a problem with the coding of the page and probably won't even bother to refresh... I can't pass you a example of this as it always shows and I don't know the cause, but it is annoying if you change the position of the device, something that it is done constantly. Thank you so much.
-
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">
-
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.
-
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.
-
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.
-
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.
-
No worries, i have solved myself by deleting parts of the code until the error happened. Surprisigly, and i still don't understand it, a transform: translateX(100%) in CSS which later i bring back to screen with gsap using X: 0... That was the cause, when i erase that transform in CSS the pin is done correctly in mobile screen, but if i don't erase it, the pin is done late. I tried to put tl.from and transform it from GSAP but same error. As soon as those elements have a transform translateX in CSS or in GSAP, that brings the pin error in mobile screen. I don't know how that is related but it is. But only in mobile screen this error, strange thing... Thanks anyway. If someone have problems of late pin in mobile screen view, maybe erasing the translateX in CSS that help...
-
Hi ZachSaucier, i can't copy all the code in that 3 little screen window of codepen, it is very long and almost unreadable, i have been working months on it. I have done a little extract of it, although it is not working for me, a sad face is appearing where the animation should be. Still i don't know if would be able to see it in mobile view in codepen, even if it worked. My problem is only with mobile view. https://codepen.io/pablitooten/pen/jOVrmVv The thing is, my code is working perfectly in a laptop, as soon as i click f12 and change to mobile view in Chrome or Firefox, i have the problems above mentioned, the pin is done late, like start:"center top" so the pinSpacing is revealed and there is a white space. The animations without pin are not executed... I don't really know what to do. I am stuck. Just please give me some ideas to try, starting from that concept of pin problem, why my animation could pin correctly in normal view but late on mobile view? what could be causing that?
-
Hi, thank you for gsap and all the effort behind it. I have an html + css + js with gsap and scrollTrigger page with 6 separated scrollTrigger animations, the animations are all like: let tl = gsap.timeline({ scrollTrigger: { trigger: ".hero-main", start: "top top", scrub: true, pin: true, anticipatePin: 1, pinSpacing: true, markers: true, },//cierra scrollTrigger });//cierra timeline tl.to(".hero-img2", {opacity: 1}) .to(".hero-img2", {filter: "saturate(0%)"}, .6) .to(".hero-phrase", {opacity: 1}, .6) Another type of animation is the not-pinned one, it is like: gsap.to(".section2 .box1", { scrollTrigger: { trigger: ".section2", start: "top bottom", end: "top -30%", anticipatePin: 1, pinSpacing: true, toggleActions: "restart reverse restart none", // markers: true },//cierra scrollTrigger opacity: 1, duration:4, ease: "circ"}); They are basic animations where i just create a timeline, make a pin to an image, change the image, move text etc... Others don't do pin and they just execute on start and have toggleActions. Basic stuff for my basic knowledge. It works fine in my laptop at normal screen, but when click f12 and try the simulator for small screens that comes with chrome or firefox, it has a couple of serious problems: a) it doesn't do the pin on start: top top, it does it around "top center", so the white space created with pinspacing is visible. If i eliminate pinspacing, the pin keeps starting late (so the problem is still there) and the next element "eats" the "late" pinned one. b) the animations that don't have a pin just don't execute at all. c) Jumping problems that goes back to the same animation a couple of times. I have noticed that the markers are visible with laptop screen, but with small screen these markers just dissapear. It is like going to small screen just make gsap explote. Start top top should work regardless of the size of screen, isn't it? we are saying top, the top of the screen. I have tried matchMedia putting it in each scrollTrigger or one affecting the whole set of animations, one whole day trying matchMedia, also i tried ScrollTrigger.refresh(), i have been 2 days looking for info, now i am just so confussed... Why animations pin late? why animations without a pin does not execute? how can the markers dissapear? Notice that all works perfect in laptop normal screen. What am I missing? Little help please. Thank you.
