88 مستودعات
Tools for creating visual transitions and motion effects.
Explore 88 awesome GitHub repositories matching user interface & experience · Animation Engines. Refine with filters or upvote what's useful.
This project is a declarative motion framework and JavaScript animation engine designed to transition CSS properties, SVG attributes, and DOM elements. It provides a comprehensive set of tools for creating complex, multi-part motion sequences by synchronizing animations, timers, and callbacks into a single, unified timeline. The library distinguishes itself through a robust timeline-based sequence orchestrator that allows for precise timing, label-based control, and hierarchical nesting of animations. It also features a physics-driven interaction library that enables draggable elements with c
Interpolates and applies computed values to object properties dynamically throughout each animation frame.
jQuery is a library designed for document object model manipulation and cross-browser interaction. It provides a unified interface for selecting, traversing, and modifying web page elements, ensuring consistent behavior across different rendering engines by abstracting away underlying browser inconsistencies. The library distinguishes itself through a dedicated CSS selector engine that parses strings into executable functions for element location. It incorporates a state machine for managing asynchronous operations and a feature-detection strategy that probes the environment to execute code p
Powers visual transitions and motion effects through a dedicated set of animation methods.
Leaflet is a lightweight JavaScript mapping library used to build mobile-friendly interactive maps on web pages. It functions as an open-source geospatial toolkit and web map renderer, providing the necessary tools to display geographical tiles and vector data. The framework is designed as a mobile-first map interface, ensuring that mapping experiences remain responsive and efficient across both desktop browsers and mobile devices. It enables the creation of custom map implementations and the visualization of geospatial data through the addition of markers, popups, and layers. The library co
Uses hardware-accelerated CSS transforms to ensure smooth map panning and navigation.
Lottie-android is a native vector animation engine and library for Android that parses JSON specification files into high-fidelity animations. It functions as a JSON animation parser and renderer, translating After Effects exported data into native draw calls to maintain design fidelity on mobile devices. The library supports dynamic user interface control by allowing the modification of animation properties, such as colors, text, and shape attributes, during runtime playback. It also integrates with system-level accessibility settings to adjust playback and visibility in accordance with redu
Provides tools for updating animation parameters and target states during active execution sequences to create interactive UI elements.
Framer Motion is a React animation library and hardware-accelerated motion engine. It provides a suite of systems for managing declarative transitions, automated layout interpolation, and animation states within React user interfaces. The project distinguishes itself through a layout transition orchestrator that automatically interpolates visual changes when elements shift position or size. It includes an interactive gesture system to trigger motion based on drags, hovers, and taps, as well as tools for binding animation progress to scroll positions. The library covers a broad range of motio
Provides a hardware-accelerated motion engine that leverages native browser APIs for smooth frame rates.
Bodymovin is a motion graphics pipeline tool and plugin that exports After Effects animations into JSON files for native rendering on web and mobile platforms. It serves as a cross-platform animation bridge, converting complex vector motion designs into a portable Lottie format for use across different operating systems and frameworks. The project enables high-performance web animation by rendering motion graphics using SVG, Canvas, or HTML. It ensures consistent playback across diverse environments by converting dynamic expressions into static keyframes during the export process. The toolse
Connects animation properties to control layers for dynamic parameter management.
GreenSock-JS is a JavaScript animation library and framework designed for animating CSS properties, SVG attributes, and JavaScript values. It functions as a scroll-driven animation engine and a sequencing system for coordinating multiple animations into a single timeline for precise execution across web browsers. The project provides tools for creating interactive scroll effects by linking animation progress to a user's scroll position. It also includes a responsive animation framework that adjusts behaviors and timing based on media queries to maintain consistency across different device scr
Provides high-level JavaScript APIs for implementing precise animations on web elements and SVG graphics.
LibGDX is a Java-based framework designed for cross-platform game development, enabling the creation and deployment of 2D and 3D games across desktop, mobile, and web environments from a single codebase. It functions as a comprehensive library that abstracts hardware-accelerated graphics, audio, input, and file system access, providing a unified interface for developers to manage game logic and application lifecycles. The framework distinguishes itself through a high-performance architecture that prioritizes efficiency and native interoperability. It utilizes a batch-oriented graphics pipelin
Controls the emission and termination of particle effects through lifecycle management methods.
Graphite is a node-based visual design environment that integrates vector illustration, raster image processing, and motion graphics generation into a single platform. It utilizes a functional reactive pipeline and a data-flow execution model to propagate state changes through a graph of interconnected nodes, allowing users to construct complex, automated design workflows. The platform distinguishes itself through a context-aware evaluation engine that injects runtime metadata—such as coordinate data and loop indices—directly into the node graph. This enables the creation of procedural geomet
Manages the playback and sequencing of time-based animation events to drive dynamic design transformations.
GSAP is a comprehensive JavaScript animation library designed for orchestrating complex motion sequences and interactive user interfaces. It provides a robust property-interpolation engine that calculates intermediate values for CSS styles, attributes, and numeric properties, enabling smooth visual transitions across web elements. The framework is built on a core architecture that manages animation lifecycles, timeline-based sequence orchestration, and virtual property interception to ensure precise control over motion. The library distinguishes itself through a modular, plugin-based extensib
Applies shared properties like duration and easing to all child animations within a sequence for concise configuration.
ScrollReveal is a JavaScript library designed to manage scroll-triggered visual transitions for web elements. It functions as a framework for tracking element visibility relative to the browser viewport, allowing developers to apply declarative animation sequences as users scroll through a page. The library provides centralized control over motion design by maintaining a global configuration registry that merges with local element settings to ensure consistent behavior. It distinguishes itself through its lifecycle management capabilities, which include the ability to stagger the reveal of mu
Clears all active reveal effects, removes generated styles, and restores internal state to halt animation processes.
Skrollr is a dependency-free scroll-driven animation engine and cross-platform frontend library. It functions as a toolkit for linking CSS properties and HTML attributes to scroll positions to create synchronized animations, specifically providing utilities for the interpolation of SVG attributes. The library enables the creation of parallax scrolling and interactive web storytelling by mapping scroll offsets to specific style values. It allows for the development of non-linear movement and dynamic SVG effects through the use of custom HTML attributes that define keyframes. The system covers
Modifies standard HTML element attributes dynamically as the user scrolls to create visual effects.
Velocity is a JavaScript animation library used to create high-performance CSS and SVG animations. It functions as a CSS property interpolator and a spring physics engine, enabling the creation of smooth visual transitions and organic movement for web elements. The project provides a programmatic interface for modifying vector attributes and 3D transformations through its SVG animation framework. It further distinguishes itself as an animation sequence orchestrator, allowing for the chaining of movements and the staggering of start times across multiple elements using promises. The library c
Calculates element positions using mass, stiffness, and damping constants to simulate natural physical movement.
lottie-react-native is a React Native animation library and cross-platform vector animation engine used to render high-quality animations exported from After Effects via the Lottie file format. It functions as a Lottie animation player that allows mobile applications to display hardware-accelerated animations that maintain visual quality across different screen resolutions. The library serves as a dynamic animation controller, enabling the manipulation of playback, color filters, and text layers in real time. It provides the ability to change animation colors and visuals by applying filters t
Includes tools for updating animation parameters, color filters, and text states during active execution.
Spring is a Swift animation library and iOS view animation framework. It provides a spring physics animation engine designed to generate realistic, organic motion for user interface movements. The framework utilizes a declarative animation interface, allowing developers to define animation properties and behaviors without writing complex imperative code. This includes a declarative animation workflow where motion is configured through visual storyboards. The system manages iOS UI animations and Swift view transitions, specifically automating how views appear and disappear through triggered a
Implements a motion model based on physics to simulate natural, organic movement for user interface transitions.
Cropper.js is a JavaScript image cropping library and client-side image editor. It provides a front-end interface for manipulating image geometry and extracting specific regions using the HTML5 Canvas API. The library enables interactive image cropping where users can manually select areas and define clipping regions. It supports geometry transformations including rotation, scaling, and zooming to align subjects, and allows for the enforcement of dynamic aspect ratios. The tool provides capabilities for exporting crop data as coordinates or canvas representations and offers access to interna
Employs CSS3 transformations for image rotation and scaling to align subjects without modifying source data.
iscroll is a JavaScript smooth scrolling library and web interaction framework. It provides a 2D web panning controller and a CSS transform zoom engine to manage inertial scrolling, panning, and zooming for web elements across different devices. The project enables the implementation of custom scrollbar interfaces and navigation maps that track the current viewport position. It supports the creation of interactive web carousels with element snapping, web parallax effects, and content scaling via pinch-to-zoom or mouse-wheel inputs. The library covers a broad range of interaction capabilities
Adjusts the visual size of content using CSS transform scales while recalculating the available scrollable area.
canvas-confetti is an HTML5 canvas animation library and browser particle effect engine designed to render celebratory confetti bursts. It functions as a visual effects tool that transforms SVG paths, emojis, and text into animated particles. The library offloads heavy particle calculations to a web worker to maintain main thread responsiveness and prevent the user interface from lagging. It includes built-in support for operating system reduced motion settings, automatically disabling animations for users with motion sensitivities to ensure accessibility compliance. The system supports conf
Supports binding animations to specific HTML canvas elements rather than the entire window.
Muuri is a JavaScript grid layout library and draggable UI framework used to create responsive grids with drag-and-drop reordering, sorting, and animated filtering. It features a nested grid system that allows full grid instances to be embedded inside other grid items to create hierarchical structures. The library uses a web worker layout engine to offload heavy coordinate calculations to background threads, maintaining interface responsiveness during complex rearrangements. The system provides interactive capabilities for moving items between multiple containers, filtering visibility based
Uses CSS translate transforms to achieve high-performance animations during grid layout shifts.
React Sortable Hoc is a library for building drag-and-drop reorderable lists and grids within web applications. It provides a set of reusable components designed to integrate into the component-based architecture of React, allowing users to rearrange elements through mouse or touch input. The library utilizes a higher-order component pattern to inject drag-and-drop state management into existing list components without requiring modifications to the underlying implementation. It employs portal-based ghost rendering to move elements outside the normal document flow, while using hardware-accele
Updates element positions using hardware-accelerated CSS transforms to ensure smooth movement during drag-and-drop interactions.