Put our new skills to the test

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!