How can I trigger Webflow animations through code?
TL;DR
- Create the animation in Webflow using the Interactions panel and assign a trigger.
- Inspect the element to find the animation's data attribute.
- Embed custom JavaScript in Project Settings to trigger the animation by manipulating data attributes or calling the Webflow interaction function.
- Optionally, use
Webflow.require('ix2').init()for manual interaction initiation.
To trigger Webflow animations through code, you can use Webflow’s built-in interactions and combine them with custom code for more advanced control.
1. Define the Webflow Interaction
- Create your desired animation in Webflow using its Interactions panel.
- Assign a trigger to the animation (e.g., scroll, click) and set desired properties.
2. Get the Animation's Data-attribute
- Preview your project in Webflow Editor and inspect the element you want to animate.
- Look for the data attribute associated with the animation, usually starting with
data-wf-.
3. Use Custom Code to Trigger Animation
- Embed custom JavaScript in your Webflow project:
- Go to Project Settings and select Custom Code.
- Add your custom script in the
<head>or before the</body>tag. - Attach your JavaScript to an event (e.g., button click) to change the data attribute or call the Webflow interaction function.
4. Example Code Snippet
- Use Webflow’s built-in webflow.js if you want to manually trigger an animation:
- For example, use
Webflow.require('ix2').init()to initiate interactions.
Summary
To trigger Webflow animations through code, create the animation in Webflow, obtain its data attribute, and then use JavaScript to trigger the animation by manipulating these attributes or calling the Webflow interaction function.
