Animate a notices bell so looks like it rings

Need help
1

Ok, so I have a bell icon in my header and I am trying to make it ring intermittently when a certain condition is met (example, to let them know a message is waiting), but at the moment there appears to be no way of creating the ring animation and the built in bubble animations are just too slow and don’t have the right effect.

Has anyone been able to implement anything that gives this effect, essentially its a simple notice prompt I am looking for?

Thanks!

1 Like
3

Can you better explain what kind of effect you’re trying to achieve?

My solution / recommendation is to combine multiple Bubble animation actions one right after the other on the same element, modifying their Duration (ms) property to make the animation faster. You can also add pauses between animation actions to achieve a more refined and custom effect.

In one of my apps I am using this sequence for an icon+text alert:

  • Set custom state on group containing elements → Changes color of icon and text using each element’s conditionals and transitions tabs in the element editor
  • Callout tada: 1000ms
  • Callout pulse: 500ms
  • Add pause: 1000ms → Makes visual changes via custom state stick around a bit longer than the animations to further draw person’s attention
  • Callout pulse: 500ms
  • Set custom state on group → clearing state and returning icon+text colors and properties back to default

Edit: You can also make this alert animation occur on repeat by placing all the action steps in a Do every x seconds workflow (which contains the conditional checking to see if the animation should trigger).

2 Likes
4

Hi @philip

Ah ha this gave me an idea thanks!

What I did is created two custom event each with 4 animations of “Callout Swing” for 500ms.

On login on the page I set the trigger for custom event 1 which then ran through the 4 animations to give me the desired effect. At the end of the custom event work-flow I have a schedule custom event 2 set to 5 seconds. The custom even is basically the same as event work-flow 1. There is the desired 5 second pause and then it runs through the 4 rings again - at the end of the custom even two I have a schedule set for custom event 1 set to 5 seconds (activates custom event 1) so it waits and then rings again and so on.

So essentially if xyz condition is met it will keep looping through the events and ringing (4 x callout Swings) every five seconds.

1 Like
5

Just to chime in (sorry for the pun), but there maybe a more fluid way around by using a static image and an animated gif e.g. https://cdn.dribbble.com/users/178981/screenshots/1646262/twitter-bell.gif based using conditions or even a workflow ‘when condition is true’ and perhaps say setting a custom state image and using the delay workflow action - just a quick thought.

6

@StevenM Nice! Glad you found a workaround for your needs.

@luke2 That’s slick, it’s always good to hear alternative methods. You just inspired me to recreate a couple of my alert workflow-based animations with SVGs similar to your GIF example. Cheers :beers:

1 Like
7

Your welcome, glad to hear :+1:

Hopefully sometime in the future there is a plugin that integrates with the Lottie library, that would be super cool.

1 Like
8

Funny you should mention Lottie/Bodymovin. Those are the libraries I was getting ready to use. Did you see https://github.com/bodymovin/lottie-to-svg? I agree, a plugin for the JS animations would be very cool indeed, especially if you could tie into the start/pause/stop events with Bubble workflows :heart_eyes:.

9

This topic was automatically closed after 70 days. New replies are no longer allowed.