search

plxity / framer-recipes

a list of framer-motion small prototypes made for learning
53 stars 2 forks source link

Added a `Tilt` interaction when the user clicks on the PaperClipIcon and allowing the options to close whenever the user clicks anywhere outside. #9

Closed emAyush56 closed 1 year ago

emAyush56 commented 1 year ago

Added a few things -

  1. Since you are using Heroicons as your icons library, I have imported the PaperClipIcon from it and used it in place of the SVG within the option-container div.
  2. Added a TILT interaction to PaperClipIcon when the user clicks on it and opens or closes it. WHY? To give interactive feedback to the user that the options have opened from clicking on PaperClipIcon.
  3. The options close ONLY when the user clicks back on the PaperClipIcon. I have added an effect that closes the options whenever the user clicks anywhere outside as well.

I have added 2 and 3 to enhance the interactions. Hope you find it useful.