Lock duration of animated components

From some digging it appears that each new Frame on the canvas defaults to the stated 2000ms. You can adjust the Frame’s duration (1000ms, 3000ms, etc.) and every animation added (whether a component instance or not) adopts that set Frame duration.

If I add my component instance (1000ms) to a new Frame (2000ms) I get the undesired effect.

You could manually change the duration of each frame which has an animated component instance, but that would be time prohibitive. Also, it would seem that you couldn’t have two animations in a frame that have different durations.

There’s a work around where I can have two Rotate animations (1st: 1000ms, 2nd: 1000ms with 1000ms delay) so the total time just happens to be 2000ms.

Seems like I shouldn’t have to do that though.

Yup .. this is very frustrating. I designed a 6300ms duration animation that is just perfect as I wanted.
However, it is a subcomponent inside another component and now, every time I instantiate it gets cut at 2000ms :( 

I guess we’ll need to wait for a fix.

Based on my investigation and the Figma documentation, this seems to be the expected behavior in Motion: instances of animated components don't inherit the timeline duration from the main component. Instead, each instance appears as a separate track in the timeline and starts with the default duration of 2000ms.

This definitely needs to be fixed.

Hey hey ​@Jonathan_Ellis  ​@Peu_Fraga  👋 Thanks so much to you both for the detailed digging on this — Jonathan for walking through the frame-duration behavior and the two-rotation workaround, and Peu for pinning down what's happening at the instance level. I appreciate y’all.

To make sure I've got the mechanic right, here's what's going on:

• Each frame on the canvas has its own timeline duration, and new animations default to 2000ms.
• An animated component's duration is set at the main component level — it can't be edited on the instance. When you drop an instance into a frame, it shows up as a track you can reposition, but you can't change its duration there. (From the docs: "the animation's duration and properties can only be edited at the main component level.")
• The component's animation isn't being altered or "cut" — it's that the host frame's timeline is a different length than the instance's animation. A 1000ms loop inside a 2000ms frame reads as a pause; a 6300ms animation inside a 2000ms frame gets clipped by the shorter frame. 

The practical options right now are all manual:

• Set the host frame's duration to match your animation (1000ms, 6300ms, etc.) via the Duration field, or drag the handle on the right side of the timeline.
• There's no "fit frame to instance duration" option today — and I agree that gap makes looping animated components fiddlier than they should be.
• Jonathan's stacked-rotation trick works, but treat it as a stopgap, not the intended path.

My questions to y’all:

• Does this match your experience?
• Did I miss anything?

I’d be remiss if I didn’t mention that Figma Motion is in open beta, so this is an area that's actively evolving. I'm passing your feedback along to the Motion team — specifically the ability for a frame to inherit or auto-fit an animated instance's duration.

One ask: if either of you can share a quick screen recording of the issue in action (full-screen, not zoomed in, so we can see the whole context), that'd help a lot. Thanks again for all your help so far! — Jaycee

That’s a good summary. Thanks Jaycee.

Amazing. Thanks again ​@Jonathan_Ellis  ​@Peu_Fraga 🙌 — Jaycee

I also encountered a similar problem.

Two animated icons exist on a page, and are published as components.

Icon A is 400ms long.
Icon B is 10,000ms long.

Used them both in another Figma File.
Put them in a frame.
Show this frame in a prototype; run the prototype.

Prototype will show the icons animating (good)
But both Icon A & B get the total duration of 10,000ms.
This makes Icon A appear static for 9600ms.

Is this because in the component page, the longest duration “wins”?

It’s strange.
Export both animated components as Animated SVG.
Then create an HTML file with Video HTML Tags to display them looping.
Open in browser. 
They show the correct durations, the correct looping.

Hey ​@Alwyn_Balingit 🤩 Thanks so much for taking the time to report this. Can share a quick screen recording of the issue in action (full-screen, not zoomed in, so we can see the whole context)? And for your test repro file, can you share it with us by inviting  support-share@figma.com  as a viewer. Adding support as a viewer won't affect your billing or take up a seat on your team.

Talk soon! — Jaycee

Hi ​@Alwyn_Balingit 👋 Thanks for flagging. I opened a support ticket for this. The ID is 2112072 and the email subject line is Follow up from Figma Support. Please keep an eye on your email (and spam folder if necessary) for the email and any replies from our team. I added a few additional requests to help our team take a deeper look. Thank you! — Jaycee