Skip to content

Create a Swipe Down Animation #141

Description

@Soham-Donode

🚀 Welcome Contributors!

Your task is to create a functional Swipe Down Animation (often used for "Pull to Refresh" or expanding card details) with smooth motion and realistic physics, following the method shown in the provided tutorial.

The Design & Behavior:

Image

Interactive Card Swiping: The top card responds to a drag trigger, moving independently of the stack with a slight rotation and scaling effect as it is pulled away.

Layered Depth & Recirculation: Once the top card is released, it "snaps" to the bottom of the deck while the next card in the hierarchy instantly becomes the primary focus, creating an infinite carousel loop.

Perspective & Shadow Play: The stack uses multi-layered drop shadows and incremental scaling (each background card being slightly smaller) to simulate realistic 3D depth and Z-axis hierarchy.

  • Interaction:

  • Use the On Drag trigger to control the downward movement.

  • Apply Smart Animate with a "Bouncy" or "Custom Spring" curve to give the animation a natural, tactile feel.

  • Ensure the transition feels fluid and responsive to user input.

  • Feel: Create a high-fidelity interaction that mimics a real mobile application's physics and responsiveness.


📚 Learning Resources (How to do this)

Below is the YouTube video which explains the step-by-step process for this animation:

Create an Image Carousel

📝 Submission Guidelines

To successfully merge your contribution, please follow these rules strictly:

  1. The Folder: Navigate to the folder named: 6-swipe-down-animation
  2. The File: Create a new text file named <your-github-username>.txt.
  3. The Content: The file must contain your Figma link in the following format:
    Figma link - <your-live-figma-link>
  4. Permissions: Ensure your Figma link permissions are set to "Anyone with the link can view" so the maintainers can review your work.

Example of how johndoe.txt should look:

Figma link - https://www.figma.com/file/xxxxxxxxxxxxxxxxxxxxxxxx

Directory Structure Example:

Repo Root
└── 6-swipe-down-animation/
    └── <your-github-username>.txt

Happy Prototyping! 💫

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Points: 40open-for-allAny one can work on it without getting assigned, every PR can merge

    Type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions