Jump to content


A responsive svg circle animation

Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello, I'm trying to create a SVG circle with an animation. It work but when I'm resizing the window, the circle animation is not responsive : the animation accelerate or deselerate by the window resizing. If wee decrease the size of the window, the animation does not end correctly. 


Exemple http://guillaumeduclos.fr/circle/#/


My code

<svg xmlns="http://www.w3.org/2000/svg">
  <circle ref="circle" cx="50%" cy="50%" r="50%" fill="none"/>
svg {
  overflow: visible;
  width: 100%;
  height: 100%;
  border: 0px solid red;
  transform: rotate(-90deg);

  circle {
    fill: none;
    stroke: #FFFFFF;
    stroke-width: 2px;
    drawSVG: "0%",
    ease: Linear.easeNone,
    repeat: -1,
    //onRepeat: this.props.changeTeaserBackground.bind(this),
    callbackScope: this,


I don't know if there is any solution to manage the speed animation and create a "responsive" animation ? I did not find methode in the doc for this. Thanks for your help.

Link to comment
Share on other sites

I'm not sure I follow the question. Do you think you could make a demo for us?



  • Like 2
Link to comment
Share on other sites

It would really help if you could create a reduced test case as suggested by the thread that PointC shared.

I couldn't easily find the js you are using for that effect on your live site.

Should be pretty easy to drop your circle SVG into a CodePen (or similar) with just the pertinent JS code.

That way we focus on the code in question, edit it, and provide a solution for you.



  • Like 2
Link to comment
Share on other sites

Yeah I tried looking at the JS too, but there's just too much in there. I also don't know if you're using the latest version of DrawSVG. If I understand your question correctly, you should be able to resize the screen while the circle draws and it will look fine.


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


  • Like 6
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.