Jump to content

Search In
  • More options...
Find results that contain...
Find results in...
Tee Kick

Grouped: Animate children from Group's center?

Recommended Posts

How to animate children from their Group's center?

Animate the children 'tick' to their original position, relative to position of the parent 'spray'.


I got this: See Codepen example

- For now only one child is moving
- As soon as I introduce rotation on the parent, rotate: 180, I get weird results (360 works, although it still looks to be wobbling?).


I tried variations on the transformOrigin for the parent, without much luck.


So... I guess I'd need to know the position of the parent, and somehow originate the movement from that (flexible) point/ orientation to the new flexible position?

This goes a bit over my head for my current level.


Duct Tape Solution:
For now I had scaled Down, then Up, the parent, but this scales-up the children also.
I could counter that I guess, but yeah, glue and tape...


I guess it wouldn't be the first time someone asked, but did some thorough searching, but didn't find it yet.

Any help here?

Link to comment
Share on other sites


Hello there @Tee Kick


Here are some answers on the questions in the comments of your code:


Using document.querySelector('.myClass') will only select the first element with that class in the document flow. If you want to select all the elements with that class, use document.querySelectorAll('.myClass') - that's the reason why only one of your ticks is being set initially.


That last tween of your timeline doesn't work, because you have a semicolon after the tween before, that breaks the chain and 'closes the timeline'. I would probably also put the tl.timeScale() after the creation of your timeline (and beware, you also have a semicolon after that second .set of yours).


You are also mixing rotation and rotate throughout your example. For tweening with GSAP it is supposed to be rotation. Last but not least the reset() at the very end of your example throws an error, since you do not declare a function named reset anywhere in your code.


Hope that'll help a bit.


Animation-wise, I did not really understand what you were trying to achieve.

Could you maybe try to re-phrase what it is you want to happen step by step?


  • Like 1
Link to comment
Share on other sites

1 hour ago, Tee Kick said:

All that's needed now is:
- The red stripes move from the center of the group to their original position, staggered.

The way you have things set up makes that cumbersome. It's totally possible, of course, but you'll need to do the math for each line to calculate the x/y offsets necessary to place the in the center. 


If it were me, I'd dynamically create all those <line> elements because then I could just reuse the same one over and over again, plop them in the middle of the screen and calculate the angle to their final placement around the edges and use a radius to plot them with Math.sin() and Math.cos(). That's just how my brain works, though. 


Otherwise, you could loop through each line and use getBBox() to find out how far it is from the center (x and y), and animate from() those values. 


Good luck!

  • Like 2
Link to comment
Share on other sites

I'm not surprised.
I'm working from a limited amount of knowledge on these matters.

Your proposed setup sounds like it would be best indeed.
Will study the methods suggested.

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.