blivesta/animsition
Animsition
Animsition is a CSS page transition library and frontend motion framework designed to create fluid visual effects, such as fades and zooms, between web pages. It functions as a DOM navigation animator that manages the timing and sequence of page removal and insertion to provide continuous movement between screens.
The system operates as a page overlay animator, utilizing a coordinate-based slide controller to move covering elements across the screen in specific directions. These overlays mask background changes during transitions to maintain visual continuity.
The framework leverages hardware-accelerated CSS animations triggered by style classes. It includes navigation hooks that intercept page change requests to ensure exit animations complete before new content loads.
Features
- Navigation Transitions - Creates fluid visual effects like fades and zooms specifically for navigating between screens.
- Navigation Animations - Manages the timing and sequence of page removal and insertion to provide seamless motion effects during navigation.
- UI Masking Layers - Employs absolutely positioned overlay layers to mask the swap between two pages.
- CSS Animation Classes - Provides pre-defined CSS animation classes to trigger fluid visual transitions between pages.
- Transition Sequencing Controls - Controls the timing and order of page removal and insertion during visual transitions.
- CSS Transitions - Implements hardware-accelerated visual effects and transitions between web pages using declarative CSS style rules.
- Overlay Transition Animations - Applies sliding overlay elements to mask the background during screen transitions.
- Coordinate-Based Slide Transitions - Calculates precise screen offsets to move overlay elements in cardinal directions during transitions.
- Curtain Transitions - Implements full-screen overlay animations that slide over the screen during page changes.
- Transition Element Sequencing - Manages the precise timing of adding and removing elements to coordinate seamless page swaps.
- Motion Design Frameworks - Provides a set of style-based transitions and hooks for implementing high-fidelity motion between application screens.
- CSS Animations - Provides a framework of style-based transitions to create fluid fades, zooms, and sliding motions using CSS animations.
- View Transition Motion - Creates the illusion of continuous movement between application views using coordinated animations.
- Hardware Acceleration Optimization - Optimizes performance by offloading animation rendering to the GPU via CSS transforms and opacity.
- Visual Navigation Transitions - Adds visual depth and seamless motion to the user experience when switching between different web views.
- State Class Mapping - Implements a system that toggles CSS classes to drive visual state transitions during page navigation.
- Navigation Hooks - Uses navigation hooks to intercept page changes and ensure exit animations complete.
- Navigation Event Interception Control - Intercepts browser navigation events to pause page loads until animations have finished.
- Animation Plugins - Simple CSS-based page transition effects.
