Troubleshooting animation/interaction

I want this banner to slide down from the top of the viewport, pause, slide up, then appear in the normal flow of the page. What am I doing wrong?

Banner (1.2 MB)

I think the problem is that the animation time is defined in the action and in the automatic state changes. If you remove it from the action and set it to 0, it works for me.

1 Like

Interesting. That works, but doing the opposite (removing it from the state changes) doesn’t work.

In fact, we have some timing issue that gets worse the longer it runs. The CSS transition time is unaffected by this and so it works with the state change animation.

Another way around it is using effects, which I would use in these cases anyway. Here is a quick example of how I would approach this: Banner slide_:w (1.7 MB)


Thanks for the example, will try effects in the future.