How can I make an image fade in smoothly after a page finishes loading in Webflow?
TL;DR
- Use Webflow’s Page Load interaction to set the image’s initial opacity to 0%, then animate it to 100% after the page finishes loading.
- Set duration and easing for a smoother fade-in, then preview and publish to apply the effect.
To make an image fade in smoothly after a page finishes loading in Webflow, you should use Webflow’s interactions system tied to the Page Load trigger.
1. Set the Initial State of the Image
- Select the image on your canvas.
- Go to the Interactions panel (lightning bolt icon).
- Click + to create a new interaction.
- Under "Element Trigger", choose "Page Load".
- Name the animation (e.g., Fade In Image).
2. Add a Page Load Animation
- In the Page Load trigger settings, choose "When Page Finishes Loading".
- Click "+ Add Action" > "Start an Animation".
- Select "New Timed Animation".
3. Define the Fade-In Effect
Click "+ Add Action" and choose the image element.
Select "Opacity" and check "Set as Initial State".
Set the opacity to 0%.
Click "+ Add Action" again for the image.
Choose "Opacity" again, set it to 100%, and select a duration (e.g., 0.8s).
Optionally, add easing (e.g., Ease Out Quint) for smoother transition.
4. Preview and Publish
- Click Preview to test the animation.
- The image should now fade in once the whole page has loaded.
- Finally, Publish your site to see it live.
Summary
Use a "Page Load" interaction to first set the image’s opacity to 0%, then animate it to 100% opacity after the page finishes loading. This creates a smooth fade-in effect for images using Webflow’s built-in animation tools.