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.