Can Webflow's Interactions 2.0 be used to create rotating text within a sentence?
TL;DR
- Wrap the changing words in a text span with absolute positioning and set only the first word visible.
- Use Webflow’s Interactions panel to create a timed animation.
- Sequentially fade out and move each word up while fading in the next word.
- Loop the animation with appropriate delays and easing for smooth transitions.
Yes, Webflow's Interactions 2.0 can be used to create rotating text within a sentence by leveraging the text span method along with opacity and position animations. Here’s how you can achieve it:
1. Structure the Text
- Wrap the changing words in a separate text span inside a paragraph.
- Each word variation should be in the same span element but set to absolute positioning (stacked on top of each other).
2. Set up the Initial Styles
- Set the parent text container to relative positioning.
- Each rotating word should be set to absolute positioning with only the first word visible (set others to
opacity: 0).
3. Create the Interaction
- Go to Webflow’s Interactions panel and create a new page or element trigger (e.g., "When page loads" or "While scrolling").
- Select "Timed Animations" and create a new animation.
4. Configure the Animation Steps
- Step 1: Set first word to
opacity: 1, others toopacity: 0. - Step 2: Fade out the first word (
opacity: 0), and move it up (Y-axis -100%). - Step 3: Fade in the second word (
opacity: 1) in the same position. - Step 4+: Repeat the process for each rotating word.
- Loop the animation to continuously cycle the words.
5. Adjust Timing and Easing
- Set a delay between transitions (e.g., 2s per word).
- Use ease-in-out or custom cubic-bezier transitions for smooth motion.
Summary
You can create rotating text within a sentence using Webflow’s Interactions 2.0 by stacking words using absolute positioning and cycling through them with opacity and position animations. This method ensures a smooth and fully controllable animation without external JavaScript.