1. Basic Installation and Setup
GSAP (GreenSock Animation Platform) is one of the most powerful animation libraries for the web. To start using it, we include the library via CDN.
1.1. Including GSAP via CDN
Add the GSAP Core library to the <head> section or just before the closing </body> tag of your HTML document.
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12/dist/gsap.min.js"></script>
1.2. The Basic Tween Structure
A Tween is the fundamental unit of animation in GSAP. The following code is the most basic Tween, moving an element with the class ".box" 100px on the X-axis over 1 second.
gsap.to(".box", { duration: 1, x: 100 });
Key Concept: gsap.to() animates the element from its current state to the specified final state. duration defines the animation time.