Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Oybek12

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

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

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?

Link to comment
Share on other sites

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>

 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

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.

  • Like 1
  • Haha 1
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

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

Link to comment
Share on other sites

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

  • Like 3
Link to comment
Share on other sites

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" ;)

  • Like 1
  • Haha 1
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.

×