Flickering issue during page transition on mobile browsers

[Pata]

I'm facing a specific issue with the page transition animation (GSAP + Barba) on my website. The problem is occurring only on mobile browsers such as Safari on iPhone and Chrome on mobile devices.
 

Test flow: scroll down the home page to the section with the black background and click on either link: "Conoce el estudio" or "Contacta"

 

Problem Description:

When transitioning between two pages, I've implemented an effect where the current page slides out to the left and the new page comes in from the right. During this transition, I apply an instant translateY to the elements of the current page based on the scroll position and use scrollTo to ensure the new page appears at the top.

 

The code I'm using is as follows:

barba.hooks.beforeEnter((data) => {
  const currentContainer = data.current.container
  const scrolledPixels = window.scrollY * -1

  gsap.set(currentContainer, {y: scrolledPixels})
  window.scrollTo({top: 0, left: 0, behavior: 'instant'});
});

 

On desktop browsers, everything works perfectly. However, on mobile devices, I experience a brief "flickering" or flash with the text elements during the transition. Usually, images remain static as expected, but the text seems to re-render, causing a brief flash of the top of the page before snapping back to the desired position.

Has anyone faced a similar problem or has any suggestions on how to solve it? Any guidance or direction would be greatly appreciated.

 

What I've Tried:

• TranslateY it in plain JS
• Disable force3d to prevent hardware acceleration.
• Disabling any other simultaneous animations or transitions.
• Optimizing the CSS, adding will-change and checking properties related to text rendering.
• Using requestAnimationFrame to synchronize animations.
• Intercept native scroll behavior with ScrollTrigger.normalizeScroll(true)

None of the above solutions has resolved the issue.

 

I'm aware that the question may not be 100% related to GSAP, but I just hope to find someone who knows what the magic trick is.

[Tasty]

Hey @Pata

Indeed there's some flickering on IOS Safari, and sometimes the transition does not work properly when going back, and sometimes the split text animations don't fire

That's a bit more complicated without seeing the full code, but I can point you to https://ihatetomatoes.net/how-to-make-page-transitions-in-html/  

Though probably you would need something more complex as https://ihatetomatoes.net/get-bella/ where @Ihatetomatoes explains a slick way to handle advanced transitions and what should happen before them - great tutorial, I highly recommend buying it 

Happy Tweening  

[Rodrigo]

Hi,

 

Petr (@Ihatetomatoes) made an entire collection of videos for using GSAP with Barba:

 

Happy Tweening!

[Pata]

Hi, thanks for your answers.

 

I have purchased Petr (@Ihatetomatoes) courses for a long time and they have helped me a lot to create this and other websites.

 

The problem I have with this is due to the fact that it seems that the scrollTo property and the translateY CSS styles do not seem to be applied at the same time on mobile devices, but on desktop.

 

It is something very specific that I cannot find an answer to in those courses. BTW, thank you very much and I hope I can find someone who knows more!

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or Stackblitz that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions.