Search code examples
svggsap

GSAP: SVG not centering as expected

2 questions about this CodePen

Screenshot from CodePen showing a red and a green balloon.

  1. Why isn't the red balloon ending up centered on the crosshairs, given that I've set transformOrigin:"50% 50%"?
  2. Why does the green balloon seem to have its origin set to "left top" when, according to this doc, it should default to "50% 50%"?

Relevant code (I think)

HTML

<svg class="container" fill="#f0c0c0" style="background: linear-gradient(to top, #ddfdff, #6dd5fa, #2980b9);
;" xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
  <g id="green-balloon">
    <path … />
    <path … />
    <text …>🕊</text>
  </g>
  <g id="red-balloon">
    <path …/>
    <path …/>
    <text …>⚡️</text>
  </g>

  <line x1="0" y1="100" x2="200" y2="100" stroke="white" stroke-width=".5px"/>
  <line x1="100" y1="0" x2="100" y2="200" stroke="white" stroke-width=".5px" />

  <defs>…</defs>
</svg>

JS

var redBalloon = $("#red-balloon");
var greenBalloon = $("#green-balloon");

var tl = new TimelineLite({onUpdate:updateSlider});

tl.set(greenBalloon, {x:100, y:200})
  .set(redBalloon, {transformOrigin:"50% 50%", x:100,y:200})
  .to(greenBalloon, 1, {scale:2, y:100})
  .to(redBalloon, 1, {scale:2, y:100})

CSS

Not applicable.

Solution

  • Per OUSblake's answer on the GreenSock forums:

    transformOrigin/svgOrigin affect scale, rotation, and skew. And svgOrigin uses the <svg> element's coordinate system. So svgOrigin: 50% 50% means everything is going to transform around 100,150 in the svg. transformOrigin: 50% 50% would be the center of the balloon. To center your element, use xPercent: -50 and yPercent: -50.

    After providing a demo on Codepen, he continues:

    It sounds like you were expecting transformOrigin to behave like in Adobe products, where changing the registration point causes the element to move. It doesn't, but that's what xPercent/yPercent are for. 😃

    Just use those with a transformOrigin: 50% 50%, and everything should be pretty easy with curves.

    He even went so far as to demonstrate motion along a path. Super helpful!