Rotating an SVG with a text element positioned relatively (% units)

[tagger 0 Likes (Newbie)]

I am trying to rotate an SVG with a text element whose "y" attribute is expressed in % units. 

During the animation the text does not keep the proper position. The elements slides down relatively to other elements in the SVG .

If I change the "y" attribute to an absolute value - it rotates as expected

Even if I perform only the .to tween - I can see the text slide down a little ...

Is it something I should expect ?

 

My tween :

 tl = new TimelineMax({paused: "true"});
      tl
        .to(svg, 1, {delay: 1, attr:{viewBox:"-120 -96 392 96"}} )
        .staggerTo(".symbol_copy", 1, {
          autoAlpha: true,
          svgOrigin: "8px 56px",
          cycle: {
            rotation: [-100,-75,-50,-25],
            rotationZ: 0.001,
            delay: function(index) { return 0.7-(0.15 * index); }
            }
          },
          0
        );
      maxi_tl.play();

See the Pen bOMdog by tagtag (@tagtag) on CodePen

[mikel 1,823 Likes (Superhero)]

Hi @tagger,

 

Welcome to the GreenSock Forum.

 

Please provide a reduced test case (see info here) to show the problem.

 

Kind regards

Mikel

 

 

[tagger 0 Likes (Newbie)]

Thanks for the tip

Codepen added in the question

[OSUblake 9,990 Likes (Superhero)]

Percentage values are relative to the viewBox, so that's expected. That's has nothing to do with GSAP. Set it yourself to see.

 

document.querySelector("#mySVG").setAttribute("viewBox", "-120 -96 392 96")