Transform position of SVG text by adding

[kathryn.crawford]

You can see at line 26 in my JS that I am animating the svg text for whichever circle is hovered over. My only problem is this. Each circle is at different positions, so I need the text to animate by adding a certain number of px to it's current position. Something similar to a varible addition (x += 10;). Is this possible to do?

See the Pen JYBRVR by kathryncrawford (@kathryncrawford) on CodePen.

[ohem]

y: "-=300"

does the trick.

[Jonathan]

Were you looking for something like this:

 

See the Pen ZbMoWR?editors=001 by jonathan (@jonathan) on CodePen.

 

I commented out the AttrPlugin object (attr:{}) and animate the CSS  y (translateY) property using the CSSPlugin instead. So this way your not animating the y attribute due to the nature of SVG and the position of x and y attributes and how they relate to the tags below or above them in the order of the SVG markup.

 

I also added position: relative so its always -170px from its default center position when the circle is at its default state.

 

Half of the radius of circle when enlarged 150 + 20 pixels for padding  .. 150 + 20 = 170

.to(text[i], 0.6, {
      //attr: { // you do not need this line
         position:"relative",
         y: -170,
      //}, // you do not need this line
      ease: Expo.easeInOut
}, 0)

But m not sure if you want your text inside the circle or outside the circle tags?

[kathryn.crawford]

@Ohem, I didn't dare to hope it'd be that simple. Thanks so much!