7 个仓库
Mechanisms for animating visual elements as they move between different pages or application states.
Distinguishing note: Focuses on cross-page visual continuity rather than generic UI component state management.
Explore 7 awesome GitHub repositories matching user interface & experience · Shared Element Transitions. Refine with filters or upvote what's useful.
React 是一个用于构建用户界面的 JavaScript 库,采用组件化架构和单向数据流。
Links mounting and unmounting components to animate visual continuity between UI states.
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
Tracks components across different states or pages using unique identifiers to automatically animate transitions between distinct visual contexts.
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
Connects distinct visual elements using identifiers to animate transitions between them, including cross-fading and structural handling.
Hero is a transition framework and animation toolkit for iOS and tvOS designed to create fluid visual continuity between screens. It provides a shared element animation library that interpolates the position and size of views across different screens using unique identifiers. The framework includes an interactive transition controller that binds navigation progress to manual gestures and user input events in real time. It utilizes a system for calculating animation durations based on element distance and size to maintain a consistent sense of motion speed. The toolkit covers global coordinat
Implements a system for interpolating the position and size of views across different screens using unique identifiers.
This is a comprehensive library of code examples and reference implementations for building cross-platform user interfaces with Flutter. The project provides a collection of demo applications and guides designed to illustrate the implementation of design patterns, animation techniques, and testing workflows. The repository features specific demonstrations for native integration, including examples of embedding modules into existing native applications, using platform channels, and bridging native code with the framework. It also serves as an animation reference, providing implementations for
Animates specific widgets moving between screens to create seamless visual continuity during navigation.
Material-Animations is a Java-based library for coordinating activity transitions, property animations, and reveal effects within Android mobile user interfaces. It provides a framework for automating visual updates whenever view properties or layout configurations are modified. The project implements high-level patterns for shared element transitions, linking independent views across different sections to simulate a single moving element. It also includes circular reveal masking to unveil content from a specific focal point and coordinate-based view mapping to execute translation and scaling
Links identical view identifiers across different layouts to create seamless visual continuity during scene shifts.
react-flip-toolkit 是一个基于坐标的过渡框架和 React 布局动画库。它使用 magic-move 技术来计算元素位置,通过插值和物理效果防止布局偏移期间的突兀跳动。 该库提供了一个基于弹簧的运动引擎,使用刚度和阻尼设置来为布局和样式变化创建自然运动。它包含用于共享元素过渡的专用工具,这些工具协调跨客户端路由变化的视觉移动,以保持不同页面之间的连续性。 该系统涵盖了布局过渡动画和非布局属性插值。它通过交错动画序列管理时序,并包含变换中和功能,以防止父容器缩放时子元素变形。该框架还提供动画回调触发器,以在特定的生命周期里程碑执行逻辑。
Coordinates visual continuity for shared elements moving across different pages during route changes.