Jump to content
GreenSock

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

A responsive svg circle animation

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>
svg {
  overflow: visible;
  width: 100%;
  height: 100%;
  border: 0px solid red;
  transform: rotate(-90deg);

  circle {
    fill: none;
    stroke: #FFFFFF;
    stroke-width: 2px;
  }
}
TweenMax.from(
  this.refs.circle,
  this.state.animDuration,
  {
    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?

Thanks.

 

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

 

Thanks!

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

×