Enter
Animate a card when App Connect adds it to the rendered result.
App Connect Animations
Add purposeful enter and move animations to repeated content, then inspect the selected element and its dynamic animation properties in the complete HTML Editor workspace.
Motion that explains change
The Real Estate listings page uses enter and move animations on repeated cards. When filters change the result set, motion helps users understand which cards arrived and where the remaining cards moved.
Move
Animate layout changes when filtering or sorting repositions cards.
Timing
Use duration and delay modifiers to keep motion quick and readable.
Start from the repeated result
repeat_listings renders the current Data View result. The expanded Structure tree and populated Properties panel keep the animation in its real data-driven context instead of presenting it as an isolated effect.
Select the element that owns the animation
The repeated card column owns dmx-animate-enter and dmx-animate-move. Selecting that exact element fills the Properties panel with the element context while the Structure tree shows where it sits inside the repeat.
Keep timing intentional
This page uses a 400 ms duration and a short 80 ms enter delay. Short timings communicate a state change without making filtering feel slow; longer or heavily staggered motion should be reserved for moments that deserve attention.
Review motion in the complete result grid
Use Design View and local preview to test the final result with real filtering and sorting. The animation should reinforce the change while the listing cards remain the visual focus.
Use animation to clarify reactive UI
Attach enter, leave, or move animation to the element that actually changes; keep timings modest; and test the interaction with real data. That gives users useful continuity without turning the interface into a visual distraction.
