Group animation > Parent

[cava83]

Hi there,

 

First post on here and using GreenSock, looking for some guidance please, hopefully I can return the favour somewhere.

 

I am looking to animate the whole balloon (see codepen link), simple animation left to right.

 

If I create a div, associate an image to the div via CSS and animate that through GreenSock, it works ok.

 

If I apply that method to the group, it does not work.

 

The vector has been exported from Illustrator and given an ID of <g id="balloon">

 

Please could someone guide me as to what I am doing wrong?

 

Any guidance kindly appreciated,

 

Many thanks,

 

 

 

 

See the Pen rWREbR by cava83 (@cava83) on CodePen

[PointC]

Hi cava83 

 

Welcome to the GreenSock forums.

 

That will  work fine if you use x instead of left like this:

TweenLite.to(balloon, 10, {x:800});

Please keep in mind that 800 in the SVG is units and not screen pixels. Your viewBox is over 3500 units wide so the balloon won't move as far as the div with the logo image in it.

 

Hopefully that helps a bit.

 

Happy tweening and welcome aboard.

[cava83]

Hey Craig,

 

Thank you very much for your reply, kindly appreciated.

 

Ah, that works !

 

What I could not get my head around is why did it work for the logo and not for the balloon.

 

Please could you let me know why X should work instead of Left, curious , should I be replacing left with X for everything else?

 

Again, thank you very much for helping out.

 

Originally the animation was created fully using CSS, however, IE11 quickly ruined that as needed the full animation.

 

Many thanks,

[PointC]

You'll need to use x when using SVGs, but I recommend using it for everything since you'll get the advantage of sub-pixel rendering. That's especially helpful if you're moving small distances.

 

Here's a terrific post by Sara Soueidan about the SVG coordinate system that should be quite helpful for you.

https://sarasoueidan.com/blog/svg-coordinate-systems/

 

Happy tweening.

[cava83]

Craig,

 

Funnily enough, I was just reading that.

 

Excellent, I shall use X.

 

I guess I was just taking the documentation as bible

 

I'll carry on having a play,

 

Many thanks,