Trim-path animation - help needed

1

I’d like to create an animation similar to that below with the ellipses, when the stroke is animated and it sort of follows its tail, so to speak:

I tried it a bit with the trim-path and changing the stroke width but couldn’t get very close to the final result. Any ideas?

2

Hello,

Absolutely! Here’s how you can achieve the animated ellipsis effect with a more refined approach than just trim-path and stroke width:

  1. Create a Path:

Draw a circular path for your ellipsis animation. You can use any animation software that supports path animation.

  1. Duplicate the Path and Offset:

Duplicate the original path.
Apply a trim-path animation to the duplicated path. This will act as the “tail” that follows the stroke.

  1. Animate the Trim Path:

Set the “Start” property of the trim-path animation to a value slightly above 0 (e.g., 5%). This creates a small gap at the beginning of the path, mimicking MaryKayInTouch the tail following the stroke.
Animate the “End” property of the trim-path from 0% to 100%. This will make the “tail” section grow and reveal the full path as if the stroke is flowing.

  1. Animate Stroke Dasharray and Dash Offset:

To create the dotted line effect, set a dasharray value on your stroke properties (e.g., “4, 6”). This defines the length of your dashes and gaps between them.
Animate the “stroke-dashoffset” property. Animating this from a high value (e.g., the total length of your dasharray) to 0 will make the dashes appear to flow along the path, creating the following-tail effect.

  1. Refine and Loop:

You can adjust the animation timing and curves to fine-tune the flow and speed of the ellipsis animation.
Set the animation to loop to create a continuous ellipsis effect.

By these techniques, you can achieve a more natural looking ellipsis animation where the stroke trail follows its tail convincingly. This approach goes beyond just animating the stroke width and provides more control over the flow of the animation.