7 dépôts
Movement of UI elements using CSS transforms for smooth visual transitions.
Distinct from Coordinate Transformations: Unlike scientific coordinate transformations, this focuses on DOM element movement via CSS transforms.
Explore 7 awesome GitHub repositories matching user interface & experience · CSS Transform Translations. Refine with filters or upvote what's useful.
Glide is a dependency-free ES6 JavaScript library used to create responsive content sliders and carousels. It functions as a modular framework for implementing sliding content areas that adapt their layout and settings based on browser window breakpoints. The library is distinguished by a modular architecture that allows the inclusion of only necessary logic to reduce final bundle size. It separates core structural styles from thematic visual styles and utilizes a plugin system to extend the base slider functionality and lifecycle hooks. The component covers a range of interaction and naviga
Uses CSS transforms to create smooth visual transitions when shifting elements across the viewport.
Swipe is a JavaScript library for creating touch-based sliders and interactive carousels. It provides a gesture-based navigation tool for building swipeable content interfaces that support touch navigation on mobile and web browsers. The library distinguishes itself through the use of GPU-accelerated transitions and animation frames to ensure smooth motion. It implements a continuous looping effect, allowing content to wrap around seamlessly during navigation. The tool covers the synchronization of slide states with touch inputs and the execution of custom functions when transitions complete
Uses CSS transform translations and translate3d for smooth, GPU-accelerated movement of interface elements.
pulltorefresh.js is a JavaScript library and touch-gesture UI component used to add pull-to-refresh functionality to scrollable elements in web applications. It acts as a web interaction plugin that detects downward scrolling gestures to trigger content refresh actions. The library focuses on mobile web application user experiences, allowing developers to implement touch-based navigation and dynamic content refreshing that mimics native app behaviors on smartphones and tablets. The implementation includes configurable trigger distances and sensitivity thresholds. It utilizes touch-event trac
Implements smooth vertical movement of the refresh element using CSS transform translations.
Smooth-scrollbar is a customizable JavaScript library that replaces native browser scrollbars and scrolling behavior on target DOM elements with inertial momentum physics. It provides consistent cross-browser scrolling interfaces, hardware-accelerated visual translations, and dynamic thumb positioning. The library supports nested scroll container management, allowing outer containers to continue scrolling automatically when inner scrollable areas reach their boundary edges. It features a modular plugin architecture that enables third-party extensions to hook into core scroll events, track upd
Applies hardware-accelerated CSS transforms to smoothly translate content containers without triggering layout reflows.
Vue seamless scroll is a frontend animation library and Vue.js component designed to create continuous, infinite scrolling effects for lists and containers. It animates content in an endless loop without visual interruption or stuttering, supporting both horizontal and vertical scrolling directions. The library manages scrolling behavior through configuration options that adapt to various design layouts and speed requirements. It supports step-based content scrolling for controlled progression alongside continuous motion, letting developers configure scroll paths and operational parameters d
Animates layout offsets via hardware-accelerated matrix translations to maintain high frame rates during scrolling.
React Switch is an interactive form input element for capturing binary boolean choices in web applications. It functions as a reusable toggle switch component designed to assemble accessible layouts. The component supports custom styling, embedded icons, and smooth dragging interactions across both mouse and touch screen gestures. Developers can customize dimensions, colors, shadows, border radius, and active states. It also includes options to restrict user interaction and visually dim the presentation.
Applies hardware-accelerated CSS translation styles to animate the switch handle smoothly during dragging interactions.
React Magic Motion is a component-based library for React that automates layout transitions and visual movement. It functions as a declarative animation framework, allowing developers to apply smooth motion to UI elements without the need for manual keyframe management or complex state tracking. The library utilizes a layout-based animation technique that calculates the difference between element positions before and after state changes. By monitoring the component tree and DOM layout, it automatically triggers hardware-accelerated CSS transforms to animate shifts, reordering, and navigation
Provides smooth UI element movement by manipulating CSS transforms directly through the browser rendering engine.