JDanger

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); }

I'm working on a custom animation system for a 3rd party hardware device and am wondering if someone has a good suggestion for leveraging GSAP's animation engine to output cue sheets—arrays of keyframe data from a GSAP animation. I've built such a solution, but it requires essentially running GSAP in realtime and onUpdate to push the keyframe data to an array. It works fine, but requires either buffering a few keyframes before sending the data to my hardware device, or running a cache routine that builds the array and saves it for later/immediate playback. Anyone know of a way to leverage GSAP's animation engine and output tweening data at a significantly faster than browser refresh rate? Thanks.