Can someone tell me how to animate the two lines. I got one working but I’m not sure how to get the green and orange to move. Here’s a link to see what I’m talking about https://plnkr.co/edit/RpqNkMcDTnZQippydXTm?p=preview
I just made these changes (gave unique names to vars) var innerCirclea = s.circle(200, 200, 200).attr({
fill: “none”,
stroke: ‘#FF6600’,
strokeWidth: 14,
strokeDasharray: “300”,
strokeDashoffset: 30
});
var innerCircleb = s.circle(200, 200, 180).attr({
fill: "none",
stroke: 'green',
strokeWidth: 14,
strokeDasharray: "300",
strokeDashoffset: 30
});
var innerCircle = s.circle(200, 200, 150).attr({
fill: "none",
stroke: 'red',
strokeWidth: 14,
strokeDasharray: "100",
strokeDashoffset: 30
});
Snap.animate(0,500, function( value ){
innerCircle.attr({ 'strokeDashoffset': value })
}, 6000 );
Snap.animate(0,-200, function( value ){
innerCircleb.attr({ 'strokeDashoffset': value })
}, 6000 );
Snap.animate(0,600, function( value ){
innerCirclea.attr({ 'strokeDashoffset': value })
}, 6000 );
Hi sorry, I think I did not save the code properly. I’ve put the changes in but can’t see them turning. Here’s the new one https://plnkr.co/edit/RpqNkMcDTnZQippydXTm?p=preview
You did the second part of what I suggested which is basically irrelevant. You overlooked the important part that was that you have 3 vars with the same name. I changed the names so they would be unique. You have 3 vars called innerCircle if you change them so they are unique such as var innerCircle, var innerCirclea, var innerCircleb. and then call them by their unique names they will work.
Got it working, thank you
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.