aok Posted October 18, 2022 Share Posted October 18, 2022 I'm using ScrollTrigger to do some slide in and up and out of two panels on a dev site I'm building. I can look to create a reproduction in CodePen but I wanted to get some thoughts first, if possible. https://molitor-dev-e52440.netlify.app/exhibitions/flush/ This works fine in most browsers but on Safari (15.4) I am getting a weird flash of one of the panels on the second scrollTrigger comes into play. It doesn't always happen but just before the panel slides up it has a flash and a bit of a glitch. I wanted to see if a) you guys were seeing this also and b) if there's perhaps an obvious thing I'm missing? I have three scrollTriggers set up for the whole functionality. I'm using Nuxt/Vue BUT the setup is fairly vanillaJS. const moveInMediaFromRight = gsap.to(media.value, { x: 0, duration: 1, ease: 'none' }) ScrollTrigger.create({ trigger: scroller.value, scrub: true, start: 'top top', end: 'center center', animation: moveInMediaFromRight, invalidateOnRefresh: true }) const moveUpInitUpAndOut = gsap.to(init.value, { y: '-100%', duration: 1, ease: 'none' }) ScrollTrigger.create({ trigger: scroller.value, scrub: true, start: 'center center', end: 'bottom bottom', animation: moveUpInitUpAndOut, invalidateOnRefresh: true, onLeave: () => detailsIsActive.value = true, onEnterBack: () => detailsIsActive.value = false }) const fadeOutDetailsOverlay = gsap.to(overlay.value, { opacity: 0, duration: 1, ease: 'none' }) ScrollTrigger.create({ trigger: scroller.value, scrub: true, start: 'top top', end: 'center top', animation: fadeOutDetailsOverlay, invalidateOnRefresh: true }) Link to comment Share on other sites More sharing options...
Rodrigo Posted October 18, 2022 Share Posted October 18, 2022 Hi, I don't have safari so I can't help you with that. Sorry if the suggestion seems pointless, but be sure to have the latest version of GSAP and ScrollTrigger. Also a suggestion I could make is to hide the panel that is showing the flash/glitch (I assume that is the one that sits behind the panel that slides from the right and then slides up, right?). Finally if it is an option, why not use a single timeline and ScrollTrigger instance for the whole sequence? Sorry I can't be of more assistance 🙏 Hopefully other users can see this in a Mac and chime in. Happy Tweening! 1 Link to comment Share on other sites More sharing options...
GreenSock Posted October 19, 2022 Share Posted October 19, 2022 It looks like a browser rendering thing. A few things you could try: Add the CSS will-change: transform to the affected element(s). Set force3D: true (or maybe even try false) on the affected animations/elements. You don't necessarily need to do both. GSAP uses 3D transforms by default during the tween and then switches to 2D when the tween is done (if possible) in order to maximize performance and minimize memory. My theory in this case is that Safari's rendering engine is choking on the switch from 2D to 3D and back. Again, I'm guessing here because you didn't provide a minimal demo so it's much harder to troubleshoot and experiment with a live site. Let us know if either of the suggestions make a difference for you. Good luck! 2 Link to comment Share on other sites More sharing options...
aok Posted October 19, 2022 Author Share Posted October 19, 2022 4 hours ago, GreenSock said: Add the CSS will-change: transform to the affected element(s). Yes! I think this has done the trick! I was always wary about using this as I felt it always created some issues, weirdly, but clearly not! Should I always use this then when using GSAP? Thank you, @GreenSock and @Rodrigo so much for the help. 1 Link to comment Share on other sites More sharing options...
GreenSock Posted October 19, 2022 Share Posted October 19, 2022 8 hours ago, aok said: Should I always use this then when using GSAP? No, I wouldn't say that. It can be useful sometimes. There are tradeoffs. Here's a post from a long time ago (browsers have improved since then): 1 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