My dream-perfect-simple stepped curve

[Mumm-Ra]

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

 

See the Pen abMzGaw by warleyalex (@warleyalex) on CodePen

[Rodrigo]

Hi,

 

I can see several issue in your demo.

 

First you're setting an ease function on a set() instance. In GSAP set() instances' duration is zero seconds so the update is immediate (on GSAP's next tick, but that normally is 16 milliseconds so is not noticeable), what's the need for an easing function on an instance that lasts zero seconds?

.set(".blue",{ duration: 0, x: 0, ease: "none" })

.set(".red",{ duration: 0, delay: 0.83333, ease: "steps(1)"}, -0.83333/2.5)

Second you're assigning a new GSAP Timeline instance to an already created variable, so that basically replaces that variable, so when you do this:

var tween = gsap.timeline({
  data: {
    id: "first",
  }
});
console.log(tween.data); // -> {id: "first"}
var tl = gsap.timeline()
.fromTo(tween, {}, {
  onStart: () => console.log(tween.data), // -> {id: "second"}
});

var tween = gsap.timeline({
  data: {
    id: "second",
  },
});

Finally I don't really understand what you're really trying to do here, maybe I'm missing something here or perhaps you could show a working demo or site where we can see the effect you're trying to replicate or provide a more detailed explanation of the animation you want to replicate.

 

Happy Tweening!

[Mumm-Ra]

Quote

Second you're assigning a new GSAP Timeline instance to an already created variable, so that basically replaces that variable.

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 }
				]
			},

 

[Rodrigo]

Hi,

 

Sorry but your last post doesn't really tells me a lot, maybe I'm missing something obvious here that I can't get through my thick skull, sorry.

 

I'm afraid I'll need a more simple explanation than the one you're providing right now. You mention frames and keyframes, but you're not using frames in your GSAP setup (you can switch from time to frames FYI) and the JSON data you provide, also doesn't tell me a lot TBH.

 

Happy Tweening!

[Mumm-Ra]

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