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
Section titled “Motion that explains change”This prepared listings page uses enter and move animations on repeated cards. Its local sample data keeps the example available without a database or a second demo server. Clear and restore the listings in Preview to see cards enter again.
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
Section titled “Start from the repeated result”repeat_listings renders the sample listings from listing_results.value. The Structure tree and Properties panel keep the animation in its repeat context instead of presenting it as an isolated effect.
Select the element that owns the animation
Section titled “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
Section titled “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
Section titled “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
Section titled “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.