Jump to content
Search Community

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

Oybek12 test
Moderator Tag

Go to solution Solved by PointC,

Recommended Posts

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

asd.png

Link to comment
Share on other sites

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

asd.png

dsa.png

Link to comment
Share on other sites

  • Solution

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.

:)

 

 

  • Like 6
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...