by @bbeierle12
Core GSAP animation concepts including tweens, timelines, easing functions, and animation properties. Use when implementing basic animations, transitions, or learning GSAP foundations. Essential starting point for any GSAP-based animation work.
Core animation concepts with GreenSock Animation Platform.
npm install gsap
import gsap from 'gsap';
// Basic tween
gsap.to('.box', {
x: 200,
duration: 1,
ease: 'power2.out'
});
| Method | Description | Use Case |
|---|---|---|
gsap.to() | Animate from current → target | Most common |
gsap.from() | Animate from target → current | Entrance animations |
gsap.fromTo() | Animate from defined start → end | Full control |
gsap.set() | Instantly set properties | Initial state |
// To: current state → target
gsap.to('.element', {
x: 100,
y: 50,
rotation: 360,
duration: 1
});
// From: target → current state
gsap.from('.element', {
opacity: 0,
y: -50,
duration: 0.5
});
// FromTo: explicit start and end
gsap.fromTo('.element',
{ opacity: 0, scale: 0.5 }, // from
{ opacity: 1, scale: 1, duration: 1 } // to
);
// Set: instant property change
gsap.set('.element', { visibility: 'visible', opacity: 0 });
gsap.to('.element', {
// Position
x: 100, // translateX in pixels
y: 50, // translateY in pixels
xPercent: 50, // translateX as percentage of element width
yPercent: -100, // translateY as percentage of element height
// Rotation
rotation: 360, // 2D rotation in degrees
rotationX: 45, // 3D rotation around X axis
rotationY: 45, // 3D rotation around Y axis
// Scale
scale: 1.5, // Uniform scale
scaleX: 2, // Horizontal scale
scaleY: 0.5, // Vertical scale
// Skew
skewX: 20, // Horizontal skew in degrees
skewY: 10, // Vertical skew in degrees
// Transform origin
transformOrigin: 'center center',
transformPerspective: 500,
duration: 1
});
gsap.to('.element', {
//...