Jump to content
Search Community

ScrollTrigger translate causing flash in Safari only

aok test
Moderator Tag

Recommended Posts

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

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!

  • Like 1
Link to comment
Share on other sites

It looks like a browser rendering thing. A few things you could try:

  1. Add the CSS will-change: transform to the affected element(s). 
  2. 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!

  • Like 2
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...