How can I make an image fade in smoothly after a page finishes loading in Webflow?
TL;DR
- Set the image's initial opacity to 0% in the Style panel.
- Use the Interactions panel to trigger a timed animation on page load that animates the image's opacity from 0% to 100%.
To make an image fade in smoothly after the page loads in Webflow, you can use the Webflow Interactions (IX2) system to create a page load animation.
1. Prepare Your Image Element
- Select your image on the canvas.
- Give it a clear class name (e.g.,
fade-in-image) so you can target it in interactions.
2. Set Initial Opacity
- With the image selected, go to the Style panel.
- Under Opacity, set it to 0%.
- This ensures the image is invisible on page load.
3. Create a Page Load Interaction
- Go to the Interactions panel (lightning bolt icon).
- Click the plus (+) icon beside Page Trigger and choose Page Load.
- Select When Page Finishes Loading.
- Click + Add Action and choose Animation → Timed Animation → create a new animation (e.g.,
Fade In Image).
4. Build the Fade-In Animation
- Click + and select Element → Select Class (e.g.,
fade-in-image). - Choose Opacity as the property and set the initial state to 0% by checking Set as initial state.
- Click + again, choose the same element, and now change Opacity to 100%.
- Set the duration (e.g., 0.8s) and optionally a delay (e.g., 0.2s) for timing control.
- Choose an easing function like Ease or Ease-Out for smoother transition.
5. Publish and Test
- Publish the site to your staging domain.
- Reload the page in your browser to confirm that the image fades in only after the page finishes loading.
Summary
Use Webflow’s Interactions panel to set the image's initial opacity to 0% and animate it to 100% on Page Load → When Page Finishes Loading for a smooth fade-in effect.