Skip to content
This repository has been archived by the owner on Aug 8, 2023. It is now read-only.

Implement PaperScroll card component with unrolling animation #67

Merged
merged 2 commits into from
Oct 16, 2022

Conversation

taesungh
Copy link
Member

Building on design from #54,

  • Use separate paper body and edge graphics to create adaptive scrolls
    • Scroll edges are attached to body, but body graphic is stretched to fit
  • Switch to vertical scroll design for narrower views by rotating edges
  • Replace Fade entrance with unrolling effect
    • Animate scroll edge positions and mask the card body to within the scroll edges
    • Scroll unrolls from center when horizontal and from top when vertical

- Use separate paper body and edge graphics to create adaptive scrolls
- Scroll edges are attached to body but body graphic is stretched to fit
- Scroll design switches to vertical for narrower views
- Replace Fade entrance with unrolling effect which animates scroll edge
  positions and masks the card body to within the scroll edges
- Scroll unrolls from center when horizontal and from top when vertical
- Specify initial state in styles and final state in animation keyframes
@taesungh
Copy link
Member Author

Hey @samderanova, could you check with graphics for some feedback on this new design?
Some potential nitpicks they may have:

  • Scroll body texture is stretched for vertical designs rather than rotated
  • Currently have only the light variant and not the dark variant

@samderanova
Copy link
Contributor

samderanova commented Oct 16, 2022

Hey @taesungh, I compared the Figma design with what we have and noticed a few small things:

  • The logo on the "What is ZotHacks?" card should be green instead of black
  • The "apply as a mentor button" shouldn't be 100% the width of the container it's in

@taesungh
Copy link
Member Author

The logo color is somewhat being addressed in #60. For the mentor button sizing, I suppose the design is slightly ambiguous, but I would consider those changes as beyond the scope of this paper scroll design, so we should address them separately (but perhaps together with updating the color of the Apply button).

Copy link
Contributor

@samderanova samderanova left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good!

@taesungh taesungh merged commit 533c32d into main Oct 16, 2022
@taesungh taesungh linked an issue Oct 16, 2022 that may be closed by this pull request
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Home page] Implement paper scroll design
2 participants