awesome-repositories.com
Blog
MCP
awesome-repositories.com

Discover the best open-source repositories with AI-powered search.

ExploreCurated searchesOpen-source alternativesSelf-hosted softwareBlogSitemap
ProjectMCP serverAboutHow we rankPress
LegalPrivacyTerms
© 2026 Bringes Technology SRL·VAT RO45896025·hello@awesome-repositories.com

CSS center zoom animation

Ranking updated Jul 27, 2026

For center expansion effects, the first results are visionmedia/move.js (Move.js provides JavaScript-driven CSS3 property transitions and sequential easing control for DOM elements, making it a fitting choice for programmatic web animations even if it lacks out-of-the-box radial outward expansion effects), rich-harris/ramjet (Ramjet is a JavaScript element-morphing and animation library that handles smooth visual transitions between interface states, fitting the search for engaging web UI effects) and popmotion/popmotion. julianshapiro/velocity and daniel-lundin/snabbt.js round out the shortlist. Compare the match explanations and check the project documentation against your requirements.

Hand-picked CSS center zoom animation libraries, ranked by stars and activity. Compare the top alternatives and find the best fit.

CSS center zoom animation

Find the best repos with AI.We'll search the best matching repositories with AI.
  • visionmedia/move.jsvisionmedia avatar

    visionmedia/move.js

    4,698View on GitHub↗

    move.js is a JavaScript motion engine and CSS3 animation framework designed to animate DOM elements. It functions as a DOM animation library that changes visual element properties and colors over time. The library serves as a CSS bezier easing controller, using cubic-bezier curves to manage animation acceleration and deceleration. It enables sequential motion design, allowing multiple visual steps to execute in a specific order. The framework covers the animation of element properties such as position, rotation, scale, skew, and colors. It provides capabilities for UI component transitions a

    Move.js provides JavaScript-driven CSS3 property transitions and sequential easing control for DOM elements, making it a fitting choice for programmatic web animations even if it lacks out-of-the-box radial outward expansion effects.

    JavaScriptEasing FunctionsEasing Control
    View on GitHub↗4,698
  • rich-harris/ramjetRich-Harris avatar

    Rich-Harris/ramjet

    5,438View on GitHub↗

    Ramjet is a JavaScript animation engine and DOM element morphing library. It functions as a transition utility that animates movements and dimensions between different HTML elements to create visual shifts between interface states. The library specializes in cross-tree element morphing, which allows it to animate the position and dimensions of one element to match another regardless of their relative location in the document hierarchy. It achieves this by calculating visual offsets and utilizing a customizable cloning mechanism to create temporary visual proxies. The system manages organic m

    Ramjet is a JavaScript element-morphing and animation library that handles smooth visual transitions between interface states, fitting the search for engaging web UI effects.

    JavaScriptAnimation Easing FunctionsEasing Functions
    View on GitHub↗5,438
  • popmotion/popmotionPopmotion avatar

    Popmotion/popmotion

    20,171View on GitHub↗

    Popmotion is a JavaScript animation library and declarative motion engine designed for creating programmatic motion and interactive transitions within web user interfaces. It provides a functional animation API that allows developers to define complex animation sequences through configuration objects rather than manual frame management. The engine utilizes a functional approach to animate user interface elements, implementing spring-based physics simulations to mimic real-world momentum. It employs interpolation-based value mapping and functional transformations to translate animation progres

    Popmotion is a JavaScript animation library that provides spring physics, value interpolation, and programmatic motion primitives, making it a strong tool for building custom UI transitions and effects even though it requires manual integration rather than offering out-of-the-box CSS expansion components.

    JavaScriptAnimation LoopsInteraction Feedback Effects
    View on GitHub↗20,171
  • julianshapiro/velocityjulianshapiro avatar

    julianshapiro/velocity

    17,217View on GitHub↗

    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

    Velocity is a high-performance JavaScript animation library providing CSS property interpolation and spring physics, though it is a general animation engine rather than a tool built specifically for center-outward expansion effects.

    JavaScriptAnimation Easing FunctionsAnimation Loop Orchestrators
    View on GitHub↗17,217
  • daniel-lundin/snabbt.jsdaniel-lundin avatar

    daniel-lundin/snabbt.js

    5,175View on GitHub↗

    snabbt.js is a JavaScript motion framework and CSS transform animation library used to create high-performance animations for DOM elements. It functions as a 3D CSS animation engine and a matrix-based geometry toolkit for calculating precise translations, rotations, scales, and skews. The framework provides a user-driven animation controller that allows animation progress to be tied to manual user input rather than standard time-based playback. It enables the simulation of depth and perspective by animating HTML elements into three-dimensional shapes. The system covers motion orchestration t

    Snabbt.js is a lightweight JavaScript motion framework that handles DOM transformations and 3D animations, fitting the category well despite lacking specialized built-in radial expansion presets.

    JavaScriptEasing Functions
    View on GitHub↗5,175
  • juliangarnier/animejuliangarnier avatar

    juliangarnier/anime

    69,932View on GitHub↗

    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

    This project is a powerful JavaScript animation engine that provides performant rendering, customizable easing, and timeline sequencing, though it is a general-purpose motion library rather than one focused specifically on outward-expanding transitions.

    JavaScriptAnimation Easing FunctionsAnimation Loops
    View on GitHub↗69,932
  • greensock/gsapgreensock avatar

    greensock/GSAP

    23,877View on GitHub↗

    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

    GSAP is a robust JavaScript animation library that provides comprehensive transition effects, timeline orchestration, and customizable easing, though expanding outward from a central point for page transitions would require custom implementation atop its core motion engine.

    JavaScriptAnimation Easing FunctionsEasing Functions
    View on GitHub↗23,877
  • pmndrs/react-springpmndrs avatar

    pmndrs/react-spring

    29,115View on GitHub↗

    React-spring is a physics-based animation library designed to create fluid, natural motion for user interface elements and three-dimensional objects. It functions as a declarative motion framework that maps state changes to animated property values, utilizing spring physics—defined by mass, tension, and friction—rather than traditional time-based easing functions to calculate transitions. The library distinguishes itself through a rendering-agnostic architecture that decouples animation logic from specific UI frameworks, allowing for consistent application across web interfaces, 3D scenes, an

    React-spring is a physics-based animation library that handles UI transitions and motion effects declaratively, though its spring-physics approach focuses more on fluid natural motion than specifically expanding outward from a central point.

    TypeScriptDeclarative UI Motion FrameworksPhysics-Based Animation LibrariesComponent Animation Hooks
    View on GitHub↗29,115
  • motiondivision/motionmotiondivision avatar

    motiondivision/motion

    32,375View on GitHub↗

    Motion is a high-performance animation library that provides a unified, declarative architecture for managing visual transitions and motion states across web interfaces. By utilizing a lightweight engine, it allows developers to define complex animations through component properties rather than manual DOM manipulation, ensuring consistent behavior across various component-based frameworks and vanilla JavaScript environments. The library distinguishes itself through a sophisticated physics-based motion engine that simulates natural movement using mass, damping, and stiffness parameters. It inc

    Motion is a high-performance declarative animation library that offers robust physics-based motion and layout transition engines, making it well-suited for building complex UI effects and interactive visual transitions across web frameworks.

    TypeScriptAnimation EnginesAnimation FrameworksAnimation Libraries
    View on GitHub↗32,375
  • framer/motionframer avatar

    framer/motion

    32,388View on GitHub↗

    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

    Framer Motion is a comprehensive React animation library that handles hardware-accelerated transitions and interactive triggers, though it provides general motion management rather than focusing specifically on expanding outward from a central point.

    TypeScriptAnimation Prop AbstractionsGesture Interaction LibrariesHardware-Accelerated Engines
    View on GitHub↗32,388
  • davidhdev/react-bitsDavidHDev avatar

    DavidHDev/react-bits

    41,207View on GitHub↗

    React-bits is a comprehensive toolkit for web development that combines a library of interactive motion primitives with a command-line interface for component management and AI-assisted coding. It provides a framework for implementing declarative motion states and specialized typography animations, allowing developers to build responsive, gesture-enabled interfaces that respond to user input. The project distinguishes itself through a remote registry system that allows for the direct injection of modular UI source code into local project directories. It also features a protocol-based bridge t

    React-bits is a component library and motion toolkit for React featuring transitions, interactive elements, and visual effects, though it lacks specialized focus on center-origin expansion transitions.

    JavaScriptComponent Management ToolsComponent RegistriesMotion State Management
    View on GitHub↗41,207
  • argyleink/transition.cssargyleink avatar

    argyleink/transition.css

    2,020View on GitHub↗

    Transition.css is a CSS animation library and declarative UI animation framework that provides pre-built entry and exit animations triggered directly by HTML attributes without requiring custom JavaScript. It functions as a CSS transition toolkit, supplying customizable animation sequences and geometry primitives designed for rapid web interface prototyping. The library enables users to apply page and element transitions, trigger pre-built visual effects, and compose custom transitions by combining raw keyframes with custom state properties. Animation timing, delays, pacing curves, and transi

    This library provides drop-in CSS transitions that can be used for page and element visual effects, though it lacks interactive JavaScript triggers and customizable easing out of the box.

    CSSCSS Animation UtilitiesCSS StylingCSS Toolkits
    View on GitHub↗2,020
  • h5bp/effeckt.cssh5bp avatar

    h5bp/Effeckt.css

    10,817View on GitHub↗

    Effeckt.css is a hardware-accelerated CSS animation library and UI transition framework. It provides a collection of styles designed to create smooth element entrances, exits, and attention-grabbing visual effects while preventing visual stuttering during interface transitions. The library focuses on high-performance animations using GPU-accelerated properties to ensure fluid movement. It enables the simulation of application navigation by sliding page views in and out of the viewport from specified directions. The framework covers a suite of visual capabilities, including directional entran

    Effeckt.css is a hardware-accelerated CSS animation library that provides UI transition effects and smooth element entrances, fitting the animation library category well despite missing explicit interactive JavaScript triggers in its core feature set.

    CSSCSS Animation ClassesCoordinate-Based Slide TransitionsCSS Animation Libraries
    View on GitHub↗10,817
  • minimac/magicminiMAC avatar

    miniMAC/magic

    8,601View on GitHub↗

    Magic is a CSS animation library and visual effects framework providing a collection of predefined motion styles for moving, rotating, and transforming web elements. It serves as a build-time CSS optimizer that compiles only the specific animation styles used in a project to minimize the final stylesheet size. The framework enables interactive user interface development by allowing animations to be triggered programmatically through scripts, hover events, or timing delays. It utilizes a system of timing and motion classes to manage the duration and speed of visual transitions. The project co

    Magic is a CSS animation and visual effects library offering predefined motion styles and interactive triggers, making it a fitting tool for adding dynamic transitions though it lacks a specialized center-outward expansion focus.

    SCSSPredefined Animation EffectsBundle OptimizersCSS Animation Classes
    View on GitHub↗8,601
  • joshwcomeau/react-flip-movejoshwcomeau avatar

    joshwcomeau/react-flip-move

    4,139View on GitHub↗

    react-flip-move is a React animation library designed for animating DOM element transitions and list reordering using the FLIP technique. It functions as a layout transition component and a DOM transition utility to create smooth movement during state changes. The library specializes in hardware-accelerated transitions for elements as they are added, removed, or reordered within a list. It employs bounding-box position tracking to calculate layout shifts and supports staggered animation timing to create sequenced visual flows. Its capability surface covers layout transition orchestration, in

    This React library implements the FLIP technique for smooth list reordering and DOM layout transitions, fitting the animation category well even though it focuses on bounding-box layout shifts rather than radial outward expansions.

    JavaScriptLayout Transition EnginesReordering AnimationsElement Transitioning Mechanisms
    View on GitHub↗4,139
  • airbnb/lottieairbnb avatar

    airbnb/lottie

    4,922View on GitHub↗

    Lottie is a JSON vector animation engine and cross-platform player that renders resolution-independent motion graphics. It functions as a runtime renderer that translates Adobe After Effects compositions into real-time animations using a JSON-based intermediate representation. The project distinguishes itself by enabling dynamic control over vector assets at runtime. It allows for the programmatic modification of animation properties, colors, and playback states through hierarchical key-paths and dynamic theming. This allows animations to respond to real-time application state changes and use

    Lottie is a robust vector animation engine that renders After Effects compositions into performant web animations, though its animations are not specifically built to expand outward from a central point for page transitions.

    HTMLAfter Effects RenderersAnimation Schema ParsersAnimation Schemas
    View on GitHub↗4,922
Compare the top 10 at a glance
RepositoryStarsLanguageLicenseLast push
visionmedia/move.js4.7KJavaScript—Mar 11, 2022
rich-harris/ramjet5.4KJavaScriptMITFeb 9, 2017
popmotion/popmotion20.2KJavaScript—Mar 12, 2024
julianshapiro/velocity17.2KJavaScriptMITOct 24, 2020
daniel-lundin/snabbt.js5.2KJavaScriptMITSep 10, 2016
juliangarnier/anime69.9KJavaScriptMITApr 30, 2026
greensock/gsap23.9KJavaScript—Dec 12, 2025
pmndrs/react-spring29.1KTypeScriptMITJun 23, 2026
motiondivision/motion32.4KTypeScriptMITJun 12, 2026
framer/motion32.4KTypeScriptMITJun 12, 2026

Related searches

  • UI expansion animation
  • Rotation transition animations
  • Parallax animation library
  • CSS animation library
  • Image inpainting
  • Animation engine
  • a tool for horizontal component scaling
  • a library for creating CSS animations