Projects sharing features with SmoothState.js

Barba is a JavaScript page transition library that intercepts browser navigation to swap page content and animate transitions without a full page refresh. It functions as an AJAX page loader and client-side navigation manager, coordinating the lifecycle of transitions through hooks and custom logic during view changes. The library distinguishes itself as a frontend animation orchestrator that triggers specific visual effects and scripts based on the source and destination of a website page. It employs a rules-based system to resolve which specific animation or transition to execute by matchin

Hotwire Turbo is a server-driven navigation and HTML streaming framework that intercepts link clicks and form submissions to fetch pages in the background and replace content without full browser reloads. It provides a Turbo Frame component that scopes page regions into independent contexts, enabling partial page updates where only a specific area of the page navigates or loads content. The framework includes a page cache and morph system that stores recently visited pages for instant restoration and applies minimal DOM changes on refresh, preserving scroll position and element state. The fra

Turbolinks is a JavaScript library that accelerates HTML page transitions by replacing the page body via network requests instead of performing full browser refreshes. It functions as a client-side navigation manager that intercepts link clicks and controls the page visit lifecycle to simulate a single-page application experience. The library synchronizes the browser URL and history stack with partial page updates and utilizes a caching mechanism to store visited page states. This allow for instant previews and restoration of state when navigating backward or forward. It also includes a tool

page.js is a client-side JavaScript router for single-page applications that maps URL patterns to executable functions. It functions as a navigation engine and browser history manager, implementing a middleware-based path-mapping system similar to the Express web framework. The library distinguishes itself through an Express-style router model, utilizing a middleware callback chain and a shared context object to pass data between navigation handlers. It supports advanced window management, allowing for multiple router instances to handle navigation independently across different windows or em

instant.page is a client-side JavaScript library that preloads linked pages on hover or touch interactions, making navigation feel instantaneous without consuming unnecessary bandwidth. It works by starting to fetch a page the moment a user hovers over a link for 65 milliseconds, leaving over 300 milliseconds for the page to load before the click, and similarly preloads on touch start for mobile visitors. The script offers multiple preloading strategies to balance responsiveness with resource conservation. It can be configured to preload on mousedown, when links become visible in the viewport

This project is a collection of technical demonstrations and prototypes that showcase various HTML5 APIs, multimedia capabilities, and web standard implementations. It serves as a frontend technology sandbox and a gallery of implementation proofs-of-concept for modern browser features. The collection includes specialized showcases for HTML5 multimedia, featuring the manipulation of audio, video, and real-time media streams. It also provides a series of experiments focused on prototyping web capabilities to verify technical feasibility and browser support in live environments. The project cov

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

React particles animation background component

A jquery plugin for CSS3 text animations.

tsparticles is a JavaScript particle engine and canvas visual effects toolkit used to create animated particle systems, interactive backgrounds, and web animations. It functions as a web animation library that provides a set of compatible wrappers for integration into React, Vue, Angular, and Svelte applications. The engine includes pre-built animation patterns for celebratory effects, such as confetti explosions and fireworks. It allows for the creation of custom JavaScript visualizations through a plugin system that enables the development of specialized shapes and behaviors. The toolkit s

One property, two values, endless possiblities

dynamics.js is a physics-based JavaScript animation engine designed to create spring and bounce animations. It utilizes the browser animation frame loop to ensure motion is synchronized with the refresh rate. The engine includes tools for animation debugging, allowing users to slow down or freeze active motions to tune parameters. It also features a timing mechanism that executes callbacks synchronized with the animation frame rate to prevent visual stuttering. The project provides a physics solver based on mass, stiffness, and damping constants. Additionally, it includes a utility for apply

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

Animate.css is a CSS animation library and browser-based motion framework. It provides a collection of pre-made animations and motion effects used to add visual movement to web elements across different browsers. The library is designed as an accessibility-aware system that automatically disables animations when the operating system has a reduce motion setting enabled. This ensures that web motion respects user preferences for accessibility. The framework covers front-end visual effects and cross-browser UI styling. It utilizes a utility-first architecture with predefined style classes to ma

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

The Simplest Way to shuffle through images in a Creative Way

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

The Cube is an experiment with CSS3 transitions.

This project is a jQuery plugin and animation extension that enables hardware-accelerated CSS3 transitions and transformations. It serves as a wrapper that shifts animation logic from script-based updates to native browser style transitions. The library provides tools for managing the scale, rotation, and orientation of page elements. It uses relative-value coordinate calculations to handle element movement and maps generic transformation properties to browser-specific vendor prefixes. The capability surface covers high-performance visual effects, including the management of timing and easin

bounce.js is a JavaScript library and programmatic wrapper for generating and applying CSS3 keyframe animations and 3D transformations. It provides a tool for creating complex animation sequences without the need to write manual stylesheet rules. The library allows for the creation of animations by chaining scale, rotation, translation, and skew transformations. These generated sequences can be saved under unique names for reuse across multiple elements. The system manages the animation lifecycle through callback functions that trigger when a visual sequence completes. It also includes a com

particles.js is a JavaScript particle animation library and visual effects engine used to create interactive, canvas-based simulations for web interfaces. It enables the generation of dynamic background animations and networked visual effects through coordinate-based particle movements. The library features a system for drawing connecting lines between particles based on proximity to create network-style visualizations. It includes mechanisms for mapping mouse movements and click events to specific particle behaviors, such as attraction or repulsion. Users can configure particle density, opa

:dizzy: TransitionEnd is an agnostic and cross-browser library to work with transitionend event.

Infinite-ajax-scroll is a JavaScript library that automatically appends subsequent pages of content as users scroll down a webpage, turning standard pagination into infinite scrolling. It transforms traditional multi-page website pagination into continuous loading flows by fetching and inserting next-page items directly into active container elements. The library includes a pagination parser that extracts next-page anchor links and container structures directly from existing static markup without requiring backend changes. It monitors scroll positions relative to document boundaries to automa

jquery-pjax is a client-side library that combines Ajax requests with the HTML5 History API to replace page content without triggering a full browser reload. It fetches HTML fragments from the server and updates the browser URL using pushState, preserving the page layout and assets while only swapping a designated container's content. The library emits custom JavaScript events at each stage of the request lifecycle, enabling external handlers to respond to loading, success, and error states. The project distinguishes itself through its event-driven navigation model and server-side integration

This library is a browser history API wrapper and client-side routing state manager. It provides a programmatic interface for managing the browser session history stack and synchronizing application state changes with the URL. The project functions as a JavaScript session history manager that enables custom navigation and routing control. It handles the synchronization of client-side routing state to ensure consistent back and forward movements within the browser. The system covers broader capabilities including browser session history management and general JavaScript navigation control.

Choo is a minimalist frontend framework providing a tiny foundation for building web applications. It functions as an event-driven application core that decouples business logic from rendering and includes a client-side router to manage browser history and URL mapping without page reloads. The project distinguishes itself through an architecture that combines a server-side rendering engine for generating static HTML strings with a stateful UI component library. This allows for the creation of self-contained interface elements that maintain internal data and persist across global renders. The

Infinite Scroll is a JavaScript library that automatically loads and appends the next page of content when a user scrolls near the bottom of a container, or optionally when they click a button. It provides scroll-based pagination that fetches and inserts subsequent pages of content, with URL-driven content loading that determines next page URLs from selectors, templates, or custom functions. The library integrates with browser history, updating the URL and history state as new pages load while preserving scroll position so each page state is bookmarkable and refreshable. It is compatible with