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 button activate at the same time in Webflow, you need to include both elements in the same interaction timeline.

1. Use a Single Page Trigger Interaction

• Go to the Interactions panel (lightning bolt icon).
• Select your Page (e.g., Home).
• Under Page Trigger, choose an event like Page Load or While Page is Scrolling, depending on how you want the animations to start.
• Click + Add Page Trigger and choose Start an Animation.

2. Create a New Animation Timeline

• Click + New Timed Animation.
• Give it a name like “Text and Button Entrance”.
• Click + and select the Text Block from the navigator or canvas.
• Add your desired animation steps (e.g., Move, Opacity, etc.).
• Repeat this with the Button element by clicking + again and adding animations for it.
• Both elements will have their own sequences—but since they're in the same timeline, you can set them to start at the same time.

3. Align Animations to Start Together

• In the timeline, ensure the animations for the Text Block and Button both start at the same time (0s).
• You can drag the bars to align them or adjust the Start Delay to 0s for each.

4. Adjust Easing and Duration (Optional)

• Customize duration and easing independently for each element.
• Matching durations and easing types (e.g., ease-out) helps the animations feel synchronized.

5. Save and Preview

• Click Done to save the animation.
• Preview the page to verify that both animations happen together as desired.

Summary

To animate a text block and a button simultaneously, include both in the same timed animation triggered by a single page or element-based interaction, and ensure their animation steps start at the same point in the timeline (0s).