greensock/GSAP

Features

• Animation Libraries - Ships a high-performance animation library for animating CSS properties, SVG paths, and object values with precise control over timing and motion.
• Animation and Motion Systems - Transitions CSS properties, attributes, and numeric values across time to create complex motion sequences and interactive visual effects.
• Animation Properties - Provides a robust engine for animating CSS styles, attributes, and numeric properties across web elements.
• CSS Property Transitions - Animates standard and non-standard CSS properties, including complex strings and CSS variables, using camelCase syntax.
• Easing Functions - Modifies the rate of change during an animation using predefined mathematical curves or custom patterns to simulate natural movement.
• Timeline and Sequence Management - Provides robust tools for orchestrating complex, multi-step animation sequences using staggers, keyframes, and callbacks.
• Animation Timelines - Organizes multiple animations into a unified timeline to control timing, overlapping, and nesting of complex motion sequences.
• Timeline Orchestrators - Orchestrates complex motion sequences using hierarchical timelines for precise timing and nesting.
• Scroll-Driven Animation Tools - Links animation progress directly to scroll position for interactive, scroll-driven visual storytelling.
• Vector Animation Libraries - Reveals or hides the stroke of SVG shapes by dynamically adjusting dash properties to draw paths.
• Draggable Axis Configurations - Enables interactive dragging of elements with support for touch, mouse, and momentum-based physics.
• Interaction Controllers - Enables DOM elements to be draggable, rotatable, or scrollable with support for constraints and custom trigger areas.
• Scroll-Driven Interaction Layers - Provides tools for scroll-triggered visual storytelling and parallax effects.
• Scroll State Controllers - Links animation progress directly to browser scroll positions for parallax and pinning effects.
• Animation Frameworks - Provides a comprehensive framework for building complex, interactive motion sequences and layout transitions across modern component-based web architectures.
• Dynamic Vector Graphics - Provides programmatic manipulation and animation of vector-based visual elements, including morphing and path-based movement.
• Shape Drawing - Provides robust SVG path morphing capabilities to transform one vector shape into another with smooth geometric interpolation.
• Path Animation Utilities - Provides tools for animating elements along complex SVG paths and coordinate trajectories with automatic rotation and alignment.
• Functional Data Pipelines - Implements a functional pipeline for clamping, mapping, and interpolating numeric values in animation sequences.
• Plugin-Based Architectures - Supports modular integration of specialized features like physics and morphing via a plugin-based architecture.
• React Animation Hooks - Hooks into the component lifecycle to manage animations automatically and ensure proper cleanup when components mount or unmount.
• Animation Cleanup Groups - Groups animations into managed containers to ensure automatic cleanup and state reversion.
• Physics-Based Animations - Simulates natural motion by applying velocity, gravity, and friction to elements without requiring a full physics engine.
• Timeline Composition - Embeds timelines within other timelines to modularize complex motion designs into maintainable, reusable sections.
• Animation Playback Controls - Provides comprehensive methods for pausing, resuming, and manipulating the execution state of animation sequences.
• Drag and Drop Interactions - Adds drag-and-drop functionality, physics-based movement, and layout flipping to interface components for highly responsive and intuitive user interactions.
• Interaction Libraries - Enables interactive interfaces with support for drag-and-drop, momentum-based physics, and fluid state transitions for web components.
• Interaction Animations - Coordinates drag-and-drop, physics-based momentum, and layout transitions for interactive UI.
• Interactive UI Components - Enables physics-based drag-and-drop interactions and responsive UI components.
• Layout Animation Engines - Captures the current state of DOM elements and animates them to new positions or sizes after layout modifications.
• Layout Transition Engines - Captures and animates DOM elements between layout states to create fluid transitions.
• Parallax Effects - Provides scroll-linked visual effects that move elements at different speeds to create depth.
• Animation Sequence Managers - Groups multiple animations into unified sequences to manage timing and playback without manual delay calculations.
• Shared Element Transitions - Connects distinct visual elements using identifiers to animate transitions between them, including cross-fading and structural handling.
• Animation and Tweening - Robust animation toolset.
• General Animation Engines - Comprehensive JavaScript animation library.
• Media and Graphics - Animation platform for the modern web.
• Numerical Transformation Utilities - Offers a functional pipeline for clamping, mapping, and interpolating numeric values to drive complex motion.
• Animation Methods - Enables precise animation timing by allowing offsets, absolute timestamps, and relative markers within sequences.
• Animation Timing Utilities - Adjusts the rate of change during an animation sequence to create specific motion characteristics like acceleration, deceleration, or elastic effects.
• Animated Typography - Splits text into granular segments to apply dynamic reveal and scramble animation effects.
• Animation Lifecycle Hooks - Hooks into component-based architectures to manage animation lifecycles and cleanup.
• Animation Easing Functions - Allows the definition of unique, non-standard motion curves for custom animation behaviors.
• Interaction Physics - Simulates physical forces like friction and resistance to create natural deceleration and glide effects after user interaction.
• Component Frameworks - Hooks into the lifecycle of modern frontend frameworks to manage animation state, cleanup, and responsiveness automatically within component-based architectures.
• Animation Configurations - Applies shared properties like duration and easing to all child animations within a sequence for concise configuration.
• Animation Lifecycle Management - Coordinates animation cleanup, responsiveness, and accessibility settings to ensure smooth performance and prevent memory leaks during state changes.
• HTML Attribute Animators - Modifies numeric DOM element attributes during a sequence to update underlying geometry or visual properties.
• Draggable Axis Constraints - Constrains draggable elements within specific containers or axis-locked paths to prevent movement outside defined areas.
• Keyframe Animation Engines - Simplifies complex motion paths by animating targets through a series of property states in a single declaration.
• Scroll Snapping Configurations - Forces scroll positions to align with specific points or animation progress values once scrolling stops.
• Scroll Animations - Groups multiple elements to coordinate scroll-based triggers, allowing for staggered animations or synchronized actions across collections.
• Scroll Pinning Utilities - Locks specific elements in place during a defined scroll range, automatically adjusting layout spacing to ensure content flows correctly.
• Text Animations - Splits text into granular segments like characters or words to enable sophisticated reveal and motion effects.
• Mobile Scroll Normalizers - Prevents common mobile browser issues like address bar resizing and overscroll to ensure consistent scroll performance.
• Smooth Scroll Engines - Implements native-based smooth scrolling to ensure fluid motion and prevent jitter during page navigation.
• Visual Motion Editors - Provides visual tools for interactively editing motion paths directly in the browser.
• Visual Filter Animators - Manipulates color filters and matrix properties like saturation, contrast, tint, and brightness on graphical objects.
• Overscroll Preventers - Disables browser overscroll and bounce effects across all platforms, including mobile environments.
• Smooth Motion Transitioners - Applies specialized easing to ensure seamless velocity transitions during complex animation sequences.
• Animation Interpolators - Calculates values at specific points between two inputs including numbers, colors, and complex objects.
• Animation Property Accessors - Intercepts and modifies property values during the animation update loop to apply custom logic.
• PixiJS Property Animators - Simplifies animating nested object properties like position, scale, and skew while automatically converting rotational values.
• Velocity Trackers - Monitors the rate of change for object properties to automatically calculate and apply momentum-based animations.
• Physics-Based Property Interpolators - Calculates property values using velocity and acceleration parameters to simulate natural motion.
• Timeline Markers - Places animations, labels, and callbacks at specific points in a sequence using absolute time, relative offsets, or markers.
• Animation Targets - Integrates modular plugins to add specialized functionality like shape morphing and physics.
• Transform Origin Controllers - Defines the specific point or axis around which transformations rotate or scale.
• Value Snapping Utilities - Forces animated properties to align with specific increments or values during the animation process.
• Color Format Normalizers - Accepts standard CSS color strings and relative HSL values, automatically converting them to the required hexadecimal format.
• Overlap Detection Systems - Calculates spatial intersections between elements based on configurable thresholds to trigger logic based on proximity.
• Interaction and Event Handling - Normalizes touch, mouse, and pointer interactions to trigger callbacks based on directional movement and velocity.
• Interaction Lifecycle Managers - Provides methods to programmatically enable, disable, and manage the lifecycle of drag operations.
• Snapping Behaviors - Aligns dragged elements to specific grid points or increments for precise positioning during or after interaction.
• Numeric Array Animators - Transitions an array of numbers to a target array of numbers by interpolating each corresponding index value over time.
• Infinite Loopers - Creates seamless infinite loops for elements moving along an axis, automatically repositioning items as they exit the viewport.
• Scroll Lag Controllers - Adds a delay to element movement during scrolling to create a staggered or lazy effect where elements catch up to the scroll position.
• Scroll Lag Utilities - Adds delay to element movement during scrolling to create staggered or lazy visual effects.
• Scroll Event Handlers - Stabilizes mobile scroll behavior by synchronizing events and preventing jitter during viewport resizing.
• Staggered Animation Trails - Offsets the start times of animations across multiple targets to create sequential, wave-like, or cascading visual effects.
• Text Scrambling Animators - Transforms text content by cycling through randomized characters before revealing the final string.
• UI Element Selectors - Restricts animation target selection to specific DOM elements to prevent global selector conflicts.
• SVG Primitive Converters - Transforms basic SVG shapes into path elements to enable complex morphing animations.
• Interactive Path Editors - Provides visual tools to manipulate motion paths directly within the browser environment for precise control over animation trajectories.
• Rotation Direction Controllers - Specifies rotation direction for tweens to ensure objects follow the desired arc.
• Morph Alignment Utilities - Provides interactive utilities to identify and adjust the starting point of a morph to prevent twisting or distortion.
• Responsive Animation Adapters - Executes animation setup code only when specific browser media queries match and automatically reverts animations when conditions no longer apply.
• Mathematical Utilities - Includes helper functions for common animation math tasks like value clamping, range interpolation, and array shuffling.
• Mathematical Libraries and Utilities - Includes a functional data transformation pipeline for clamping, mapping, and interpolating numeric values to simplify animation logic.
• SVG - Normalizes complex SVG path segments to ensure consistent cross-browser rendering and animation behavior.
• Visual Filter Manipulators - Applies blur and color matrix effects like saturation, brightness, and contrast directly to objects without manually managing filter instances.
• Bouncing Animation Generators - Generates custom easing curves for bouncing motion and synchronized squash-and-stretch effects.
• Oscillation Effects - Generates complex motion patterns that oscillate around a target value with customizable intensity and frequency.
• Ease Blenders - Combines multiple easing functions to create complex motion profiles that change behavior throughout a transition.
• Animation Debuggers - Provides a graphical interface to control playback, jump to scenes, and inspect animation timing during development.
• Transition Lifecycle Hooks - Provides lifecycle hooks to trigger custom logic or animations when elements are added to or removed from the DOM.
• Animation Performance Optimizers - Precalculates complex path transformations during development to eliminate startup lag and ensure smooth playback.
• Canvas Clipping Utilities - Wraps split text segments in additional elements with visibility clipping to facilitate smooth reveal and transition effects.
• Background - Transitions between background size modes like cover and contain by calculating intermediate values for smooth scaling.
• Dynamic Animation Controllers - Allows dynamic registration of event-driven animations within a managed scope for automatic lifecycle tracking.
• Coordinate Transformation Utilities - Calculates and converts coordinate spaces between DOM elements to handle complex nested transforms.
• Reveal Masks - Wraps text and content in clipping containers to enable controlled reveal and visibility transitions.
• Drag Handles - Designates specific sub-elements as handles to initiate movement for complex UI components.
• Drag-and-Drop Event Callbacks - Tracks the lifecycle of drag interactions through comprehensive event callbacks for start, progress, and release states.
• SVG Geometry Measurers - Calculates the total length of an SVG stroke or retrieves the current animation position of a path to assist with precise motion timing.
• Auto-Animation Transitions - Automatically captures and animates layout changes to create seamless transitions between different interface states.
• Range Calculators - Calculates relative positions and maps values between different numerical ranges for animation logic.
• Scroll Interaction Handlers - Triggers custom logic or state changes when specific scroll positions are reached, enabling complex interactions based on user navigation.
• Value Interceptors - Intercepts property values during animation updates to apply custom logic like snapping or clamping before rendering.
• Value Constraint Utilities - Provides utilities to constrain numeric values within specified ranges.
• Global Style Rule Animators - Modifies CSS style sheet rules directly to update all elements sharing a selector or to target pseudo-elements.
• Responsive Text Reflow Managers - Automatically reverts and re-splits text elements during window resizing or font loading to ensure line breaks remain accurate.
• Staggered Value Distributors - Calculates and assigns values to collections of items based on position to create staggered or sequential effects.
• DOM Element Selectors - Generates scoped selector functions to target specific DOM elements for animation application.
• Event Listener Managers - Manages the registration and cleanup of event listeners to ensure proper lifecycle handling of user interactions.

Historique des stars