Jump to content
Search Community

incremental animation

Matt Severin test
Moderator Tag

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

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.
  • Create New...