CODEWITHSUNDEEP
javascriptsvggsap
Tim
Tim

Reputation: 2163

SVG animation with GSAP

I might be missing something simple, but I can not animate SVG elements with GSAP despite the animations working well with HTML.

For example, if I have two circles — one created with HTML/CSS, the other with SVG — the HTML element gets animated while the SVG one does not:

var circle = document.getElementById("html"); // Does work
var circle = document.getElementById("svg"); // Does not work
TweenLite.to(circle, 1, {
  left: "100px"
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.5/TweenMax.min.js"></script>

<div id="html" style="height: 20px;width: 20px;border-radius: 50%;background: tomato;position: absolute"></div>
<svg width="100" height="100">
  <circle id="svg" cx="10" cy="50" r="10" fill="tomato" />
</svg>
Embed also on JSFiddle

Upvotes: 0

Views: 461

Answers (1)

methodofaction
methodofaction

Reputation: 72405

left is not a valid attribute for SVG elements. GSAP provides an abstraction in which you use the x attribute to animate via transforms (both SVG and HTML elments), or you can use the cx attribute of SVG circles.

TweenLite.to(circle, 1, {
  x: 100
});

Or...

TweenLite.to(circle, 1, {
  cx: 100
});

Upvotes: 2

Related Questions