-
Notifications
You must be signed in to change notification settings - Fork 57
Description
🚀 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:
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:
📝 Submission Guidelines
To successfully merge your contribution, please follow these rules strictly:
- The Folder: Navigate to the folder named:
6-swipe-down-animation - The File: Create a new text file named
<your-github-username>.txt. - The Content: The file must contain your Figma link in the following format:
Figma link - <your-live-figma-link> - 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! 💫

