`whileFocus` gesture
See original GitHub issueIs your feature request related to a problem? Please describe.
Kind of. A lot of designs I see have focus states similar to hover states. There is no focus gesture so we need to fallback to a non animated variant for focus. Or add more react state to handle focus if we want to reuse say a whileHover
state animation
Describe the solution you’d like
A gesture whileFocus
to be added to the possible gestures
Describe alternatives you’ve considered CSS fallbacks. A lot of the time results in us not using motion for hover states so we can replicate them for focus states.
Issue Analytics
- State:
- Created 3 years ago
- Reactions:7
- Comments:10 (5 by maintainers)
Top Results From Across the Web
Gestures | Framer for Developers
The focus gesture detects when a component gains or loses focus through click, focus, or by tabindex . <motion.a. whileFocus={{ ...
Read more >'While' Animations and Initial - The Framer book
With the whileHover , whileTap , and whileDrag gesture animations, you can quickly make layers interactive. With just one line of code, you...
Read more >Gestures - Svelte-Motion
Gestures. Take visual control over the interaction ... To animate an element when it receives focus you can use the whileFocus prop.
Read more >Basic interactions - CameraPixels app
The viewfinder of CameraPixels supports four main gestures: ... Tapping with one finger on the viewfinder while focus and exposure points ...
Read more >Framer-Motion: New And Underestimated Features - Shakuro
Setup; Keyframes; Gesture Animations; Accessibility ... whileTap, whileDrag and whileFocus props. ... framer-motion: Gesture animations.
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
I would also love to see this feature along with
whileDisabled
@stuartflanagan my pleasure 😃