Eirinn

I seem to have made it work by splicing together various things and deferring fixed until the end. It's a bit weird on reverse if the viewport has been scaled or being scaled while animating, but it resets itself on end.

Edit: it seems that what I'm doing is baseline ok, but it's the switch to position fixed throwing everything off... I'll noodle some more with it.

Hey @OSUblake, Thank you for your reply and your code example which I'll deffinitely take a look at. I'm not even sure calculating the arc is necessary here. Given a start point of 0,0 and a fixed endpoint of the middle of the screen (mx, my) the points should be 0,0 0,my, mx,my? This should always create a control point 0, mx that's perpendicular to start and end causing a perfect arc? If you comment out the third point {x: x3, y:y3} you can see the control point they're using which seems correct... however when adding the last point it seems like the bezier goes all wonky. It's also a little confusing that 0,0 seems to be the start point, but I have to add the halfwidth position for the second point or its off. I'm guessing this is because of the xPercent/yPercent, but 0,0 should be off to then. Math is not my strong suit haha. EDIT: https://codepen.io/rosefalk/pen/e4a3829bba66e5a90c247b25929787fc Tried implementing the path code, but still getting issues. Best, Eirinn

Steps to reproduce: Open Codepen Link, it will probably look sort of fine embedded, but it'll be obvious if you resize the screen so the boxes form a 2x2 pattern. Click a box. Goal: To have the boxes animate into the middle from their current position in a nice smooth curve (inwards). Issue: Top left box behaves completely as expected, the rest do not. Details: I'm using MotionPath to animate the boxes into the middle in a curved fashion. According to my math the coordinates should be fine, but the animations are erratic. I'm not entire sure what's going on. If i were to hazzard a guess it would be that the coordinates are correct, but the "handles" in the bezier curve are off?.

I should probably note that all the tweens are sepparate and are not included in a timeline.

Thx for the kind welcome! Sure I can elaborate: The application I'm writing is being iFramed. To control the height of the iFrame there's a PostMessage system running, acting as a two way communications system. The application will change in height (tweened) on UI interaction. Instead of having the application ping its parent every second to update the height I'd like to only update height on tween completes. Since this application is supported by multiple people (and because brains can be forgetful), I think it'd be nice to set up a catch all system to ping the parent frame with a new height. Hence the "global" oncomplete (that and the individual tweens may or may not have an oncomplete of their own already). I could send every onComplete function through a relay function, but if you forget that it needs a relay you introduce a bug in the code. I agree that it's a niche case though. PS: I use TweenMax, also thx for the fast replies!

Is there a tween complete global event that gets pinged when a tween is done? I want all tweens to trigger a global complete event (using it for resize purposes) so I don't have to add an onComplete to each and everyone of them