Interactive button to 'liked items' page

In my webshop prototype there are products that the user can like by clicking on a heart button and making it pink with ‘set selected-> toggle’ settings. I want the heart button in the menu bar of my app (which leads you to the page with the liked products) to have a small animation when a product gets liked. Or perhaps a little pink circle to appear close to the heart when a product gets liked. Any suggestions on how to do this? And do you guys maybe have some suggestions on what sort of heart ‘animation’ would be best?

In the Click or Tap event of the heart button, add some actions to do something to the heart widget in the menu, and/or show the “little pink circle”. If you only want the circle to be shown briefly, just add a Wait event (and change the default 1000 ms (= 1 sec) time if you need) then hide the circle.

Some sample code would look like,

Heart Button
Click or Tap
Set Selected of This to “true”
Show MyPinkCircle fade, ease in and out, 300 ms
Wait 3000 ms
Hide MyPinkCircle fade, ease in and out, 300 ms

There are many ways to create an animation effect for the menu heart button, and many many types of animations, depending on what the purpose of the animation is …subtly remind user that they can use this button to see liked items, and/or that a liked item has been registered …or maybe something more obvious to draw user’s attention to the button and away from the heart button they clicked, etc. For example, the heart could:

  • Grow a few pixels if at least one item is liked. Something like,
  • Beat whenever any item is liked.
  • Rotate 360°.
  • Tilt back and forth in a kind of “hello” animation.
  • Simply change colors briefly, either fill, border or both.
  • Jump up and down a bit, maybe with a shadow effect.
  • Get an arrow shot through it.
  • A number value for count of liked items could get updated, also with animation.
  • More advanced animation can be created in any graphics application and saved out as a GIF.
    • You can create a dynamic panel from the heart button and put the animated GIF in the second state. Change the dynamic panel state to show/hide the animation.
    • Or, if your heart button is an image, you can make a Selected interaction state for it and assign the GIF image for the selected state. Just set the heart button to selected to show the animation and unselected to hide it.

Here is a quick demo of some animation possibilities:
heart animation.rp (61.2 KB)

1 Like