JDanger Posted October 26, 2021 Share Posted October 26, 2021 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. Link to comment Share on other sites More sharing options...
JDanger Posted October 26, 2021 Author Share Posted October 26, 2021 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); } 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now