Put our new skills to the test
Unlock this video and the rest of this course by joining Frontend.FYI PRO .
As a final exercise in this module, let’s make some responsive animations.
In this exercise we will be combining <AnimatePresence>
and the exit
prop from the previous module, to create a nice appearing and disappearing animation for this notification component.
For responsiveness we are going to make the notifications either come in from the right, or from the bottom, depending on the screen size.
Showing: desktop
Notifications
New module about responsiveness added
1 hour ago
Password reset
2 hours ago
Went outside for a walk
3 hours ago
The animation automatically switches between desktop and mobile, so you don't need to resize your browser in this demo ;). Just click the button a few times.
Unlock the full lesson with PRO
Want to read the full lesson? Join Frontend.FYI PRO.
PRO is a one time purchase of €149 that gives you lifetime access to this course, any courses released in the future, and so much more!