Tee Kick Posted October 31, 2021 Share Posted October 31, 2021 How to animate children from their Group's center? OBJECTIVE: 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? Thanks. Link to comment Share on other sites More sharing options...
akapowl Posted October 31, 2021 Share Posted October 31, 2021 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? 1 Link to comment Share on other sites More sharing options...
Tee Kick Posted November 1, 2021 Author Share Posted November 1, 2021 @akapowl Thanks for the steering, tad sloppy indeed. Updated: https://codepen.io/TKick/project/editor/Ayvjzx All that's needed now is: - The red stripes move from the center of the group to their original position, staggered. If I add x and y coordinates the whole goes off the rails... Link to comment Share on other sites More sharing options...
GreenSock Posted November 1, 2021 Share Posted November 1, 2021 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! 2 Link to comment Share on other sites More sharing options...
Tee Kick Posted November 1, 2021 Author Share Posted November 1, 2021 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now