💥 Make sure to complete the assignments before coming to the webinar on Wednesday! A lot more fun stuff ahead, better to lay a solid foundation first.
When the card is only swiped a little bit, make the card bounce back to the original position
When the card is swiped far enough, make the card disappear
In case 1, the opacity of the card should be 1; and in case 2, the opacity of the card should go from 1 to 0 gradually based on how far the card is swiped.
Bonus: add some different effects depending on which direction the card is swiped towards. For example, adding a thumb up/down accordingly, or changing the color of the card.
How would you use this to solve Requirement No. 3 above?
Use if and else to determine whether to dismiss the card or move it to original position. If you are not familiar with the syntax of if else, see this page.
When on hover, make the card slightly bigger and update its box shadow as if the card moves closer to the viewer.
When the mouse is on different parts of the card, create an effect as if the card is pressed down at where the mouse is.
For simplicity, only create two kinds of box shadows(one on hover, another when not hovered). You don’t need to adjust the box shadow according to the mouse position.
Which event should you use to determine when the mouse is no longer on the card? Search the React doc to find out.
The interaction is very similar to the mouse parallax example. Use the same cx and cy values as the starting point. Can you tell why they are similar?
Use perspective attribute on a Frame to enable the 3D effect. Note the perspective attribute only affects the current element’s children. See here for more details.
The 3D effect is created by rotating the card around X and Y axes. The angles to be rotated depend on cx and cy. It’s tricky to figure out what values to use, but the solution uses this rotateX: -cy  / 20, rotateY: cx / 20. Experiment with different values to see what kind of effect you’ll get.
Can you use useMotionValue and useTransform to make a similar effect?(The answer is no.)
Webinar video
Code
Assignments
1. Tinder Swipe
const opacity = useTransform(x, [-100, 0, 100], [0, 1, 0])2. 3D card