Jump to content

Matt Severin

incremental animation

Recommended Posts

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.



Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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



  • Like 1
Link to comment
Share on other sites

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!

  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.