Stroll.js

stroll.js is a frontend UI animation library designed to transform standard web lists into three-dimensional scrolling displays. It functions as a tool for creating depth-based perspectives using CSS3 transforms.

The library specializes in 3D web animations and interactive list design. It implements visual effects that respond to user movement, adding spatial depth and perspective to list elements as they are navigated.

Features

3D Depth Effects - Transforms standard lists into 3D scrolling displays using rotations and zoom to create spatial depth.
3D Perspective Transforms - Implements three-dimensional depth and tilting effects on list elements using CSS transforms.
3D Transform Animations - Animates 3D CSS transforms like rotateX and translateZ to create depth-based motion effects for lists.
Dynamic Scrolling Lists - Builds dynamic scrolling lists that react to user movement to provide an engaging visual experience.
Scroll-Offset Tracking - Tracks scroll distance to translate the positions of list items and trigger depth-based visual transitions.
3D Scroll Libraries - Implements a JavaScript library that creates three-dimensional scrolling perspectives for lists using CSS3 transforms.
Animation Libraries - Provides a lightweight utility for adding motion and spatial effects to web-based list elements.
Proximity-Based Scaling - Adjusts the scale and opacity of list items based on their proximity to the center of the view.
CSS3 Hardware-Accelerated Animations - Leverages GPU-accelerated CSS3 properties to create immersive and modern visual transforms for web content.
Staggered Animation Offsets - Calculates unique animation offsets based on an item's position in the list to create staggered visual effects.
Style Object Injection - Directly modifies the element style object in real time to trigger visual state changes based on scroll position.
Scroll Effects - CSS-based list scroll effects.
动画(Animate) - Listed in the “动画(Animate)” section of the Awesome Frontend awesome list.

Star history

hakimelstroll.js

Name: hakimel/stroll.js
Author: hakimel

View on GitHub

4,342 stars708 forksHTMLMIT14 viewslab.hakim.se/scroll-effects

Stroll.js

Features

3D Depth Effects - Transforms standard lists into 3D scrolling displays using rotations and zoom to create spatial depth.
3D Perspective Transforms - Implements three-dimensional depth and tilting effects on list elements using CSS transforms.
3D Transform Animations - Animates 3D CSS transforms like rotateX and translateZ to create depth-based motion effects for lists.
Dynamic Scrolling Lists - Builds dynamic scrolling lists that react to user movement to provide an engaging visual experience.
Scroll-Offset Tracking - Tracks scroll distance to translate the positions of list items and trigger depth-based visual transitions.
3D Scroll Libraries - Implements a JavaScript library that creates three-dimensional scrolling perspectives for lists using CSS3 transforms.
Animation Libraries - Provides a lightweight utility for adding motion and spatial effects to web-based list elements.
Proximity-Based Scaling - Adjusts the scale and opacity of list items based on their proximity to the center of the view.
CSS3 Hardware-Accelerated Animations - Leverages GPU-accelerated CSS3 properties to create immersive and modern visual transforms for web content.
Staggered Animation Offsets - Calculates unique animation offsets based on an item's position in the list to create staggered visual effects.
Style Object Injection - Directly modifies the element style object in real time to trigger visual state changes based on scroll position.
Scroll Effects - CSS-based list scroll effects.
动画(Animate) - Listed in the “动画(Animate)” section of the Awesome Frontend awesome list.

Open-source alternatives to Stroll.js

Similar open-source projects, ranked by how many features they share with Stroll.js.

tictail/bounce.js
tictail/bounce.js
6,165View on GitHub
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
CSS
View on GitHub6,165
daniel-lundin/snabbt.js
daniel-lundin/snabbt.js
5,175View on GitHub
snabbt.js is a JavaScript motion framework and CSS transform animation library used to create high-performance animations for DOM elements. It functions as a 3D CSS animation engine and a matrix-based geometry toolkit for calculating precise translations, rotations, scales, and skews. The framework provides a user-driven animation controller that allows animation progress to be tied to manual user input rather than standard time-based playback. It enables the simulation of depth and perspective by animating HTML elements into three-dimensional shapes. The system covers motion orchestration t
JavaScript
View on GitHub5,175
visionmedia/move.js
visionmedia/move.js
4,698View on GitHub
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
JavaScript
View on GitHub4,698
gijsroge/tilt.js
gijsroge/tilt.js
3,862View on GitHub
tilt.js is a jQuery plugin and mouse-driven animation library used to create 3D parallax effects and interactive rotations on web elements. It functions as a frontend interaction tool that maps cursor coordinates to rotation angles, simulating three-dimensional perspective and spatial depth. The library features a dynamic glare overlay that simulates light reflection on a surface, mimicking materials such as glass or glossy plastic. It also implements layered parallax offsetting to shift inner elements along different axes, creating a perceived sense of depth as the main container rotates. T
JavaScriptjqueryparallaxtilt
View on GitHub3,862

See all 30 alternatives to Stroll.js

Frequently asked questions

What does hakimel/stroll.js do?

What are the main features of hakimel/stroll.js?

The main features of hakimel/stroll.js are: 3D Depth Effects, 3D Perspective Transforms, 3D Transform Animations, Dynamic Scrolling Lists, Scroll-Offset Tracking, 3D Scroll Libraries, Animation Libraries, Proximity-Based Scaling.

What are some open-source alternatives to hakimel/stroll.js?

Open-source alternatives to hakimel/stroll.js include: tictail/bounce.js — bounce.js is a JavaScript library and programmatic wrapper for generating and applying CSS3 keyframe animations and 3D… daniel-lundin/snabbt.js — snabbt.js is a JavaScript motion framework and CSS transform animation library used to create high-performance… visionmedia/move.js — move.js is a JavaScript motion engine and CSS3 animation framework designed to animate DOM elements. It functions as a… gijsroge/tilt.js — tilt.js is a jQuery plugin and mouse-driven animation library used to create 3D parallax effects and interactive… micku7zu/vanilla-tilt.js — vanilla-tilt.js is a JavaScript 3D tilt library used to animate web elements in 3D space. It functions as an… gskinnerteam/flutter_vignettes — This project is a collection of reference implementations and experimental user interface components. It serves as a…