How can I make two separate animations for a text block and button on my home page in Webflow activate simultaneously?

To make two separate animations (for a text block and a button) activate simultaneously on your Webflow homepage, you'll need to combine them into a single interaction or timeline.

​

1. Use a Single Page Trigger or Element Trigger

​

• Choose whether the animation starts when the page loads (Page Trigger) or when scrolling (Element Trigger).
• Go to your Home page in the Webflow Designer and select either the body (for page load) or a specific element (for scroll/hover interaction).

​

2. Create a New Interaction

​

• Open the Interactions panel (lightning bolt icon).
• Click + to add a new Page Trigger (e.g., "When Page Starts Loading") or an Element Trigger (e.g., "While Scrolling in View").
• Choose “Start an Animation”, then select “+ New Timed Animation”.

​

3. Add Both Elements to the Timeline

​

• Add the Text Block to the timeline:
• Click + and select the element on the canvas (or from the navigator).
• Choose the desired animation (e.g., move, fade in, scale, etc.).
• Add the Button:
• Repeat the process by clicking +, selecting the button, and defining its animation.

​

4. Set the Same Timing for Both

​

• Make sure both animations start at the same time position (e.g., at 0ms on the timeline).
• You can also fine-tune the duration, easing, and other properties independently without desynchronizing them.

​

5. Save and Assign the Animation

​

• Click Done when finished.
• If you're using a Page Load Trigger, Webflow will auto-assign it.
• If you're using an Element Trigger, ensure the target element has the trigger applied.

​

Summary

​

To animate a text block and a button simultaneously, create a single interaction using Webflow’s Interactions panel and add both elements to the same animation timeline with the same start time. This ensures both animate in sync even if their individual effects differ.