Mumm-Ra

A created a video showing an example using GSAP with both "time-based" and "frame-based." Improve GSDDevTool visual UI

Please improve GSDevTool Trial Visual UI for us. I discovered yesterday GSDevTool Trial, sorry I couldn't test this tool yet but I know it is very nice! a) add a visual UI with a horizontal ruler with timeline tick texts; b) add a new unit "frame" at the timeline besides "current Time" and "total duration Time" to debug the animations based on "frames". It is necessary to necessary to pass a parameter {currentframe: true} at the GSDevTools constructor. GSDevTools.create({ animation: walk, // tween or timeline timeScale: 0.5, // numerical value paused: false, // true, false loop: true, // true, false //globalSync: true, // true, false inTime: 0.333, // time or label ---> add a new unit "frame"? outTime: 0.5, // time or label ---> add a new unit "frame"? css: { width: "90%", bottom: 30 }, //container: '#id', // any selector text (class works too) //visibility: 'auto', // hidden, visible //minimal: false, // true, false currentframe: true // displays current frame // dopesheetFPS: 30 // TODO }); Please don't call the police, be patient with me, I put my dirty hands and touch this original DSDevTool trial lib and I puts some horrible JS lines to add a new unit "frame" at the timelime: "current frame" and "total frames". B = V.create(x, { type : "x", cursor : "ew-resize", allowNativeTouchScrolling : !1, allowEventDefault : !0, onPress : Uo(x, .5, !0), onDrag : function onDrag() { var e = g + u * this.x; e < 0 ? e = 0 : e > v._dur && (e = v._dur), f || v.time(e), y.style.width = Math.min(D - S, Math.max(0, e / v._dur * 100 - S)) + "%", w.innerHTML = (r.currentframe) ? Math.round((v._time / v._dur) * 30) : e.toFixed(2), _.innerHTML = (r.currentframe) ? Math.round((v._dur) * 30) : v._dur.toFixed(2) },... Y = function updateProgress(e) { if (!B.isPressed || !0 === e) { var t, o = d || -1 !== i._repeat ? 100 * v.progress() || 0 : (i.totalTime() / 1) / (i.duration() * 100 / 1), n = i._repeat && i._rDelay && i.totalTime() % (i.duration() + i._rDelay) > i.duration(); 100 < o && (o = 100), D <= o ? !d || v.paused() || B.isDragging ? (o === D && -1 !== i._repeat || (o = D, v.progress(o / 100)), !C && (D < 100 || 1 === i.totalProgress() || -1 === i._repeat) && I()) : n || (o = S, (t = v._targets && v._targets[0]) === i && t.seek(s + (l - s) * S / 100), 0 < i._repeat && !S && 100 === D ? 1 === i.totalProgress() && v.totalProgress(0, !0).resume() : v.progress(o / 100, !0).resume()) : o < S && (o = S, v.progress(o / 100, !0)), o === T && !0 !== e || (y.style.left = S + "%", y.style.width = Math.max(0, o - S) + "%", x.style.left = o + "%", w.innerHTML = (r.currentframe) ? Math.round((v._time / v._dur) * 30) : v._time.toFixed(2), _.innerHTML = (r.currentframe) ? Math.round((v._dur) * 30) : v._dur.toFixed(2), h && (x.style.transform = "translate(-50%,0)", x._gsap.x = "0px", x._gsap.xPercent = -50, h = !1), T = o), v.paused() !== C && O() } }, Uh! very ugly code! ....and I think I also have to TODO include an custom {dopesheetFPS: 30}, and customize the arguments "inTime" and "outTime" to work with new unit "frame".

Rodrigo thanks for responding. I'll try to explain "stepped" curve in the "bodebee"animation does: The animation "bodyBee" has 5 keys: on the 2nd keyframe we set a "stepped" ease, that will means hold the same value (x,y,rotation, etc.) over a selected number of frames, there is no change in values nothing is changed until the next key is reached (3rd keyframe), you then add the new linear ease to refine the movement. Rodrigo, I think I found a solution, "you just pass ANY value as the second parameter, like: SteppedEase.config(1, true); or "steps(1, rodrigo)" and will works as expected. This is so nice. // I will re-utilize this stepped ease and this will return the corresponding parsed easing stepped function. let stepped = gsap.parseEase("steps(1, rodrigo)"); var tween1 = gsap.timeline() .set("#body_bone", { duration: 0, rotation: 60, x: 100, y: 30, transformOrigin:"35% 30%", repeat: -1}) .to("#body_bone", { duration: 0.16666, rotation: 58, ease: stepped, repeat: -1 }) .to("#body_bone", { duration: 0.16666, rotation: 58, ease: "none", repeat: -1 }) .to("#body_bone", { duration: 0.16666, rotation: 65, ease: "none", repeat: -1 }); Happy New Year

var tween = gsap.timeline() .set(".blue",{ duration: 0, x: 0 }) .to(".blue", 0.83333, { x: 500, ease: "steps(1, true)" }).pause(); var tl = gsap.timeline() .fromTo(tween, {time: tween.time()}, {time: tween.duration(), ease:"none" }) .to(".blue", { duration: 0.23333, x: 1000, ease: "none" }) .timeScale(0.2); Exactly. I exactly want this effect. If you re-run codepen, the "blue square" displays exactly the "stepped" curve in spine. This is the expected in spine I would like, but I have to create two instances in GSAP and replace the first instance/variable to mimic this effect. time 0 |<----->| 0.83332 :: we hold the same value over (x = 0) a selected number of frames for a function over those two keyframes. time 0.83333 |<----->| 1.06666 :: when reach the frame 25 (time=0.83333 --> x=500) we reshape the curve to create a linear velocity for instance, so that the values are interpolated (tweened) consistently between keyframes (time 1.06666 => x=1000) This is a little Spine json output of an animation, notice that we have a some "stepped" curve. I need to find a way to recreate a simple stepped ease in GSAP to re-utilize this ease function. I want to create this effect using just one GSAP instance, the most simples way. "hip": { "rotate": [ { "curve": "stepped" }, { "time": 0.9333, "curve": "stepped" }, { "time": 1.3667 } ], "translate": [ { "x": -11.57, "y": -3.01 }, { "time": 0.2333, "x": -16.2, "y": -19.44 }, { "time": 0.3333, "x": 7.67, "y": -8.49, "curve": 0.057, "c2": 0.07, "c3": 0.713 }, { "time": 0.3667, "x": 15.39, "y": 5.02 }, { "time": 0.4667, "x": -7.85, "y": 57.22 }, { "time": 0.6, "x": -10.82, "y": 96.34, "curve": 0.241, "c2": -0.01 }, { "time": 0.7333, "x": -7.02, "y": 54.71 }, { "time": 0.8, "x": -10.58, "y": 32.2 }, { "time": 0.9333, "x": -31.99, "y": 0.45 }, { "time": 1.0667, "x": -12.48, "y": -29.48 }, { "time": 1.3667, "x": -11.57, "y": -3.01 } ], "scale": [ { "curve": "stepped" }, { "time": 0.9333, "curve": "stepped" }, { "time": 1.3667 } ] }, "left upper leg": { "rotate": [ { "angle": 17.14 }, { "time": 0.2333, "angle": 44.35 }, { "time": 0.3333, "angle": 16.47 }, { "time": 0.4, "angle": -9.88 }, { "time": 0.4667, "angle": -11.42 }, { "time": 0.5667, "angle": 23.47 }, { "time": 0.7667, "angle": 71.83 }, { "time": 0.9333, "angle": 65.53 }, { "time": 1.0667, "angle": 51.01 }, { "time": 1.3667, "angle": 17.14 } ], "translate": [ { "x": -3, "y": -2.25, "curve": "stepped" }, { "time": 0.9333, "x": -3, "y": -2.25, "curve": "stepped" }, { "time": 1.3667, "x": -3, "y": -2.25 } ], "scale": [ { "curve": "stepped" }, { "time": 0.9333, "curve": "stepped" }, { "time": 1.3667 } ] },

Please help me solving my "dream-perfect-simple stepped curve". Before going to sleep, I hope I dream with a simple and perfect with "stepped" curve I need to mimic "stepped" curve from SPINE animation to GSAP 3, something like this: //---- my dream-perfect-simple stepped curve //----- var tween = gsap.timeline() .set(".yellow",{ duration: 0, x: 0, ease: "stepped"}) .to(".yellow", { duration: 0.83333, x: 500, ease: "none" }) .to(".yellow", { duration: 0.23333, x: 1000, ease: "none" }); Of course, this is not too simple and does not work as expected. First, let's me explain: Example of a stepped velocity animation in Spine: ================================= frame: 0 |<----->| 25 :: ===> stepped ease frame 25 |<----->| 32 :: ==> linear ease We have this piece SPINE json output: "translate": [ { "time": 0, "x": 0 , "ease": "stepped" }, { "time": 0.8333, "x": 500, ease: "linear" }, { "time": 1.0667, "x": 1000, ease: "linear" } ] Start point: enter the starting frame for the effect. (time=0 and x = 0) Stop: the last frame for the effect. (time=0.83333 and x = 500) You can create a "stepped" curve to hold the same value over a selected number of frames (frame: 0 |<----->| 25), step 1, for example, this works well when you are animating, and you want to hold the same value for a function over those two keyframes. When we reach the frame 25 |<----->| 32, you can can reshape the curve to create a linear velocity for instance, so that the values are interpolated (tweened) consistently between keyframes. That is, there is no acceleration in the effect. Now I try to recreate this "stepped" animation in GSAP: It look like in spine, but this solution for me is very strange and ugly var tween = gsap.timeline() .set(".blue",{ duration: 0, x: 0, ease: "none" }) .to(".blue", 0.83333, { x: 500, ease: "steps(1, true)" }).pause(); var tl = gsap.timeline() .fromTo(tween, {time: tween.time()}, {time: tween.duration(), ease:"none" }) .to(".blue", { duration: 0.23333, x: 1000, ease: "none" }) .timeScale(0.2); I think this effect is not so simple to achieve in GSAP environment, probably uses another approach. In my experiment project with GSAP3, indeed is a complex animation, I use GSAP3 core to study math, javascript and animations, and I know very very basics of GSAP, and this is my first question, it's important to solve the "stepped" curve because later I will re-utilize this easing along the animation. Over and out, Warleyalex from Brazil