What is the correct Webflow element trigger to use in order to make a div slide-right into position just .5 seconds after a slide has stopped?
TL;DR
- Use the "Slider → Slide Change" trigger in Webflow and create a timed animation.
- Set the div’s initial state off-screen, then add a 0.5s delay before animating it into position with your desired duration and easing.
To make a div slide-right into position 0.5 seconds after a Webflow slide transition finishes, you need to use the "Slider" → "Slide Change" interaction trigger.
1. Use the Slider → Slide Change Trigger
- Go to the Interactions panel in Webflow (lightning icon).
- Select your Slider component on the canvas.
- Click + Element Trigger and choose "Slider".
- Under trigger type, pick "Slide Change".
- Apply this interaction "Only when slide is active" if you want it specific to one slide.
2. Set a Delay for the Animation
- Inside the Slide Change interaction, use a Timed Animation.
- Click + Timed Animation, name it (e.g., "Slide-In Div").
- Click the "+" to add an action, select the div you want to animate.
- Choose Move as the action.
- Set the initial state with the div off-screen (e.g., move left -100%).
- Then add a 0.5s delay to the actual move-to-position (usually 0%). Set duration as desired for the smooth slide (e.g., 0.3s).
- Use easing like “ease-out” if you want a natural effect.
3. Optional: Add an Initial State
- If the div should be hidden or off-screen when the page loads, set a "Page Load" interaction that ensures it starts hidden or off-screen.
Summary
To slide a div right 0.5 seconds after a Webflow slide ends, use the "Slider → Slide Change" trigger, then add a 0.5s delay in the interaction’s timed animation. This ensures the div animates after each slide completes its transition.