Convert Figma logo to code with AI

pbakaus logoscroller

Accelerated panning and zooming for HTML and Canvas

3,891
422
3,891
35

Top Related Projects

Accelerated panning and zooming for HTML and Canvas

12,874

Smooth scrolling for the web

The javascript library for magical scroll interactions.

🛤 Detection of elements in viewport & smooth scrolling with parallax.

17,573

High performance and SEO friendly lazy loader for images (responsive and normal), iframes and more, that detects any visibility changes triggered through user interaction, CSS or JavaScript without configuration.

A lightweight script to animate scrolling to anchor links.

Quick Overview

Scroller is a JavaScript library for creating smooth scrolling experiences and scroll-based animations. It provides a high-performance scrolling engine that can handle complex animations and interactions tied to scroll positions, making it ideal for creating engaging single-page websites and interactive storytelling experiences.

Pros

  • High performance and smooth scrolling even on mobile devices
  • Supports both vertical and horizontal scrolling
  • Allows for complex animations and interactions based on scroll position
  • Lightweight and easy to integrate into existing projects

Cons

  • Limited documentation and examples
  • Not actively maintained (last update was several years ago)
  • May require additional libraries or frameworks for more advanced features
  • Learning curve for complex animations and interactions

Code Examples

  1. Basic initialization:
var scroller = new Scroller(function(left, top, zoom) {
    // Update content based on scroll position
}, {
    zooming: true
});
  1. Setting up a scrollable area:
var container = document.getElementById('container');
scroller.setDimensions(container.clientWidth, container.clientHeight, contentWidth, contentHeight);
  1. Handling touch events:
container.addEventListener("touchstart", function(e) {
    scroller.doTouchStart(e.touches, e.timeStamp);
}, false);

container.addEventListener("touchmove", function(e) {
    e.preventDefault();
    scroller.doTouchMove(e.touches, e.timeStamp);
}, false);

container.addEventListener("touchend", function(e) {
    scroller.doTouchEnd(e.timeStamp);
}, false);

Getting Started

  1. Include the Scroller library in your HTML:
<script src="path/to/scroller.js"></script>
  1. Initialize the Scroller in your JavaScript:
var scroller = new Scroller(function(left, top, zoom) {
    // Update your content here based on scroll position
});

// Set up dimensions
var container = document.getElementById('container');
var content = document.getElementById('content');
scroller.setDimensions(container.clientWidth, container.clientHeight, content.offsetWidth, content.offsetHeight);

// Set up event listeners for touch/mouse events
// (See touch event example above for touch events)
  1. Update your content based on the scroll position in the callback function provided to the Scroller constructor.

Competitor Comparisons

Accelerated panning and zooming for HTML and Canvas

Pros of Scroller

  • More actively maintained with recent updates
  • Better documentation and examples
  • Wider browser compatibility

Cons of Scroller

  • Larger file size
  • More complex API
  • Steeper learning curve for beginners

Code Comparison

Scroller:

var scroller = new Scroller(render, {
  zooming: true,
  bouncing: false,
  scrollingX: true,
  scrollingY: true
});

scroller.setDimensions(1000, 1000, 5000, 5000);

Scroller>:

var scroller = new Scroller(function(left, top, zoom) {
  // render logic here
});

scroller.setDimensions(1000, 1000, 5000, 5000);

The code comparison shows that both libraries use similar initialization patterns, but Scroller offers more configuration options upfront. Scroller> has a simpler setup but may require additional configuration for advanced features.

Both libraries provide smooth scrolling functionality, but Scroller offers more built-in features and customization options. Scroller> is lighter and may be easier to integrate for simple use cases, while Scroller is better suited for complex applications requiring advanced scrolling behaviors.

12,874

Smooth scrolling for the web

Pros of iScroll

  • More comprehensive feature set, including zoom, snap, and infinite scrolling
  • Better cross-platform compatibility, supporting older browsers and devices
  • Larger community and more frequent updates

Cons of iScroll

  • Larger file size and potentially higher performance overhead
  • More complex configuration and setup process
  • Steeper learning curve due to extensive options and features

Code Comparison

iScroll initialization:

var myScroll = new IScroll('#wrapper', {
    scrollX: true,
    scrollY: true,
    mouseWheel: true,
    wheelAction: 'zoom'
});

Scroller initialization:

var scroller = new Scroller(render, {
    scrollingX: true,
    scrollingY: true,
    animating: true,
    bouncing: true
});

Both libraries offer smooth scrolling functionality, but iScroll provides a more feature-rich experience at the cost of increased complexity. Scroller, on the other hand, focuses on simplicity and performance, making it a good choice for projects with basic scrolling needs. The code comparison shows that iScroll requires more configuration options, while Scroller has a more straightforward setup process. Ultimately, the choice between the two depends on the specific requirements of your project and the level of customization needed.

The javascript library for magical scroll interactions.

Pros of ScrollMagic

  • More comprehensive and feature-rich, offering advanced animation capabilities
  • Better documentation and community support
  • Integrates well with popular animation libraries like GSAP

Cons of ScrollMagic

  • Larger file size and potentially higher performance overhead
  • Steeper learning curve due to more complex API
  • May be overkill for simple scrolling effects

Code Comparison

ScrollMagic:

var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({
    triggerElement: "#trigger",
    duration: 300
})
.setTween("#animate", {scale: 2.5})
.addTo(controller);

Scroller:

var scroller = new Scroller(function(left, top, zoom) {
    // render logic
}, {
    zooming: true
});
scroller.setPosition(50, 100);

ScrollMagic offers a more declarative approach with scene-based animations, while Scroller provides a lower-level API for custom rendering. ScrollMagic is better suited for complex animations tied to scroll events, whereas Scroller is more lightweight and focused on efficient scrolling and zooming functionality.

🛤 Detection of elements in viewport & smooth scrolling with parallax.

Pros of Locomotive Scroll

  • More modern and actively maintained (last update in 2023 vs. 2014 for Scroller)
  • Supports smooth scrolling with customizable easing and lerp
  • Offers advanced features like parallax effects and scroll-triggered animations

Cons of Locomotive Scroll

  • Larger file size and potentially higher performance overhead
  • Steeper learning curve due to more complex API and configuration options

Code Comparison

Locomotive Scroll:

import LocomotiveScroll from 'locomotive-scroll';

const scroll = new LocomotiveScroll({
  el: document.querySelector('[data-scroll-container]'),
  smooth: true,
  lerp: 0.1
});

Scroller:

var scroller = new Scroller(render, {
  zooming: true,
  animating: true,
  bouncing: false
});

scroller.setDimensions(1000, 1000, 3000, 3000);

Locomotive Scroll offers a more modern API with built-in smooth scrolling and advanced features, while Scroller provides a simpler, lightweight solution for basic scrolling functionality. The choice between the two depends on project requirements, performance considerations, and desired scrolling effects.

17,573

High performance and SEO friendly lazy loader for images (responsive and normal), iframes and more, that detects any visibility changes triggered through user interaction, CSS or JavaScript without configuration.

Pros of lazysizes

  • More actively maintained with frequent updates
  • Broader functionality, including responsive images and automatic size calculation
  • Larger community and more widespread adoption

Cons of lazysizes

  • Larger file size and potentially higher performance overhead
  • More complex setup and configuration options

Code Comparison

lazysizes:

<img data-src="image.jpg" class="lazyload" alt="Lazy loaded image">

scroller:

var scroller = new Scroller(render, {
  scrollingX: false,
  scrollingY: true,
  animating: true,
  bouncing: true
});

Key Differences

  • lazysizes focuses on image loading optimization, while scroller is primarily for smooth scrolling
  • lazysizes is more plug-and-play, whereas scroller requires more manual integration
  • scroller offers finer control over scrolling behavior, while lazysizes excels in automatic resource management

Use Cases

  • lazysizes: Ideal for image-heavy websites seeking to improve load times and performance
  • scroller: Better suited for creating custom scrolling experiences or implementing virtual scrolling in single-page applications

Community and Support

lazysizes has a larger user base and more frequent updates, potentially offering better long-term support and compatibility with modern web technologies. scroller, while useful, has seen less recent development activity.

A lightweight script to animate scrolling to anchor links.

Pros of smooth-scroll

  • Lightweight and simple to use
  • Supports various scroll options (e.g., offset, speed, easing)
  • Works with both modern and older browsers

Cons of smooth-scroll

  • Less feature-rich compared to scroller
  • May not handle complex scrolling scenarios as well

Code Comparison

smooth-scroll:

var scroll = new SmoothScroll('a[href*="#"]', {
    speed: 500,
    offset: 50
});

scroller:

var scroller = new Scroller(render, {
    zooming: true,
    animating: true
});
scroller.setDimensions(1000, 1000, 3000, 3000);

Key Differences

  • smooth-scroll focuses on simple, smooth scrolling to anchor points
  • scroller offers more advanced features like zooming and custom rendering
  • smooth-scroll is easier to implement for basic use cases
  • scroller provides more control over scrolling behavior and animations

Use Cases

  • smooth-scroll: Ideal for simple websites needing smooth navigation
  • scroller: Better suited for complex applications with custom scrolling requirements

Community and Maintenance

  • smooth-scroll: More recent updates and active community
  • scroller: Less frequent updates, but still maintained

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Zynga Scroller

A pure logic component for scrolling/zooming. It is independent of any specific kind of rendering or event system.

The "demo" folder contains examples for usage with DOM and Canvas renderings which works both, on mouse and touch driven devices.

Demos

See our demos online here: http://zynga.github.com/scroller/

Features

  • Customizable enabling/disabling of scrolling for x-axis and y-axis
  • Deceleration (decelerates when user action ends in motion)
  • Bouncing (bounces back on the edges)
  • Paging (snap to full page width/height)
  • Snapping (snap to an user definable pixel grid)
  • Zooming (automatic centered zooming or based on a point in the view with configurable min/max zoom)
  • Locking (locks drag direction based on initial movement)
  • Pull-to-Refresh (Pull top out of the boundaries to start refresh of list)
  • Configurable regarding whether animation should be used.

Options

These are the available options with their defaults. Options can be modified using the second constructor parameter or during runtime by modification of scrollerObj.options.optionName.

  • scrollingX = true
  • scrollingY = true
  • animating = true
  • animationDuration = 250
  • bouncing = true
  • locking = true
  • paging = false
  • snapping = false
  • zooming = false
  • minZoom = 0.5
  • maxZoom = 3

Usage

Callback (first parameter of constructor) is required. Options are optional. Defaults are listed above. The created instance must have proper dimensions using a setDimensions() call. Afterwards you can pass in event data or manually control scrolling/zooming via the API.

var scrollerObj = new Scroller(function(left, top, zoom) {
	// apply coordinates/zooming
}, {
	scrollingY: false
});

// Configure to have an outer dimension of 1000px and inner dimension of 3000px
scrollerObj.setDimensions(1000, 1000, 3000, 3000);

Public API

  • Setup scroll object dimensions.
    scrollerObj.setDimensions(clientWidth, clientHeight, contentWidth, contentHeight);
  • Setup scroll object position (in relation to the document). Required for zooming to event position (mousewheel, touchmove).
    scrollerObj.setPosition(clientLeft, clientTop);
  • Setup snap dimensions (only needed when snapping is enabled)
    scrollerObj.setSnapSize(width, height);
  • Setup pull-to-refresh. Height of the info region plus three callbacks which are executed on the different stages.
    scrollerObj.activatePullToRefresh(height, activate, deactivate, start);
  • Stop pull-to-refresh session. Called inside the logic started by start callback for activatePullToRefresh call.
    scrollerObj.finishPullToRefresh();
  • Get current scroll positions and zooming.
    scrollerObj.getValues() => { left, top, zoom }
  • Zoom to a specific level. Origin defines the pixel position where zooming should centering to. Defaults to center of scrollerObj.
    scrollerObj.zoomTo(level, animate ? false, originLeft ? center, originTop ? center)
  • Zoom by a given amount. Same as zoomTo but by a relative value.
    scrollerObj.zoomBy(factor, animate ? false, originLeft ? center, originTop ? center);
  • Scroll to a specific position.
    scrollerObj.scrollTo(left, top, animate ? false);
  • Scroll by the given amount.
    scrollerObj.scrollBy(leftOffset, topOffset, animate ? false);

Event API

This API part can be used to pass event data to the scrollerObj to react on user actions.

  • doMouseZoom(wheelDelta, timeStamp, pageX, pageY)
  • doTouchStart(touches, timeStamp)
  • doTouchMove(touches, timeStamp, scale)
  • doTouchEnd(timeStamp)

For a touch device just pass the native touches event data to the doTouch* methods. On mouse systems one can emulate this data using an array with just one element:

  • Touch device: doTouchMove(e.touches, e.timeStamp);
  • Mouse device: doTouchMove([e], e.timeStamp);

To zoom using the mousewheel event just pass the data like this:

  • doMouseZoom(e.wheelDelta, e.timeStamp, e.pageX, e.pageY);

For more information about this please take a look at the demos.