SWALKER Posted October 28, 2021 Share Posted October 28, 2021 I have finished my website but there is one issue I just cannot seem to fix. On ipad, the 3 basic animations which animate three titles from left to right using x values, stick, flicker and then jump. I have tested in many other browsers and desktop and it's perfect but not ipad - it's also slower on ipad? It is the same issue using either chrome or safari on ipad (and probably others). I can't understand it as I have used the exact same type on multiple objects and they all work perfectly. I can't see any syntax errors in my code The link URL is https://tinyurl.com/b3frsvyh and it's the 3 links that say Facebook, Instagram and Newsletter I have tried to make a codepen to replicate the environment as much as I can but the issue doesn't seem to happen on ipad and I can't work out what the difference is between this and my site I included all my tweens because I thought maybe it was an issue in a previous tween that was causing it? The tweens in question are near the bottom, just above the match media ones It's driving me mad so any help would be greatly appreciated See the Pen abywYXa by shereewalker (@shereewalker) on CodePen Link to comment Share on other sites More sharing options...
nico fonseca Posted October 28, 2021 Share Posted October 28, 2021 Hey @SWALKER , There are many things can cause that problem, and if in your Codepen works then the problem is probably somewhere in your site. I saw that you have a css animation on your elements .secondary a *, .site-footer a *, .site-header a *, a { transition: all .2s linear; } Try to remove them, as they bring problems when you are also animating with GSAP. If that doesn't fix the problem, try adding will-change: transform on your elements or force3D: true on your tween and see if this improves anything. 2 Link to comment Share on other sites More sharing options...
nico fonseca Posted October 28, 2021 Share Posted October 28, 2021 Btw, my recommendation is to try to debug on your site commenting most of the things (CSS,JS) until you see what is the cause of the problem. 🙂 Link to comment Share on other sites More sharing options...
SWALKER Posted October 28, 2021 Author Share Posted October 28, 2021 Hi there, thanks for that. Unfortunately that first piece of code did not work. I will go through and see if i can narrow it down. How would I add will-change or force3D onto this for example? gsap.to(".letter", { scrollTrigger: { trigger: ".letter", start: "top 93%", }, x: 0, duration: 1, opacity: "94%", ease: "ease-in-out", delay: 1.2 }); Link to comment Share on other sites More sharing options...
Cassie Posted October 28, 2021 Share Posted October 28, 2021 .letter { will-change: transform } Will change is a CSS property. gsap.to(".letter", { scrollTrigger: { trigger: ".letter", start: "top 93%", }, x: 0, duration: 1, opacity: "94%", ease: "ease-in-out", delay: 1.2 force3D: true, }); force3D is a GSAP property I agree with Nico though. go through with a toothpick and comment things out/in until you figure out the issue. 💡 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now