On the landing page, there’s an animation of the logo, when we scrolled it’s supposed to reduced to te top of the page and go out. Everything’s fine with that but sometime there’s a sizzling, like white lines appearing on the background between the logo and the words “Un modèle à ContreCourant”. Any ideas why it’s happening or how i can change the animation and fix it ?
This is the settings of the “landing” section and it’s animation :
White lines appearing during Lottie scroll animations can occur due to several common factors. Here are some general troubleshooting steps that might help resolve the issue:
The white lines might be related to the animation’s original export settings from After Effects. Ensure your Lottie file is exported with the correct dimensions and transparency settings. You can also try adjusting the animation’s position settings in Webflow to ensure it’s properly aligned with your container.
If you’re using scroll animations, check that the animation trigger points and timing are properly set. Sometimes, visual artifacts can appear when animations overlap or trigger too quickly during scroll events.
For the best results with Lottie animations in Webflow:
Use the latest version of the Lottie player
Ensure your animation container is properly sized
Check that your animation’s background is truly transparent
Consider adding a small delay to your scroll triggers
Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.
You have a lot of transformation and scaling happening and the flickering line artifact seems to be caused by the browser struggling to keep up with the calculations. I’m unsure why it’s white- the body background is also dark, so it appears to be a true rendering artifact problem, at least on Chrome.
However it seems to be right at the border of your landing section and Section 66 home. Do you need Section 66 home to be sticky? Removing that seems to resolve the artifacts for me.
