question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

`whileFocus` gesture

See original GitHub issue

Is 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:closed
  • Created 3 years ago
  • Reactions:7
  • Comments:10 (5 by maintainers)

github_iconTop GitHub Comments

3reactions
dahannescommented, Dec 2, 2020

I would also love to see this feature along with whileDisabled

2reactions
oielbannacommented, Jan 4, 2021

@stuartflanagan my pleasure 😃

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found