How to create seamless transition between Lottie animations

Hi FlutterFlow friends!

I have a challenge that I'm trying to solve and could use some input.

I want to display a seamless visual transition from one Lottie animation to another. Basically, I have an animation of an envelope bouncing, and when the envelope is tapped I want to play (in the same position) an animation of the envelope opening.

For my first attempt I created a stack with the envelope closed on the first "layer" and the envelope opening on the second layer, and set the initial visibility of the closed envelope to true and the opening envelope to false. Then, when the envelope is tapped, I used an action to reverse the visibility of the animations. This worked, however there was an ugly flicker when I changed the visibility.

I then tried a similar approach, but using the conditional build" widget to build either the closed envelope or the animation of it opening, but this also showed the flicker when I switched from one to the other.

My latest approach is to use opacity for the two animations, instead of visibility, on the hope that changing the opacity of the two animations will not introduce the flicker. However, there is currently a bug in FF (which I've already reported in Github) with controlling opacity from a variable, so I have to wait for a fix before testing this method.

In the meantime, does anyone have any other approaches to suggest?

Thanks for your help!

2 replies