Pulsing badge?
We would like to start using badges to introduce new features (via guide pop-ups) in our app, and we like the idea of a pulsing icon -- kind of like the default alert Pendo uses for its Resource Center. Anyone got a quick trick or hack for how to accomplish this? We've tried animating a gif but it's pixelated and just not quite the quality we need.
1
Comments
An animated gif is definitely the first thing that comes to mind. Is the issue that the gif looked pixelated from the get-go, or something else?
Beyond that, maybe someone has some CSS tricks to share!
Yep - it's pixelated even outside of Pendo. Where you have to add the badge at the size you need since Pendo doesn't give you tools to adjust the size in-app (like it does for other images), we have to use a small one, and the animator says it's just too hard to get the smoothness we really need working with the small image.
Hey Christina, our team designs animated pulsing badges using svg's, definitely the way to go.
Stevie G how do you get them to stop pulsating if you want them to continue to persist but less intrusively?
Eric Miller I guess it comes down to the size and overall design of the badge itself. Ours are big enough to notice, but small enough to not be too intrusive ;)
But to answer your question, there is no way to stop them pulsating.
We also added a delay at the end of the first set of pulses to kind of make it less "in your face." And we ended up using a webp file, I believe.
Please sign in to leave a comment.