[material] Add "pulse" animation

[githorse]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Summary 💡

A "pulse" animation seems to me like it's a pretty basic one along the lines of Grow, Slide, etc. The icon button already has a (bgcolor, I think) pulse built in, but there's no general mechanism for pulsing an element. Here's one for pulsing size:

interface PulseProps extends PropsWithChildren {
  durationMs?: number
}

export default function Pulse({
  duration = 400,
  children
}: PulseProps) {

  const pulse = keyframes `
    0% {
      transform: scale(1);
    }
      50% {
      transform: scale(1.2);
    }
    100% {
      transform: scale(1);
    }
  `

  return (
    <Box
      sx={{
        animation: `${pulse} ${duration}ms ease`
      }}
    >
      {children}
    </Box>
  )
}

It would be cool to be able to specify the property that gets pulsed. I'm not sure exactly what that would look like?

<Pulse 
  property='opacity' 
  keyframes=[1, 0.5] 
/>

It's easy enough to make my own pulsing animations, as above, but I thought it worth adding this request to gauge the demand for a library component.

Examples 🌈

Here's a simple CSS pulse tutorial that's the basis of my component.

Motivation 🔦

In my case, I wanted to pulse a success icon after a long download finishes. In general, the pulse animation is useful for subtly drawing attention to a particular element on the screen after some change in state.

[michaldudak]

The animations we have are meant to transition a component in or out. The one you propose is a different kind of animation. Since it's pretty easy to achieve this using CSS, I'm not eager to have it built in our codebase. However, if this receives sufficient community interest, I'll be happy to reconsider.

[TheOneTheOnlyJJ]

Could this be scheduled as a small improvement for v7? It would make the DX just that tiny bit smoother.

[michaldudak]

cc @DiegoAndai

[DiegoAndai]

For v7, we won't focus on adding new components, so I wouldn't add this to that milestone. Especially considering Michał's comment:

The animations we have are meant to transition a component in or out. The one you propose is a different kind of animation.

This said, after v7, we can consider adding new components, so let's keep waiting for upvotes.

[tryngl]

This would be a great improvement in terms of capturing user's attention on actionable buttons, particularly for the Floating Action Button (FAB).