Flash of white on start of each animation

[dan111]

Hi, I have a number of animations being triggered as the page is scrolled. When each one starts or reverses there's a flash of white - I don't think this is FOUC, as it's not when the page loads it seems to happen when the animation is triggered, I'm not sure what is causing it. Thank you for any help. Here is the codepen:

 

See the Pen PorYeov by Daniel-Imray (@Daniel-Imray) on CodePen

[mvaneijgen]

I don't see any flash, do you maybe have a screen recording of what you're seeing,  browser/version and what the steps are the reproduce the issue. 

 

Personally my personal note is when working with ScrollTrigger is as soon as you see you need multiple to get the desired effect you can probably do it with one! Just create a timeline and put each tween on that timeline then have ScrollTrigger control that one time, so instead of you needing 11 ScrollTrigger to get the effect working here it is just done by one. This probably also frees up some resources and will be much smoother on the browser.

 

Also keep in mind the best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging. 

 

I've also installed GSDevTools so that you can easily inspect your animation. 

 

Hope it helps and happy tweening! 

 

See the Pen ZEdzRgg?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[dan111]

Hi, thank you very much for  such a comprehensive reply. I'm using Chrome - I am seeing the white flash on your version as well, I suppose it may just be how the colours change. For example, on your version played slowly with dev tools, the "F" goes from blue to very light purple before settling at the final darker colour, all the letters seem to go very light before reaching their final colour, which is probably what I'm seeing as the white flash.

 

It's good to know anyway that I'm not doing anything particularly wrong in relation to this. Thanks for the tips, and in particular the advice to simplify! I'll have to have a think about whether I can do it with just one scroll trigger...

[Rodrigo]

Hi,

57 minutes ago, dan111 said:

For example, on your version played slowly with dev tools, the "F" goes from blue to very light purple before settling at the final darker colour, all the letters seem to go very light before reaching their final colour, which is probably what I'm seeing as the white flash.

That is to be expected as far as I can tell. Keep in mind that GSAP is interpolating the RGB numeric values for the colors (inspect with devtools), so as those values are being updated, the color is going to gradually change based on those three values. Is just the nature of how colors work based on those values, not really a GSAP problem per se.

 

Hopefully this clear things up.

Happy Tweening!