gsap-core

Build timeline-based web animations with GSAP core by chaining tweens via gsap.to(), gsap.from(), and gsap.fromTo() into a coordinated timeline. This framework-agnostic approach ensures consistent motion sequencing across vanilla JavaScript and component frameworks.

GSAP works with React, Vue, Svelte, and vanilla JavaScript for scroll-driven animations. Using ScrollTrigger, you can bind timeline-based motion to scroll positions while applying core tween methods consistently across these environments.

Handle responsive and reduced-motion preferences in GSAP using gsap.matchMedia(). This method adapts your timeline animations to specific breakpoints and applies alternate motion logic for users with prefers-reduced-motion settings enabled.

Use transform aliases like x, y, rotation, and scale in GSAP for reliable DOM and CSS animations. These aliases ensure consistent cross-browser behavior and performance, avoiding parsing issues associated with direct CSS transform string manipulation.

You can create a simple fade-in animation using gsap.to without a timeline by targeting an element and animating its opacity. This single tween method provides a straightforward way to execute common animation patterns independently.

GSAP core handles complex sequenced motion through timelines, but limitations arise without proper cleanup in framework lifecycles. You must manage context and gsap.matchMedia conditions manually to prevent memory leaks and ensure accessibility compliance.