Right-Side Drawer Animations

Open Animations

1. Slide In from the Right

[
    { transform: 'translateX(100%)', opacity: 0 },  // Start off-screen to the right
    { transform: 'translateX(0)', opacity: 1 }      // Slide into view
],
{
    duration: 500,
    easing: 'ease-out',
    fill: 'forwards'
}

2. Elastic Bounce-In from the Right

[
    { transform: 'translateX(100%)', opacity: 0 },   // Start off-screen to the right
    { transform: 'translateX(-10%)', opacity: 1 },   // Slight overshoot to the left
    { transform: 'translateX(0)', opacity: 1 }       // Settle in final position
],
{
    duration: 800,
    easing: 'cubic-bezier(0.68, -0.55, 0.27, 1.55)',  // Bouncy effect
    fill: 'forwards'
}

3. Fade-In from the Right

[
    { transform: 'translateX(100%)', opacity: 0 },  // Off-screen to the right
    { transform: 'translateX(0)', opacity: 1 }      // Fade in while sliding in
],
{
    duration: 600,
    easing: 'ease-in-out',
    fill: 'forwards'
}

4. Quick Snap-In from the Right

[
    { transform: 'translateX(100%)', opacity: 0 },  // Start off-screen to the right
    { transform: 'translateX(0)', opacity: 1 }      // Quick snap into place
],
{
    duration: 300,
    easing: 'ease-in',
    fill: 'forwards'
}

Close Animations

1. Slide Out to the Right

[
    { transform: 'translateX(0)', opacity: 1 },  // Start in place
    { transform: 'translateX(100%)', opacity: 0 }  // Slide out to the right
],
{
    duration: 500,
    easing: 'ease-out',
    fill: 'forwards'
}

2. Fade Out with Scale

[
    { transform: 'scale(1)', opacity: 1 },  // Normal size
    { transform: 'scale(0.8)', opacity: 0 }  // Shrink and fade out
],
{
    duration: 600,
    easing: 'ease-in-out',
    fill: 'forwards'
}

3. Zoom Out to the Right

[
    { transform: 'scale(1) translateX(0)', opacity: 1 },  // Normal size
    { transform: 'scale(0.5) translateX(100%)', opacity: 0 }  // Shrink and slide out
],
{
    duration: 700,
    easing: 'cubic-bezier(0.68, -0.55, 0.27, 1.55)',  // Bouncy effect
    fill: 'forwards'
}

Left-Side Drawer Animations