gsap-core

To create timeline-based animation sequences in React or Vue, use GSAP core methods like gsap.to and gsap.from within component lifecycle hooks. This approach provides framework-agnostic DOM motion control with consistent timing, easing, and staggered UI effects.

Yes, you can use GSAP ScrollTrigger for scroll-driven panel animations in vanilla JS. The core API supports ScrollTrigger-based sequences alongside matchMedia, enabling responsive scroll animations that respect prefers-reduced-motion across vanilla JS and component frameworks.

The difference between gsap.from, gsap.fromTo, and gsap.set lies in animation state transitions. gsap.from animates from specified values to current state, gsap.fromTo defines both start and end states, and gsap.set immediately applies transform values without transition for static UI configuration.

To build staggered entrance animations with GSAP core tweens, use timeline-based sequencing combined with the stagger property inside gsap.to or gsap.from methods. This coordinates multiple UI elements into smooth, timed entrance sequences for robust front-end motion design.

Yes, GSAP core supports responsive animation for prefers-reduced-motion through the matchMedia method. This allows developers to conditionally apply or disable tween methods and timeline sequences based on user motion preferences, ensuring accessible front-end UI components.

You should use GSAP core tweens instead of CSS animations when you need complex timeline-based sequencing, ScrollTrigger-driven panels, and matchMedia responsive controls. Core tween methods offer precise programmatic easing and transform aliases that CSS animations cannot easily replicate.