Skip to main content
Answer

How to cancel "WhilePressing" effect?

  • November 11, 2024
  • 7 replies
  • 60 views

Onkel_Tem

Hi folks.

I stumbled upon a simple Dialog open behavior. If I use a component with “WhilePressing” visual effect (like e.g. background dimming), then both onTap and onTouchUp actions won’t cancel the effect.

Here is a sample design file: https://www.figma.com/design/rC5hQVyjoS3ubnRHTmnW8D/Tap-animation?node-id=0-1&t=eLdLBq0A6LpgurTr-1

There are two pages:

  1. Page1: onTap
  2. Page2: onTouchUp

that only differ in their trigger action type.

What it looks like currently

Here is a short recording in GIF:

4

As you see, the list item remains in its pressed state. How to fix this?

Best answer by Nellya

Like this

This topic has been closed for replies.

7 replies

Pavel_Kiselev
  • Power Member
  • November 11, 2024

The overlay blocks all interactions beneath, I guess the list item springs back to normal after you close it. Not ideal, nor the big deal either


Onkel_Tem
  • Author
  • November 12, 2024

But it doesn’t, that’s the problem. Look, I’m showing this on the animation.


Nellya
  • Power Member
  • November 12, 2024

I had this problem many times. The only fix i found is to add after delay from while pressing to default state for a force returning.


Onkel_Tem
  • Author
  • November 13, 2024

Hey Nellya!

I got the idea, however I’m not finding a way to add that after delay.

Would you please elaborate?


Nellya
  • Power Member
  • Answer
  • November 13, 2024

Like this


Onkel_Tem
  • Author
  • November 13, 2024

I see now why it didn’t work out for me.

You see, I use Material Design 3 Kit components (e.g. “Card”). And they have the “while pressing” effect already built-in, so I can’t really interfere and do that.

Instead, I’d need to create the card from scratch to include the initial state restoration.

Thank you!

P.S. Interestingly, since I’ve started using Material Design 3 Kit, I only reduce the number of components I include in my designs as I have to replace them with custom components that work more correctly. So this one is just one more reason why MD3K is more a toy, and not something ready for real applications.


Onkel_Tem
  • Author
  • November 13, 2024

Folks!

I’m picking one of Nellya’s answers as a solution. It involves manual state restoration with “after delay”. Yet, the question on how to achieve that more easily - is still open.

I would have added this text to where it should be - in the first posting, but forum rules don’t allow editing.