How to make an animation that, when scrolling, filled the circle with a strip like in the photo on ScrollTrigger?

[Oybek12 0 Likes (Newbie)]

Hello, I found an animation that, when scrolling, fills a strip of a circle. I decided to do the same on scrolltrigger.
I found this animation on this site https://digital.vtb.ru/digest/2021-apr/
I also uploaded a photo of how it looks

Probably this is done as something with svg, or with a blue background at the back?

I do not know how to implement this on scrolltrigger.
I hope for your help. Thanks in advance

[Cassie 5,128 Likes (Superhero)]

Hi there - you'll want to look into SVG paths and masking for this.

This is a great article.

 

https://www.motiontricks.com/svg-dashed-line-animation/

 

[Oybek12 0 Likes (Newbie)]

3 hours ago, Cassie said:

Hi there - you'll want to look into SVG paths and masking for this.

This is a great article.

 

https://www.motiontricks.com/svg-dashed-line-animation/

 

Thanks, but there are two small problems.

1. For some unknown reason, the circle does not seem to fit completely, cuts are visible in it. I set different values for the viewbox, but these cuts are still visible.

2. The animation works, but is it possible to add a background stroke like in the picture ?

How can these problems be solved?
Here is the code itself

See the Pen jOBQMKM by asd123asd1 (@asd123asd1) on CodePen

Thanks in advance, I will be grateful

[PointC 14,185 Likes (Superhero)]

The 'cuts' in your path are because the stroke is overflowing the SVG.

 

Here's a little example. The SVGs are 100x100 with a circle radius of 50. I've outlined the SVGs with a red dotted stroke so you can see what's happening. You can see the circle with a fill pushes right up to the edge in the first SVG. Now adding a stroke will cause problems because strokes are center aligned. Meaning half of the stroke will be outside the viewBox. You can see the 20 unit stroke is partially cut off in the second SVG. The third SVG is the same as the 2nd but I've set the SVG overflow to visible.  Now you can see the whole stroke.

 

See the Pen c90655407d005eadb7af06e1941db0c7 by PointC (@PointC) on CodePen

 

So the answer is either setting your SVG overflow to visible or make certain your elements remain inside the SVG viewBox. 

 

In regards to your main question. You could set up the circle with a gradient stroke like this example. 

See the Pen QWpJdpz by PointC (@PointC) on CodePen

 

Another way would be to just use a rectangle in the background with a gradient fill which is then revealed by the stroke in the mask.

 

Hopefully that helps. Happy tweening.

 

 

[Oybek12 0 Likes (Newbie)]

See the Pen QWpJdpz by PointC (@PointC) on CodePen

Thanks for your help, but this animation only works in google chrome, it doesn't work in firefox. Is it possible to fix it?

[OSUblake 18,475 Likes (Superhero)]

Try using coordinates instead of percents.

 

<mask id="theMask" maskUnits="userSpaceOnUse">
      <circle id="target" r="400" cx="500" cy="500" fill="none" stroke="white" stroke-width="84" stroke-linecap="round" />
    </mask>

 

[PointC 14,185 Likes (Superhero)]

Yep - sorry about that. I was messing with percentages while making it and forgot to switch it back. I updated the original now.

 

Happy tweening.

[Oybek12 0 Likes (Newbie)]

7 minutes ago, OSUblake said:

 

<mask id="theMask" maskUnits="userSpaceOnUse">
      <circle id="target" r="400" cx="500" cy="500" fill="none" stroke="white" stroke-width="84" stroke-linecap="round" />
    </mask>

 

Thank you, how did you know it was because of the percents?

[Oybek12 0 Likes (Newbie)]

3 minutes ago, PointC said:

Yep - sorry about that. I was messing with percentages while making it and forgot to switch it back. I updated the original now.

 

Happy tweening.

Thanks

[OSUblake 18,475 Likes (Superhero)]

3 minutes ago, Oybek12 said:

Thank you, how did you know it was because of the percents?

 

Firefox is just weird for stuff that doesn't get rendered, like elements inside <defs> tags

[PointC 14,185 Likes (Superhero)]

21 hours ago, OSUblake said:

Firefox is just weird for stuff that doesn't get rendered, like elements inside <defs> tags

You had me at "Firefox is just weird"