Anvil extras animate module fade out

Anvil Q&A
1

Hi @owen.campbell,

Trying to implement the animation module now in my app.
I basically need to fade out a card, switch the image contained in it, and then fade it back in after the image has been switched.

I’ve tried now with the following code:

def timer_slide_tick(self, **event_args):
        print("Changing slide...")
        animate(self.card_container, fade_out, 5000)
        print("after animation")
        self.current_slide += 1
        if self.current_slide == len(self.slides):
            self.current_slide = 0
        print("Displaying slide number ", self.current_slide)
        self.display_slide(self.slides[self.current_slide])
        animate(self.card_container, fade_in, 900)
        pass

However, it seems like the animation call is non-blocking and hence the image is switched out before the fade-out animation is finished. Likewise, the fade-in animation begins before the fade-out animation is finished. Can confirm this is happening because the two print-statements either side of the animation call get printed immediately after one-another.

I’ve tried adding a time.sleep() call for the duration of the animation however this doesn’t seem to do the trick either:

def timer_slide_tick(self, **event_args):
        print("Changing slide...")
        animate(self.card_container, fade_out, 5000)
        time.sleep(5)
        print("after animation")
        self.current_slide += 1
        if self.current_slide == len(self.slides):
            self.current_slide = 0
        print("Displaying slide number ", self.current_slide)
        self.display_slide(self.slides[self.current_slide])
        animate(self.card_container, fade_in, 900)
        pass

any ideas?

Thanks in advance.
pat

2

That’s correct, and it allows to start animations on multiple components at the same time.

What do you mean by doesn’t do the trick? What does it do?

1 Like
3

The docs show you can call .wait() on an animate call.

animate(self.card_container, fade_out, 5000).wait()
1 Like