Question 1

How to animate an SVG with Vivus on page scroll?

Accepted Answer

Set the 'start' option to 'inViewport' in the constructor, which triggers the animation when the SVG enters the viewport, as per the documentation.

Question 2

Can Vivus animate SVG fills or only strokes?

Accepted Answer

Vivus only animates strokes using strokeDashoffset; it does not support fill animations, so elements must have stroke properties and no fill for proper effects.

Question 3

Vivus vs Lottie for SVG animations – which is better?

Accepted Answer

Vivus is lightweight and ideal for simple drawing animations with no dependencies, while Lottie offers more complex, vector-based animations but requires a larger runtime and may have licensing considerations.

Question 4

How to handle SVG resizing with Vivus animations?

Accepted Answer

Use the recalc method in response to resize events to update stroke lengths, as described in the Non Scaling section to maintain animation consistency.

Question 5

Is Vivus compatible with React or Vue?

Accepted Answer

Yes, but it requires manual integration via lifecycle methods or refs since it's a vanilla JS library, and you need to manage DOM elements directly.

Question 6

How to create a custom timing function in Vivus?

Accepted Answer

Override animTimingFunction or pathTimingFunction with a JavaScript function that takes a progress value (0-1) and returns a modified value, using built-in ease functions or custom logic.

Vivus

What is Vivus?

Overview

Use Cases

Best For

Related Projects

Found a gem we're missing?

Not Ideal For

Pros & Cons

Pros

Cons

Frequently Asked Questions