How can I create a simple floating animation using images as floating objects in Webflow?
TL;DR
- Add an image to the canvas, assign it a class, and set its position to Relative or Absolute.
- Use a Page Load trigger in the Interactions panel to create a timed animation that moves the image up and down with easing, enabling loop (and optionally alternate) for continuous floating.
To create a simple floating animation using images in Webflow, you can apply movement using the Webflow Interactions panel. Here's how to build a basic up-and-down floating effect.
1. Add Your Image to the Canvas
- Drag an Image element onto the canvas.
- Upload or select your desired image.
- Optionally, place it in a Div Block for more control.
2. Set the Image Position
- Select the image or its container.
- Go to the Style panel.
- Set the position to
RelativeorAbsolute(depending on layout needs). - Assign a class name (e.g.,
floating-img) for targeting in interactions.
3. Create the Float Animation
- Open the Interactions panel (lightning icon).
- With the image selected, click + next to Element trigger and select While page is scrolling or Page load, depending on when you want the animation to start.
If using Page Load:
- Choose Page Load > When page finishes loading > Play animation.
- Click + Timed Animation and name it (e.g.,
Float Up and Down).
4. Define the Floating Motion
- In the Timed Actions panel, add steps:
- Move: Y =
-10px, Duration =2s, Easing =Ease In Out - Move: Y =
10px, Duration =2s, Easing =Ease In Out - Turn on the Loop option (loop icon) at the top of the animation timeline.
- Optionally, check Alternate to allow back-and-forth movement.
5. Publish & Test
- Publish the site to preview the animation live.
- Check responsiveness and adjust values if needed for mobile.
Summary
To create a floating image animation in Webflow, use a timed interaction triggered on page load that moves the image up and down in a loop with easing. This creates a smooth, floating effect perfect for decorative elements.