A way to animate a line chart transition with smart animate?

Hi,
I also thought that could work. But how can I do the transition between two frames ? Because the GIF will play everytime, and by the way I don’t think I can play the GIF during a transition, it will restart when the new frame is loaded. Right ?

Yes, but there are some potential workarounds to manage the back and forth.

If tapping the GIF/chart is what triggers the transition, then you can use four interactive variants to manage the back and forth. This will effectively require two GIF transitions, one to move forward and one reverse.

A > Animation to B > B > Animation to A > A

You would use a change after delay (matching the duration of the animation) to go from the animation to the next state. I’ve done this a couple times and it generally works OK.

If it’s something else that triggers, it becomes more complex but you’d basically build in-between frames with the same type of flow.

This is definitely on the hacky side of things though so I’d do a rough test first before trying to spend time on making it pixel perfect.

The main drawback to this technique is that the back trigger won’t work, so you would have to override that trigger for this.

I reproduced the animation in after effects and exported in GIF. What is the next step ?

I try to understand your post but yes, I want to trigger the change by clicking on a button. I also want my GIF isn’t played if I’m not in the transition.

Also, I have other smart animations during the transition as you can see here :

Here’s a rough proof of concept that matches your use case. Here’s the prototype so you can see it in action: https://www.figma.com/proto/EEErgwLmeIXnG9tnze8JJK/FF-GIF-Demo?page-id=0%3A1&node-id=2%3A3&viewport=230%2C443%2C0.38&scaling=scale-down&starting-point-node-id=2%3A3

To pull off this use case, you’ll need four assets:

GIF A->B
GIF B->A (basically the reverse)
Frozen image of A starting point
Frozen image of B starting point

Then, you need four frames, two of each that are identical. You are basically magic animating to a screen that has the GIF that runs. That screen has a delay trigger that MATCHES the duration of the GIF’s runtime. That delay triggers the animation to the starting B image.

It’s important that all interaction (other than the delay) is disabled to avoid any weirdness.

It is a bit hard to explain how to set it up, so here’s the link to a file you can duplicate to your drafts. I would say on a scale of difficulty for prototyping this is definitely on the advanced side of things. Hopefully this works for you!