Implementing a "Magic Move" (FLIP) transition to a Global Overlay in Angular, Best practices?

[ale269]

Hi everyone, I'm building a fitness app and I'm struggling with a UX/Technical challenge.
I have a long list of Exercise Cards. When a user long-presses a card, I want to trigger a "Reorder Mode".
A backdrop-blur overlay appears over everything. The Exercise Cards "compact" themselves (shrinking height/content) and animate from their original position in the list to the center of the screen into a focus-mode list for easy drag-and-drop.
If I keep the overlay inside the list component, I hit "stacking context" hell (position relative, overflow hidden, etc.).
My solution:
Use a global OverlayComponent at the AppComponent level (triggered via a Service).
Use GSAP Flip (which I just learned about) to animate the transition.
Is using a Global Portal/Service the right way to handle the DOM hierarchy for this? How do you handle the "Magic Move" if the target element is in a completely different part of the DOM tree (outside the list's stacking context)?
Has anyone successfully used GSAP Flip with Angular for "Shared Element Transitions" (animating from a card in the list to a placeholder in the overlay)?
Should I move the actual DOM element to the overlay or just "fake it" by hiding the original and animating a clone?
Any advice on performance or Angular-specific pitfalls would be greatly appreciated

[Tony Geek]

Not an Angular-specific response, but you might find it helpful to view this codepen below from the GSAP Draggable Collection. Although using Flip might be possible, I wouldn't say it's the best way to handle your issue. You're talking about dragging and re-organising elements, and so I reckon Draggable is probably a good place to start looking for that sort of solution.

 

See the Pen qBzJzQg by shunyadezain (@shunyadezain) on CodePen.

[ale269]

Thanks, in the end I used draggable and implemented a service-based solution.