Glossary · Animation
Easing
The way a movement speeds up and slows down between its start and its end.
In detail
Without easing, an object moves at constant speed and the motion looks mechanical. With easing, it starts slowly and ends by slowing down (or the reverse), the way real objects do. In CSS, the curves have names like ease, ease-out, or ease-in-out, or you can write your own with cubic-bezier(). Names like back or elastic are not CSS curves: they are names from animation libraries, such as GSAP.
Practical rule: what enters the scene usually slows down on arrival (ease-out); what exits usually speeds up (ease-in). Very elastic curves draw attention, but they tire the viewer if used throughout the banner.
Example
document.querySelector(".cta").animate({ transform: ["translateX(40px)", "none"] }, { duration: 600, easing: "ease-out" });