Streaming live at 10am (PST)

Animation problem (Double load)


#1

Hi! I have a problem with my animations "on load" and triggered on my wordpress site.. you see when the page loads all the elements who has the animation, loads on the first place and then the effect it's applied.. so, by example.. I have an image, the page loads and that image appears for 1 second and then the animation start, on this case the animation is fade from 0% to 100%.. it's like the image appears at 100% just for one second, then disappear and continues the fade to 100%, any help with this? Thanks!


#2

Things like this are unavoidable, there's always a flash. To avoid that, load your image without displaying it. Give the image or element the display:none property, then add a display:block property to the interaction that fades your image in. Start by displaying the image and then fade it in.

There are a lot of situations where you have to do this to have a clean transition.


#3

Thank u @vincent the strange thing is.. that flickering only appears on my wordpress theme, not in the html export from webflow.. I already try that display:none property and other possible solutions, like backface visibility.. I only tested the problem on Firefox and Chrome


#4

Ok, I just fixed setting opacity:0; to the element. stuck_out_tongue_closed_eyes


#5

Oh I assumed it was the case to begin with smile


#6