How do I make an image fade in after page load?

Design help Animations & Interactions
1

Hey

I want an image to fade in after a page load. I tried doing it with the animations tab by setting the opacity at 0 and then at 100. When the animation begins, the image is visible and then proceeds to fade out and then fade in. To me, this does not make any sense. How do I make an image fade in correctly after a page is finished loading?

-The beginner

2

I will recommend watching this video:

3

Did you find a solution to this? I have the same problem where the element is visible for a split-second, before disappearing and then playing the animation.

Not sure what Aaron sent was helpful.

Thanks!

Frankie

4

Welcome to the community! Make sure that you set the 0% as your initial state on the animation, otherwise it will appear, then disappear, before reappearing again.

Since I can’t see the specific instance it’s hard to say if there isn’t another setting that needs to be adjusted, so if you’re having trouble you can reply with your read-only link and I’ll take a look into it for you.

1 Like
5

Thank you for your help bro!