In Chapter 6, we learned how to create basic animations by directly controlling the properties of our 3D objects over time. While this gives us direct control, it often results in movements that feel robotic or jarring. Think about how a ball bounces – it doesn't accelerate uniformly from start to finish. It slows down as it reaches its peak, stops momentarily, and then accelerates downwards. This natural variation in speed is what makes movement feel fluid and believable. This is where easing functions come in.
Easing functions are mathematical formulas that determine how the progress of an animation changes over its duration. Instead of a linear progression (0% to 100% at a constant rate), easing functions allow us to control the acceleration and deceleration of the animation. This creates a much more organic and visually appealing experience.
The most common easing functions are provided by libraries like GSAP (GreenSock Animation Platform). While we won't be integrating GSAP directly into our core Three.js setup in this book, understanding the concept of easing is crucial. Many Three.js animation techniques, especially when using tweening libraries, will leverage these functions. For example, a simple linear animation goes from point A to point B at a steady speed. An ease-in animation starts slowly and speeds up, while an ease-out animation starts quickly and slows down as it approaches its destination. An ease-in-out animation combines both, starting slow, speeding up, and then slowing down again.
graph TD;
A[Start of Animation] --> B{Progress of Animation};
B --> C[End of Animation];
A -- Linear --> B;
A -- Ease-In --> B;
A -- Ease-Out --> B;
A -- Ease-In-Out --> B;
Let's visualize this. Imagine an animation that lasts for 1 second. A linear easing function would mean that at 0.5 seconds, the animation is exactly 50% complete. However, with an ease-out function, at 0.5 seconds, the animation might only be 70-80% complete because it's slowing down towards the end. Conversely, with an ease-in function, at 0.5 seconds, it might only be 20-30% complete as it's still accelerating.
graph LR;
A(Time) --> B(Progress);
B -- Linear --> C(50% Progress at 50% Time);
B -- Ease-Out --> D(75% Progress at 50% Time);
B -- Ease-In --> E(25% Progress at 50% Time);