GSAP Ted Posted April 10, 2021 Share Posted April 10, 2021 Hey All, new to the GSAP library and loving it! I tried looking into the question but cannot seem to find other reasons except for a possible CPU issue with the browser type? Safari desktop works great, I use a iPhone 12 Mini (see GIF). They are not supposed to be that slow and stuttery for a lack of a better term. Anyone ever come across the issue and could recommend anything from your experience? I'll post the code I have below. const homeController = new ScrollMagic.Controller() const liTL = gsap.timeline(); liTL.fromTo( "nav a", { color: "#fff" }, { color: "rgba(0,0,0,1)", duration: 1, }, ); let liScene= new ScrollMagic.Scene({ triggerElement: "header", triggerHook: 1, reverse: true, offset: (document.querySelector("nav").offsetHeight) + 500, duration: 0, }) .setTween(liTL) // .addIndicators() .addTo(homeController); const navTL = gsap.timeline(); navTL.fromTo( "nav", { backgroundColor: "rgba(0,0,0,0)" }, { backgroundColor: "#fff", duration: 1, } ); let navScene= new ScrollMagic.Scene({ triggerElement: "header", triggerHook: 1, reverse: true, offset: (document.querySelector("nav").offsetHeight) + 510, duration: 0, }) .setTween(navTL) // .addIndicators() .addTo(homeController); let headertl = gsap.timeline() headertl.fromTo('nav', { y: -200, autoAlpha: 0, }, { y: 0, autoAlpha: 1, duration: 2, delay: .1 } ) headertl.fromTo('header', { // y: -200, autoAlpha: 0, }, { // y: 0, autoAlpha: 1, duration: 2, delay: .4 }, ); Link to comment Share on other sites More sharing options...
GreenSock Posted April 10, 2021 Share Posted April 10, 2021 Welcome to the forums, @GSAP Ted. It's pretty tough to diagnose without seeing things in context (a minimal demo will significantly increase your chances of getting an answer in these forums), and we don't support ScrollMagic which isn't a GreenSock product. I'd strongly recommend switching to ScrollTrigger. I wonder if maybe you've got filters applied (like blur or drop-shadow) which can be very CPU-intensive for the browser to render. That's totally unrelated to GSAP. If you still need some help, feel free to post a minimal demo with a GSAP-specific question and we'd be happy to help. 1 Link to comment Share on other sites More sharing options...
BrianCross Posted April 12, 2021 Share Posted April 12, 2021 I find if I am going to have issues with any browser, iOS Safari will be the one. I'll craft an animation and it works flawlessly in Chrome and Firefox, but exhibits weird behaviour in Safari. I haven't tried desktop Safari since I run Linux, but iOS Safari is the worst. Link to comment Share on other sites More sharing options...
GreenSock Posted April 12, 2021 Share Posted April 12, 2021 Indeed, I've heard people say that Safari is the new IE But GSAP animations should work the same in any browser (aside from occasional performance differences due to browser optimization or lack thereof). 1 Link to comment Share on other sites More sharing options...
BrianCross Posted April 13, 2021 Share Posted April 13, 2021 @GreenSock I'll post another thread with an animation that doesn't work properly in iOS Safari but works perfectly in other browsers. Maybe you guys can figure it out. 😀 Link to comment Share on other sites More sharing options...
GSAP Ted Posted April 21, 2021 Author Share Posted April 21, 2021 On 4/10/2021 at 3:20 PM, GreenSock said: Welcome to the forums, @GSAP Ted. It's pretty tough to diagnose without seeing things in context (a minimal demo will significantly increase your chances of getting an answer in these forums), and we don't support ScrollMagic which isn't a GreenSock product. I'd strongly recommend switching to ScrollTrigger. I wonder if maybe you've got filters applied (like blur or drop-shadow) which can be very CPU-intensive for the browser to render. That's totally unrelated to GSAP. If you still need some help, feel free to post a minimal demo with a GSAP-specific question and we'd be happy to help. Thanks @GreenSock I really appreciate your input, i'll continue to further look into it. I look forward to looking more into the forum here, really awesome stuff! Link to comment Share on other sites More sharing options...
GSAP Ted Posted April 21, 2021 Author Share Posted April 21, 2021 On 4/12/2021 at 1:20 PM, BrianCross said: I find if I am going to have issues with any browser, iOS Safari will be the one. I'll craft an animation and it works flawlessly in Chrome and Firefox, but exhibits weird behaviour in Safari. I haven't tried desktop Safari since I run Linux, but iOS Safari is the worst. Thanks for the input @BrianCross even today I was adding in some CSS transitions and keyframes and I had to find a thread on Apple just to implement a particular wording to the code just for it to work on iOS Safari. Safari in general can be a headache. 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