incremental animation

[Matt Severin 31 Likes (Newbie)]

I'm creating a Tetris style falling object that moves 30 pixels in Y, at a time, before it falls into place.

The movement I want isn't as hard as a SteppedEase, but it does have a start/stop/start feel with strong easing. Is there a way to write this in one line? 

The example gif I've attached shows an object 180px downwards, in Y, in 6 increments, over 2 seconds. Each increment having a strong ease in/out.

This is what I'm trying to emulate in 1 line (or not much more than 1 line) of code.

I presume GSAP has a feature like this I just can't seem to find it.

 

[OSUblake 18,475 Likes (Superhero)]

Some utils would be good for this, like snap and unitize.

 

See the Pen afc7526cedf68106bdbf7d4a9954a10a by osublake (@osublake) on CodePen

 

See the Pen poeNEjm by osublake (@osublake) on CodePen

 

 

[Matt Severin 31 Likes (Newbie)]

These are close but not quite it, both examples still use hard jumps where my example uses something close to a Power4.inOut to get from one grid position to the next. You can see it transitioning between the grid lines in my initial attached gif. It has a different feel versus using steppedEase, or the above unitize example.

I do think there is something to using unitize, but messing around with the codepen I'm not seeing a way to make it transition versus 'skipping' to the next location.

[OSUblake 18,475 Likes (Superhero)]

Well, you did say tetris style, which is exactly that 😉

 

If you want an ease, just use repeatRefresh like this.

gsap.to(".block", {
  y: "+=50",
  ease: "power4.inOut",
  repeat: 10,
  repeatRefresh: true
})

 

 

[Matt Severin 31 Likes (Newbie)]

It’s too late in the day for me to experiment but this does look like what I’m looking for. I presume I’d also add a duration: property to this too? I’ll test in the a.m., thank you!