How can I make an image fade in smoothly after a page finishes loading in Webflow?
TL;DR
- Add an image with a unique class and set its initial opacity to 0% in the Style panel.
- Use the Interactions panel to create a Page Load trigger, then add a timed animation that fades the image from 0% to 100% opacity over a defined duration.
To create a smooth image fade-in effect after page load, you can use Webflow’s Interactions panel to trigger a timed animation.
1. Add and Select the Image Element
- Place your image on the page using the Image element or as a background image inside a Div.
- Give the element a unique class name for easy targeting in the animation.
2. Set Initial Image Opacity
- With the image selected, go to the Style panel.
- Set the image’s Opacity to 0%. This ensures the image starts invisible when the page loads.
3. Create a Page Load Animation
- Go to Interactions (lightning bolt icon) in the right toolbar.
- Under Page Trigger, click + next to “Page load”.
- Choose When page finishes loading.
4. Add a Timed Animation
- Click + Timed Animation and name it (e.g., “Image Fade In”).
- Click + Add Action, then choose Opacity.
- Select your image element.
- Set the first keyframe opacity to 0% and Check ‘Set as initial state’.
- Click + on the timeline to add another Opacity animation, set it to 100% and add a duration (e.g., 0.8s to 1s) for a smooth transition.
- (Optional) Add a delay if you want the image to fade in after other content.
5. Preview and Fine-Tune
- Use Preview mode to test the effect.
- Adjust the duration or easing (e.g., “ease-in-out”) for better smoothness as needed.
Summary
To fade in an image smoothly after a page loads in Webflow, set its initial opacity to 0%, then use a Page Load animation to animate its opacity to 100% with a timed transition. You’ll do this via the Interactions panel with a timed animation tied to “When page finishes loading.”
