Jump to content
Search Community

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

tagger test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...