Jump to content
Search Community

How do I make the animation stay after I set a new location?

smane 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

Hi,

Im trying to make a few blobs that shoots a piece of itself on to another blob to make it bigger or just a new destination. I would like the blob to continue with the motion when it reaches its destination, and not teleport back like it does now. How can I achieve that?

Also, is there a way to set a class as the destination, so I dont have to use X and Y coordinates?

 

Thank you!

 

 

See the Pen wvvrzag by SanderMane (@SanderMane) on CodePen

Link to comment
Share on other sites

Hey smane and welcome to the GreenSock forums,

 

I'm not really understanding your end goal here. 

 

18 minutes ago, smane said:

Im trying to make a few blobs that shoots a piece of itself on to another blob to make it bigger or just a new destination.

I assume you want the blob you're "shooting" to leave the larger group of blobs and go to the other larger group of blobs, yes? What do you mean "just a new destination"?

 

20 minutes ago, smane said:

I would like the blob to continue with the motion when it reaches its destination, and not teleport back like it does now. How can I achieve that?

What do you mean "continue with the motion when it reaches its destination"? Do you mean have a velocity that is lessened instead of stopping immediately? 
If you want it to not "teleport" back to where it started from, remove the repeat that you have. 

 

21 minutes ago, smane said:

is there a way to set a class as the destination, so I dont have to use X and Y coordinates?

Most likely the best way to do this would be to calculate the target's position (in this case the blob container) and move it to the calculated value.

 

If you would, please try to describe your end goal so that we can better help you get there.

Link to comment
Share on other sites

I edited the pen. Hopefully, this will make what I meant more understandable. 

 

My end goal is to map out the activity in an area where activity = blob mass. Locations with more activity will have bigger group of blobs. When the activity shifts from one location to another, the group of blobs will shoot out mass equal to that to the new location.(That was much harder to explain than I thought. Sorry about that.)

 

2 hours ago, ZachSaucier said:

I assume you want the blob you're "shooting" to leave the larger group of blobs and go to the other larger group of blobs, yes? What do you mean "just a new destination"?

That is correct.  Id like a blob to travel from one group to another or/and travel to an empty space to form a new group there, like the first "shot" in the pen.

 

2 hours ago, ZachSaucier said:

What do you mean "continue with the motion when it reaches its destination"? Do you mean have a velocity that is lessened instead of stopping immediately? 
If you want it to not "teleport" back to where it started from, remove the repeat that you have. 

As you can see in the pen, the group of blobs "wobble" when they are in their idle state. Id like the blobs that leave the group to stay in its new position and continue the wobble there. As of now, it stands still when it reaches point b for a split second before it teleports back. 

Link to comment
Share on other sites

Thanks for the clarity! I didn't want to help you with something you're not actually trying to accomplish :) 

 

The biggest issue with your current approach is that when a blob "shoots off" it overrides the other tween animation (the random movement one). So after the shooting is done, when the random movement tween repeats, it "resets" its values because that's what tweens do when they repeat.

 

Most likely the best approach would be to put each blob in a container. That way you can animate the container and the blob separately in order to keep the random movement but still move the blobs overall location. I used that approach in this fork of your demo:

 

See the Pen NWWaLmY?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Does that make sense?

  • Like 2
Link to comment
Share on other sites

Why are you even using "transform" to being with? 

transform:'rotate('+r+') translate('+radius+',0.1) rotate('+(-r)+')'

 

Use gsap transform syntax instead (x, y, scale, rotation, etc). That can be done by changing the transformOrigin, and using rotation. Then there wouldn't be an overwrite problem.

 

 

  • Like 3
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...