-
Notifications
You must be signed in to change notification settings - Fork 1
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Feature/sticky note animation #114
Conversation
Deploy preview for zothacks-site-2023-sanity ready!
|
Deploy preview for zothacks-site-2023 ready!
|
This PR can also be used for the mentor apply sticky notes and the index card with a pin. If so, I'll move the variant to the animation folder for general use. |
I can also put the animation on the note cards and the stagger animation will be on the card and text. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is awesome! Thank you for working on this. A few things I'd like to point out:
apps/site/src/views/Resources/components/ResourceCard/ResourceCard.module.scss
Show resolved
Hide resolved
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Great work on the animations!
Overview
Animation for resource sticky notes to fly in from the 4th wall (your face/screen) onto the page. The animation is triggered when the user scrolls down and the sticky note is in view.
Details
Created a "slam in" animation variant that animates scale and opacity to achieve the effect. Converted the Resource Card component elements to motion elements to get the animation to "stagger" for each part of the sticky note.
Addendum
Open to discussion on the timing and fine-grained details of the animation.