patrickkunka/mixitupArchived
Mixitup
Mixitup is a dependency-free DOM element animation library and grid layout engine. It serves as a client-side content filter and data-driven UI controller designed to manage the smooth visual transition of HTML elements during insertion, removal, and sorting operations.
The system specializes in creating interactive gallery interfaces and dynamic content filtering. It allows for the reorganization of elements using custom attributes or random sequences, while synchronizing the arrangement and visibility of interface elements with an underlying data model.
Beyond filtering and sorting, the library covers DOM element management, including the dynamic insertion and removal of targets. It provides capabilities for animating container resizing, defining custom animation effects, and utilizing non-linear staggers for element appearances.
Features
- Dynamic Layout Filtering - Provides mechanisms for showing or hiding layout elements based on criteria with smooth animated transitions.
- Animated Grid Layouts - Updates the visual arrangement by switching layout CSS classes and animating target positions.
- Transition Animation Engines - Applies visual transitions and loading animations when elements are filtered, sorted, or moved.
- Visual Attribute Filtering - Hides or shows HTML elements based on attribute selectors using logical operators or user input.
- Data-Driven State Management - Maintains an internal data representation of element states to calculate layout changes before updating the DOM.
- UI Element Sorting - Implements logic to animate the reorganization and sorting of UI elements within a container.
- Coordinate-Based Layout Transitions - Implements a coordinate-calculation system to animate elements smoothly from their old positions to new layout coordinates.
- Attribute-Based Sorting - Rearranges targets based on data-attributes, predefined sort strings, or custom arrays.
- Data-Reactive Element Animators - Animates DOM elements by interpolating between states in response to data model changes.
- Visual Element Filtering - Allows showing only targets matching a specific CSS selector using animated transitions.
- Data-Driven UI Controllers - Controls insertion, removal, sorting, and pagination by updating a dataset instead of manipulating the DOM.
- DOM Content Filters - Offers client-side utilities to hide or remove specific page elements based on CSS selectors and data attributes.
- Layout Animation Engines - Functions as a layout animation engine that calculates and animates visual transitions when elements change position or order.
- State-Driven UI Controllers - Provides a management layer for tracking and styling UI elements based on the state of a data model.
- Data-Driven Layouts - Provides a layout system where the visual arrangement of elements is synchronized with an external data source.
- DOM Element Data Binding - Performs filtering, sorting, insertion, and removal by updating a data model instead of querying the DOM.
- DOM Element Manipulators - Implements tools for programmatically adding, removing, and moving HTML elements within the browser DOM.
- Filterable Portfolio Galleries - Enables the creation of visual collections that can be instantly reorganized and filtered, such as portfolio galleries.
- DOM Element Inserters - Adds new target elements to the container at specific indices or relative to reference elements.
- DOM Element Removers - Deletes target elements from the container using a reference, CSS selector, or numeric index.
- Object State Syncing - Updates the container contents and order based on a provided array of data objects.
- Animation Staggering - Uses a custom function to determine the order and timing of delays for sequential element appearances.
- Custom Animation Effects - Provides capabilities to define custom CSS properties, 3D perspectives, and transition effects for element animations.
- Runtime Request Queues - Sequences multiple filter or sort requests to execute sequentially instead of ignoring new requests during active animations.
- Animation Sequence Promises - Wraps asynchronous layout transitions in promises to signal when a sequence of movements has fully completed.
- Operation Sequence Queues - Buffers incoming filter and sort requests to ensure they execute in order without interrupting active animations.
- Animation Lifecycle Callbacks - Provides hooks that execute custom logic at specific stages of an animation sequence.
- Batched Layout Operations - Executes filtering, sorting, and layout changes simultaneously within a single animated sequence.
- Data-to-UI Bindings - Binds a data model to UI elements using unique identifiers to re-render targets when data changes.
- Animated Expandable Containers - Transitions the height and width of the parent container smoothly as target elements are added or removed.
- Controller Binding - Links JavaScript logic controllers to DOM elements via specific HTML attributes to trigger filtering and sorting.
- Event Delegation Systems - Uses a single listener on the container to connect HTML data attributes to internal methods for better performance.
- General Utilities - Filtering and sorting plugin for UI elements.
