Chapter 396: Easing
Core Idea
Take a look at the difference between no ease and a bounce ease in the demo below! The green box with no ease spins around at a consistent speed, whereas the purple box with the 'bounce' ease revs up, races along and then bounces to a stop.
Key Concepts
- Add point: ALT-CLICK on line
- Toggle smooth/corner: ALT-CLICK anchor
- Get handle from corner anchor: ALT-DRAG
- Toggle select: SHIFT-CLICK anchor
- Delete anchor: press DELETE key
- Undo: CTRL-Z
Code Examples
gsap.to(".green", { rotation: 360, duration: 2, ease: "none" });
gsap.to(".purple", { rotation: 360, duration: 2, ease: "bounce.out" });
- What it demonstrates: typical usage of Easing in a GSAP animation.
Key Takeaways
- Add point: ALT-CLICK on line
- Toggle smooth/corner: ALT-CLICK anchor
- Get handle from corner anchor: ALT-DRAG
- Toggle select: SHIFT-CLICK anchor
- Delete anchor: press DELETE key
Connects To