Animating HTML element with Extras Animation module

Anvil Q&A
1

Okay so I’ve designed a HTML div that I wish to animate. The issue I’m having is that if the element’s opacity is set to 0 as a default, then I try to set the opacity to 1 through a slide_up = animation.Transition(translateY=['-10%', 0], opacity=[0,1]) the animation plays through as expected, but then the element returns to it original opacity of 0. Trying to manually set the opacity after the animation through code doesn’t work either
Not sure if I’m overthinking this implementation, or if I should go back to the CSS based animations that worked perfectly fine before. If that’s the case, anyone know how to activate CSS based animation keyframes from the Python side?

2

It’s been a while since I’ve looked at the animation code.

But does the commitStyles method help?

See the docs for api options
https://anvil-extras.readthedocs.io/en/latest/guides/modules/animation.html#commitStyles

Otherwise a clone link would be useful to play around with your use case.

3

That didn’t work as intended, but I’ve got a feeling there’s something I’ve done that’s causing it. I’ve sent you a clone link

4

Ah so commitStyles is not the right approach here

you want to include fill="forwards" in your effect object

    slide_up = animation.Transition(opacity=[0,1])
    slide_up_effect = animation.Effect(slide_up, duration=2000, delay=2000, fill="forwards")
5

That did it! you legend

What’s funny about that solution is that if you look in the HTML for the .pl-scoreboard element, you can see I’ve commented out the animation attribute, which includes the ‘forwards’ option, I just didn’t think it was necessary here

For future clarity, can you briefly explain why this solution works? And why commitStyles() doesn’t

6

Now it seems that any translate transitions don’t work, but the opacity transition still works no problem

When I comment out position:absolute it seems to work

7

you can still use the commitStyles() but I believe without fill="forwards" the final state of the animation is reverted to its original css state.
So commitStyles() has no real effect here without fill="forwards"

see some docs on the fill keyword for animations:

The utility of commitStyles is that an animation can be removed from the page,
which would mean the styles applied by the animation will get removed.

Note, another approach would be to do:

        element = self.dom_node.querySelector('.pl-scoreboard')
        element.style.opacity = "0"
        slide_up = animation.Transition(opacity=[0,1])
        slide_up_effect = animation.Effect(slide_up, duration=2000, delay=2000)
        animation_object = slide_up_effect.animate(element)
        def onfinish(a):
            element.style.opacity = "1"
        animation_object.onfinish = onfinish
1 Like
8

Following on from this, I commented out position:absolute from one of the child divs, and it caused the rest of them to animate as they should, super weird

Edit: I changed one of the elements to position: relative which thankfully didn’t break it’s placement, and it now works as intended. Appreciate your help, I’ll do a small write up in my original post about this