Loading Morphs

Motion.timeline() morphs skeleton placeholders into real content. Staged entrance with stagger.

animation ds-anim-morph

Usage

// Skeleton → content morph via Motion.timeline
// 1. Hide real content initially
// 2. Show skeleton placeholders
// 3. On data ready: fade skeletons out, stagger content in

Motion.timeline([
    // Fade out skeletons
    ['.skeleton', { opacity:[1,0], scale:[1,0.95] }, { duration:0.2 }],
    // Stagger in real items
    ['.item', { opacity:[0,1], y:[12,0] },
      { duration:0.3, delay: Motion.stagger(0.06), at:'+0.05' }],
])