Animated toast-like floating bubble

Ionic Framework
1

Toast is great. However, in my little quiz application, when the user enters the answer, I want a small round status icon (either a check-mark or an ‘x’, say), that starts near the submit button, and then slowly floats to the top, then disappears.

Right now my right-or-wrong toast appears on the top of the screen. It’s very nice but not very “app-like”, like in a game app.

Any suggestions on how to implement this? I’m happy to study any code examples that might give me some clues even if it’s not exactly the same thing. Thanks!

Edit: I know I can build this from scratch with Ionic Animations (and I’m ready to try), but hoping for references to other “animated user interface components” similar to this. I haven’t found much so far.

2

Wow. I was just scared to try the raw Ionic animations, but I just tried it and took 10 minutes to make it work. Literally it was no more than this fragment, which I took from Ionic’s animation docs. That is pretty impressive.

const animation = createAnimation()
      .addElement(document.querySelector('.bubble'))
      .duration(1000)
      .iterations(1)
      .fromTo('transform', 'translateY(0px)', 'translateY(-100px)')
      .fromTo('opacity', '1', '0');
    animation.play();
1 Like