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

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

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

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?

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

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?

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

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

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

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