How can I use Vivus Instant - inline SVG animation with CSS in Webflow?

To use Vivus Instant - inline SVG animation with CSS in Webflow, you can follow these steps:

1. Add Vivus Instant script to your Webflow project: Go to the Vivus Github repository (https://github.com/maxwellito/vivus) and download the latest release. Unzip the file and locate the vivus.min.js file. In your Webflow project, go to the Project Settings, then click on the Custom Code tab. Paste the contents of vivus.min.js between <script> tags in the Footer Code section. Save your changes.

2. Upload or create an SVG file: In your Webflow project, navigate to the Designer and go to the page where you want to use the Vivus Instant animation. Add an SVG element to your page by dragging and dropping the Embed element onto the canvas. You can either upload an SVG file or create one using Webflow's built-in SVG editor.

3. Give your SVG element a unique ID: Select the SVG element on your canvas and go to the Settings panel on the right-hand side. Under the Attributes section, give your SVG element a unique ID. This ID will be used to target the element in the CSS.

4. Create a trigger for the animation: Add an element to your page that you want to trigger the Vivus Instant animation. This could be a button, a scroll trigger, or any other element. Give this element a unique class or ID.

5. Add custom code: In the Designer, go to the page where you want to add the animation. Paste the following code in the Footer Code section of the Custom Code tab in the Project Settings, replacing #svg-id with the ID of your SVG element, and .trigger-class with the class or ID of your trigger element:

<script>    document.addEventListener('DOMContentLoaded', function() {        const svg = new Vivus('#svg-id', {type: 'oneByOne'});        const trigger = document.querySelector('.trigger-class');        trigger.addEventListener('click', function() {            svg.play();        });    });</script>

1. Preview and test: Publish your Webflow project and test the animation by clicking the trigger element you created. The Vivus Instant animation should animate your SVG element based on the settings you specified in the new Vivus() function.

Keep in mind that Vivus Instant is a JavaScript library, so make sure you have JavaScript enabled in your Webflow project. Also, customize the animation settings in the new Vivus() function to suit your needs. You can find more information about the available options in the Vivus documentation.

Additional Resources:

• Vivus GitHub repository: https://github.com/maxwellito/vivus
• Webflow University: https://university.webflow.com
• Vivus Documentation: https://maxwellito.github.io/vivus

Q1: Can I use Vivus Instant animation with inline SVG in Webflow?
Q2: How do I add custom code in Webflow?
Q3: What are the available options for customizing Vivus Instant animations?