Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
francis789

items not starting from the same point

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 want to make a shooting-star animation with lines between the stars.

I created the image in svg for the end points and set the motion using TweenMax.from()

Despite starting all objects from the coordinates, they seem to come from different places...

See the Pen GBgQLY by fvila (@fvila) on CodePen

Link to comment
Share on other sites

Hi @francis789 :)

 

I'd recommend width/height instead of scale for those images. 

 

See the Pen pZvLXr by PointC (@PointC) on CodePen

I don't understand what the lines should be doing. Should they be drawing on with drawSVG? I see your pen loads the drawSVG plugin, but there are no tweens that use it so I wasn't sure. You'll also see that I condensed your code down to two tweens. Rather than a separate tween for each ID, you can target all the lines and all the images at the same time. It's much easier to manage.

 

Hopefully that helps. Happy tweening.

:)

 

  • Like 5
  • Thanks 1
Link to comment
Share on other sites

1 hour ago, francis789 said:

Despite starting all objects from the coordinates, they seem to come from different places...

 

Remember this?

 

Quote

You should remove transforms from anything you want to animate as it might cause problems with scaling and rotation.

 

 

All your images start off scaled from a different origin, so your transform origin is throwing everything off.

 

See the Pen yqyEyZ by osublake (@osublake) on CodePen

 

 

 

  • Like 5
Link to comment
Share on other sites

I'm not 100% sure, but you mentioned a shooting star with lines between the stars, so I think your lines should be following each of the images? Some of the lines in your demo are drawn backwards so I just made a simple version with 5 circles and lines. Is this the type of effect you're after here?

 

See the Pen pZvVQO by PointC (@PointC) on CodePen

 

Hopefully that helps. Happy tweening.

:)

 

 

  • Like 4
Link to comment
Share on other sites

Hi @PointC

 

Thanks for this quick response. Yes this is what I was aiming for in step 1.

I said shooting stars but the actual final target is more like expanding universe with linked stars. That's why I separated out the tweens, in view of having the stars pull out one after the other.

I don't see why adding in the width=0 and height=0 helps this, but whatever works!

@OSUblake, what memory! But if we are using the from() function, then I guess the objects have to be located at the right end-position?

And in your previous post, you were talking about the fact you can makes groups by ungrouping-regrouping  in Illustrator... But in my example I didn't use groups..

 

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.
×