Page flickers before transition animation

Design help Animations & Interactions
1

Hi all! I have been working on this site for some time now and placed a transition/pre-loading animation for each page. Seems to work well but I’m getting some bugs, and I can’t seem to find a way through.

I have set all elements to appear after the transition animation, but I still get a short flicker as I transition to other pages, before the preloader loads.

Cheers to all!

Here is my read-only link: https://preview.webflow.com/preview/mupeng?utm_medium=preview_link&utm_source=designer&utm_content=mupeng&preview=ca3837f6f20740992492f6fb4d5e5ffe&pageId=60f550f3e5a033bd35de785a&workflow=preview

2

Hi @Bianca_Are

You have to set the Div Block 49, or any elements that flicker, to: zero opacity or display none in your CSS. Then in your page load interaction add the 100% opacity or show action to that Div or element.

I had to add this to at least 20 different items. That flicker is a little annoying huh? This will fix it.

Absolutely beautiful site by the way!! I really really love it! :smile:

-G.J.

3

Thank you so much for this, G.J.
Finally found the workaround with your suggestion!

Cheers and thank you for the help & appreciation!!

1 Like
4

No problem, have a great weekend!