Created an animated menu ( n°3 )
Created a menu that slides in from the side and has an opaque mask
To do this I used:
- The React Springs library
const maskTransitions = useTransition(showMenu, { from: { opacity: 0 }, enter: { opacity: 1 }, leave: { opacity: 0 }, })
- Fontawesome Icon's
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
- I also created a custom tailwind class
// tailwind.config.js extend: { backgroundColor:{ 'black-t-50': 'rgba(0,0,0,0.5)' } },
I feel a bit bad though because I did a lot of copying from the Udemy course ... But i did have to do some thinking for myself because che react Springs library had been updated so the original code was broken.