Feature Request: Ability to Translate Keyframes by Specifying Time Duration

[nestarz]

Hey there!

I am currently using theatre.js for my project and it's been incredibly helpful. I was just wondering if there's any possibility or feature in theatre.js to translate some keyframes by a specific time duration using the API?

This feature would be extremely beneficial in customizing animations according to the project needs without having to manually adjust every keyframe, for example based on an audio file.

Looking forward to hearing your thoughts. Thank you!

Best regards.

[AriaMinaei]

@nestarz this sounds like a nice feature. Would an API like this work?

const obj = sheet.object(/* ... */)

studio.transaction((t) => {
  // transforms all the keyframes in obj.props
  t.transformAllKeyframes(obj.props, {
   // push all keyframes forward by 4s:
    translate: 4,
   // make them twice as long:
    scale: 2,
    // like css's transform-origin:
   origin: 0
  })
})

[nestarz]

That would be lovely, but I also would like to filter the keyframes to update based on their current position on the timeline, I don't think it's possible with the proposed API. Also, is there an API to query all objects of the sheet or sequence, without reference ?

Thanks!

[nestarz]

Maybe something like

// API to list all objects of the sheet or sequence
const allObjs = studio.sheet.listAllObjects();

allObjs.forEach(obj => {  
  // Start a transaction
  const trans = studio.transaction.start();
  
  // Filter keyframes
  const filteredKeyframes = trans.keyframes.filter(obj.props, {
    position_gt: 10,  // Greater than 10s
    position_lt: 20   // Less than 20s
  });
  
  // Transform the filtered keyframes
  filteredKeyframes.forEach(kf => {
    trans.keyframes.transform(kf, {
      translate: 4,  
      scale: 2, 
      origin: 0,
      // or
      position: kf.position + 10
    });
  });
  
  // Commit transaction
  trans.commit();
});

[nestarz]

@AriaMinaei do you think that's a better api ?