Nevermind, I figgered it! In case anyone is wondering how to do such a thing. Essentially you create a timeline, add all your tweens, then step through the timeline (note I'm using ReactJS and useRef hence 'tl.current') and output values onStart, onUpdate, and onComplete—I'll be adding these to an array so that I will have a generated cue sheet with all keyframe values for the number of frames desired.
let frames = 1000;
tl.current = gsap.timeline({
paused: true,
onStart: function() {
let getter = gsap.getProperty("#question");
let rotation = getter("rotation"),
x = getter("x"),
y = getter("y");
console.log({x: x, y: y, rotation: rotation});
},
onUpdate: function() {
let getter = gsap.getProperty("#question");
let rotation = getter("rotation"),
x = getter("x"),
y = getter("y");
console.log({x: x, y: y, rotation: rotation});
},
onComplete: function() {
let getter = gsap.getProperty("#question");
let rotation = getter("rotation"),
x = getter("x"),
y = getter("y");
console.log({x: x, y: y, rotation: rotation});
}
})
.to("#question", 0.5, {x: 100})
.to("#question", 0.5, {y: 100})
.to("#question", 1, {rotation: 360});
for (let i = 0; i < frames; i++) {
tl.current.progress(i/frames);
}