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.

 

NUM_6_3.gif

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...