Show only part of icon -- wipe/slide icon

Configuration Frontend
1

Hi all,
I think I might be stretching the limits of this particular forum, but I thought I’d respectfully ask all the same.

I’m trying to show that something is working by showing a wipe or slide (not sure how to describe it) animation.

Something like below.

swipe
swipe2500×512 24.7 KB

Please be kind if this question is outside the confines of this forum.

Thank you.

Ben

2

Interesting idea, do you want

  • animated icon: why not create a gif?
  • a changing icon: then you could use some logic to change form 1 icon to the next in a rotating manner with (say) 5 icons
  • change the icon while sliding it: I have no clue what could be possible
3

Thanks for the suggestion, I didn’t know that GIF can be an icon.
Ideally, what I’d like is to use some sort of animation on an icon because I’m using custom:button-card and its templating abilities. This way I can reuse this animation.

4

Consider using animation for the icon, kind of

          @keyframes shift {
            0% {
              transform: translateX(100%);
            }
            100% {
              transform: translateX(-100%);
            }
          }

and the icon must be inside a square container with overflow=hidden.

1 Like
5

Thanks for the suggestion.
I added this inside the extra_styles section of the custom:button-card
The card is close to square it is 75x85, I could change it, but I"m not sure where to put the overflow=hidden. This is not a parameter I’ve seen before.

Right now, the animation goes from right to left right to left, but it doesn’t seem like it is “swiping”. But as I said I don’t have the overflow=hidden on, because I don’t know where to put it.