Suggestions on animation for selecting row of days?

Anvil Q&A
1

What I’m trying to do:
I have a simple calendar app that I’m building, and when I click on a day column, all the days get selected, with a top to bottom ripple effect.

What I’ve tried and what’s not working:
What I have done works OK, but isn’t really smooth, and relies on programmatically changing elements on the form, and other nasty things like time.sleep, for example:

  def button_name_click(self, **event_args):
    for day in self.days:
      day.button_name.foreground = 'red'
      day.column_panel_1.role = None
      time.sleep(.050)
      day.column_panel_1.role = "card"
      time.sleep(.01)

morefun

Any thoughts or suggestions are appreciated as always, and I hope that in the future, Anvil has a more python way to support animations rather that CSS, which I’m sure they will given their incredible speed of development :slight_smile:

Clone link:
https://anvil.works/build#clone:2YTMQUCIDGNA2IRB=MDMPBUZGUV37OUW2I35QNITS

1 Like
2

css is a the classic way to do animation on the web.
And you’re right that using time.sleep() feels a bit janky.
There is also a relatively new way to implement web animations and that’s with the Web Animation API.

I think this could be a really interesting anvil-extras implementation.
It would likely be a python wrapper around the browser’s Web Animations API.

To interact with the browser api directly you could experiment in the following way:

  def button_name_click(self, **event_args):
    for day in self.days:
      day.button_name.foreground = 'red'
      dom_node = anvil.js.get_dom_node(day.column_panel_1)
      dom_node.animate({ 'transform': [ 'scale(1)', 'scale(1.5)', 'scale(1)' ] }, 500)

Here’s the effect
d5x0XjMLF4

6 Likes
3

Some googling found this:

…but I don’t know how helpful or fun it would be to use this for what you are doing.

Sometimes I like to look at implementations in other languages to get inspiration to write a python / anvil version?

1 Like
4

Now available, thanks to @stucork:

2 Likes
5

And the code for the above becomes:

from anvil_extras.animation import Effect, pulse

my_effect = Effect(pulse, duration=500)

  def button_name_click(self, **event_args):
    for day in self.days:
      day.button_name.foreground = 'red'
      my_effect.animate(day.column_panel_1)
2 Likes