Whether using After Effects, Principle, Origami, Figma, even Quartz at one point was commonly used here at Underbelly, we've spent a lot of time animating in a digital space. One common error that seems to occur from a relative newb to slightly more seasoned animator is the difference between ease in and ease out and how to use them correctly. My go to definition between the two is as follows; ease IN to position and ease OUT of position. That's all well and good but what do I actually mean? At its basics the question you have to ask yourself while you animate is how is this object currently moving and what do i want it to do next? Is it currently at a starting position and you want it to slowly ease OUT of position and start moving to a new one or do you currently have something moving and you want it to slowly ease IN to a new spot and stop?
What good is telling you the difference when we can also show you? And why bother doing an easy example in an app when we also have a love for stop motion so setting our sights on a challenge and doing some math we built a physical depiction of easing and it’s principles. Each cube covers the same amount of space in the same amount of frames and the colors change every half inch the cube moves. These combinations hopefully help emphasize these principles and end any future confusion for animators of all skill levels.