Simple & lightweight (<4kb gzipped) vanilla JavaScript library to create smooth & beautiful animations when you scroll.

Overview

lax.js

Simple & lightweight (<4kb gzipped) vanilla JavaScript library to create smooth & beautiful animations when you scroll.

Lax 2.0 Gif

>> DEMO <<


What's new with Lax.js 2.0

Lax.js 2.0 has been completely re-written with a focus on modularity and flexibility giving you more tools to create awesome animations.

  • New javascript animation syntax, allowing for more advanced effect combos
  • Use any value to drive animations, for example mouse position, time of day .. and of course scroll!
  • Animations can be given inertia when scrolling
  • Create custom CSS bindings
  • Animation easings
  • And much more..

Examples

Documentation

1. Getting started

2. Going deeper

3. Glossary

Getting started

NPM Setup

# https://www.npmjs.com/package/lax.js

npm install lax.js
yarn add lax.js
import lax from 'lax.js'

HTML setup

<script src="path-to-lax.min.js"></script>
<!-- or via CDN -->
<script src="https://cdn.jsdelivr.net/npm/lax.js" ></script>

Setup

To implement lax you need to create at least one driver, to provide values for animations, as well as the element animation bindings. Below is a simple example:

<!-- JS -->
<script>
  window.onload = function () {
    lax.init()

    // Add a driver that we use to control our animations
    lax.addDriver('scrollY', function () {
      return window.scrollY
    })

    // Add animation bindings to elements
    lax.addElements('.selector', {
      scrollY: {
        translateX: [
          ["elInY", "elCenterY", "elOutY"],
          [0, 'screenWidth/2', 'screenWidth'],
        ]
      }
    })
  }
</script>

<!-- HTML -->
<div class="selector">Hello</div>

Using presets

The easiest way to get started is to use presets via html classes. For example:

<div class="lax lax_preset_fadeIn:50:100 lax_preset_spin"></div>

Multiple presets can be chained together and they can be customised to suit your needs. Use the preset explorer to explore effects and see a simple example here.

DOM behavior and usage with Frameworks

To increase performance, lax.js indexes the list of elements to animate when the page loads. If you're using a library like React, Vue or EmberJS, it is likely that you are adding elements after the initial window.onload. Because of this you will need to call lax.addElements when you add components to the DOM that you want to animate, and lax.removeElements when the component unmounts.

Please find a React example here. Other examples will be available soon for Vue.js and Angular.

Adding drivers

Drivers provide the values that drive your animations. To set up a driver just call lax.addDriver with a name and a function which returns a number. This method is called every frame to calculate the animations so keep the method as computationally light as possible. The example below will be the most common use case for lax which returns the scrollY position of the window.

lax.addDriver(
  'scrollY',                          // Driver name
  function(laxFrame) {                     
    return window.scrollY    // Value method
  },
  { }                                 // Options
)

Driver options

inertiaEnabled: boolean = false

If enabled, the driver will calculate the speed at which its value is changing. Used to add inertia to elements using the inertia element option.

See this in action in the here.

frameStep: number = 1

By default each driver updates its value every animation frame, around ~60 times per second. You can use the frameStep to reduce frequency of the driver value updating. For example a value of 2 would only update ~30 times per second and a value of 60 would only update about once per second.

Adding elements

You can add lax animations to an element using the addElements method:

lax.addElements(
  '.selector',  // Element selector rule
  {             // Animation data
    scrollY: {  
      opacity: [
        [0, 100],
        [1, 0]
      ]
    }
  },
  {             
    style: {}   // Element options
  }
)

Element options

style: StyleObject

Add static CSS to each element, for example:

{
  transform: '200ms scale ease-in-out';
}

elements: Array<DOM nodes>

Pass references to raw DOM elements to allow for more flexible selection patterns. In this case, a unique selector must still be passed as the first argument, however it does not need to be a valid DOM selector.

This allows the library to tag the elements for removal later. Example:

const myDomElements = $('.selector')

{
  elements: myDomElements
}

onUpdate: (driverValues: Object, domElement: DomElement) => void

A method called every frame with the current driverValues and domElement. This could be used to toggle classes on an element or set innerHTML. See it in action here.

The driver values are formatted as follows:

{
  scrollY: [  // Driver name
    100,      // Driver value
    0         // Driver inertia
  ]
}

Going deeper

Custom animations

Custom animations are defined using an object.

// Animation data
{
  scrollY: {                // Driver name
    translateX: [           // CSS property
      ['elInY', 'elOutY'],  // Driver value map
      [0, 'screenWidth'],   // Animation value map
      {
        inertia: 10        // Options
      }
    ],
    opacity: [
      // etc
    ]
  }
}

Driver name

The name of the driver you want to use as a source of values to map to your animation, for example, the document's scrollY position. Read about adding drivers here.

CSS property

The name of the CSS property you want to animate, for example opacity or rotate. See a list of supported properties here.

Some CSS properties, for example box-shadow, require a custom function to build the style string. To do this use the cssFn element option.

Value maps

The value maps are used to interpolate the driver value and output a value for your CSS property. For example:

[0, 200, 800]  // Driver value map
[0, 10,  20]   // Animation value map

// Result

| In  | Out |
| --- | --- |
| 0   | 0   |
| 100 | 5   |
| 200 | 10  |
| 500 | 15  |
| 800 | 20  |

Within the maps you can use strings for simple formulas as well as use special values. e.g:

['elInY', 'elCenterY-200', 'elCenterY',

See a list of available values here.

You can also use mobile breakpoints within driver value maps and animation maps for more flexibility.

scrollY: {
  translateX: [
    ['elInY', 'elCenterY', 'elOutY'],
    {
      500: [10, 20, 50], // Screen width < 500
      900: [30, 40, 60], // Screen width > 500 and < 900
      1400: [30, 40, 60], // Screen width > 900
    },
  ];
}

Options

modValue: number | undefined

Set this option to modulus the value from the driver, for example if you want to loop the animation value as the driver value continues to increase.

frameStep: number = 1

By default each animation updates its value every animation frame, around ~60 times per second. You can use the frameStep to reduce frequency of the animation updating. For example a value of 2 would only update ~30 times per second and a value of 60 would only update about once per second.

inertia: number

Use to add inertia to your animations. Use in combination with the inertiaEnabled driver option.

See inertia in action here.

inertiaMode: "normal" | "absolute"

Use in combination with inertia. If set to absolute the inertia value will always be a positive number via the Math.abs operator.

cssUnit: string = ""

Define the unit to be appended to the end of the value, for example For example px deg

cssFn: (value: number, domElement: DomElement) => number | string

Some CSS properties require more complex strings as values. For example, box-shadow has multiple values that could be modified by a lax animation.

// Box-shadow example
(val) => {
  return `${val}px ${val}px ${val}px rgba(0,0,0,0.5)`;
};

easing: string

See a list of available values here.

Optimising performance

Lax.js has been designed to be performant but there are a few things to bare in mind when creating your websites.

  • Smaller elements perform better.
  • Postion fixed and absolute elements perform best as they do not trigger a layout change when updated.
  • Off-screen elements do not need to be updated so consider that when creating your animation value maps.
  • The css properties blur, hue-rotate and brightness are graphically intensive and do not run as smoothly as the other available properties.

Glossary

CSS properties

name
opacity
scaleX
scaleY
scale
skewX
skewY
skew
rotateX
rotateY
rotate
translateX
translateY
translateZ
blur
hue-rotate
brightness

Special values

key value
screenWidth current width of the screen
screenHeight current height of the screen
pageWidth width of the document
pageHeight height of the document
elWidth width of the element
elHeight height of the element
elInY window scrollY position when element will appear at the bottom of the screen
elOutY window scrollY position when element will disappear at the top of the screen
elCenterY window scrollY position when element will be centered vertically on the screen
elInX window scrollX position when element will appear at the right of the screen
elOutX window scrollX position when element will disappear at the left of the screen
elCenterX window scrollX position when element will be centered horizontally on the screen
index index of the element when added using lax.addElements

Supported easings

name
easeInQuad
easeOutQuad
easeInOutQuad
easeInCubic
easeOutCubic
easeInOutCubic
easeInQuart
easeOutQuart
easeInOutQuart
easeInQuint
easeOutQuint
easeInOutQuint
easeOutBounce
easeInBounce
easeOutBack
easeInBack
Comments
  • Responsive issues

    Responsive issues

    Hi there, I'm using Bootstrap 4 (as many people) so for example, when using xs breakpoint (ie. mobile devices) some elements converts to "100% width blocks" so we need to avoid the animations.

    As with laxxx library we are using data-attributes and we can't manage theme with media queries, is there any way to manage animations regarding breakpoints?

    My suggestion: Be able to define breakpoints in the setup: lax.setup({breakpoints: {xs:0, sm:'576px', md:'768px', lg:'992px'}});

    So we could use like this:

    <div data-lax-xs-preset='' data-lax-md-preset='lazy'></div>
    <p data-lax-md-opacity="0 1, 100 1, 200 0" data-lax-lg-opacity="100 1, 50 0, 200 0">
    
    opened by afanjul 21
  • Typescript upgrade

    Typescript upgrade

    What is this?

    While looking to use this project with one of mine, I realized there were no typescript definitions. After looking at the code, I wanted to see if I could convert it to typescript and give meaningful definitions while developing, so that's what I did.

    When/how was this made?

    This was all written/modified in a few hours, so this is only a draft. But I think this could help a LOT of people who use typescript. I used typescript interfaces, enums, and types to define all possible values in laxxx.

    Changes

    I unfortunately had to remove both of the self invoking functions (that I assume was added for scoping reasons). They were preventing the typescript compiler from extracting the Lax class definitions. The core code is still entirely the same. The final file sizes are actually quite good too! It's still under 4kb gziped and all newly compiled files are actually SMALLER than the current version! (I thought that was cool 😊).

    opened by Pckool 14
  • Feature Request: Animation Easings?

    Feature Request: Animation Easings?

    First of all, this is by far the best scroll effects library out there! I was looking for a lightweight alternative to the ScrollMagic + GreenSock stack and this is finally something really useful! Great job!

    I was just wondering if there are any plans to add support for easings? Im using lax.js to add some decent scroll effects to our website. As some of the animations stop right inside the viewport, it would be nice if we could add some easing effects to have them slow down before the animation ends.

    opened by chrisribal 13
  • Deprecate eval()

    Deprecate eval()

    Is your feature request related to a problem? Please describe. I am writing a content security policy for my website, and Lax seems to use the JS eval().

    Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self' 'nonce-...'".
    

    Describe the solution you'd like Can we somehow remove the eval call from the framework?

    Describe alternatives you've considered I've tried V1 with this stack trace:

    Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self' 'nonce-...'".
    
        at fnOrVal (vendor.min.js?stamp=10302020:20508)
        at Array.map (<anonymous>)
        at vendor.min.js?stamp=10302020:20508
        at Array.map (<anonymous>)
        at vendor.min.js?stamp=10302020:20508
        at Object.lax.calcTransforms (vendor.min.js?stamp=10302020:20508)
        at lax.addElement (vendor.min.js?stamp=10302020:20508)
        at NodeList.forEach (<anonymous>)
        at Object.lax.populateElements (vendor.min.js?stamp=10302020:20508)
        at Object.lax.setup (vendor.min.js?stamp=10302020:20508)
    

    And V2 with this stack trace:

    Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self' 'nonce-...'".
    
        at Function (<anonymous>)
        at d (vendor.min.js?stamp=1609172397:20508)
        at vendor.min.js?stamp=1609172397:20508
        at Array.map (<anonymous>)
        at vendor.min.js?stamp=1609172397:20508
        at vendor.min.js?stamp=1609172397:20508
        at f.calculateTransforms (vendor.min.js?stamp=1609172397:20508)
        at new f (vendor.min.js?stamp=1609172397:20508)
        at vendor.min.js?stamp=1609172397:20508
        at NodeList.forEach (<anonymous>)
    

    Additional context I don't know very much about eval...

    opened by clarknelson 12
  • Doesn't work with object already translated

    Doesn't work with object already translated

    I think this my just be a overhead on these elements and this library shouldn't care about them… on the other hand having elements already defining translation etc. respected would maybe broaden use cases.

    opened by worldoptimizer 12
  • React hooks

    React hooks

    Loving the library man! Keep it up :D super intuitive and yet customizable.

    Been using 1.1.0 with React hooks and it was great! Just updated to 1.2.3 and something broke. Lax is still firing the update on scroll change but for some reason, the listening element is not reflecting the change.

    React version: 16.8.6;

    Currently out and on a mobile device, but would gladly give more information if you need!

    opened by AndrewThian 11
  • Cant bring html element to zero

    Cant bring html element to zero

    Hello sir, can you give me some help? I can't bring the second foo-div to zero. If i remove the first foo-div, it works. But i need two the two divs.

    https://xw9qt.csb.app/

    bug 
    opened by MarkusHeinisch 8
  • Add support for adding or removing classes at scroll positions

    Add support for adding or removing classes at scroll positions

    Something I needed for a current project was the ability to trigger CSS keyframe animations, and perform binary element changes (e.g. changing display, or some other non-animatable property).

    Rather than trigger these in JS, I wanted the scroll position logic to be specified alongside my lax animations.

    • Added the data-lax-class:<name> syntax.
      • When value >= 1 we add the class
      • When value <= 0 we remove it.
      • Anything 0 > value < 1 means no change. This can be used to add a buffer in between adding the class and removing it.
    • Added the original classnames to a map for each element on initialisation (similar to original styles)
    • Classes are tracked internally, as calling classList.add()/classList.remove() needlessly was a performance hog
    • Added section to the README

    Examples:

    // Add a class only at the very bottom of the document
    data-lax-class:bottom="(document.body.scrollHeight-vh-1) 0, (document.body.scrollHeight-vh) 1"
    
    // Add a class only at the very top of the document
    data-lax-class:top="0 1, 1 0"
    
    // Add a class at the very bottom of the document, and remove it at the very top
    data-lax-class:end="0 0, (document.body.scrollHeight-vh) 1"
    
    // Add a class when the element is going off the top of the viewport
    data-lax-class:departing="0 0, -1 1" data-lax-anchor="self"
    

    Unrelated to this edit, but another fix:

    I tweaked what is now Line 358 to check anchorTop !== undefined, rather than just being truth-ey. In the case where the anchor element was at the top of the document, its top offset was 0. That failed the anchorTop ? check, so it wouldn't be used as an anchor.


    Let me know if you need any edits, or more clarification.

    opened by LiamBigelow 8
  • Anchor for horizontal scroll

    Anchor for horizontal scroll

    I use lax.update(window.scrollX) for horizontal scroll from here https://github.com/alexfoxy/laxxx/issues/28 and it's works fine, but anchor o.anchorTop = Math.floor(rect.top) + window.scrollY use scrollY - is it possible to add option for horizontal scroll?

    opened by bragovo 7
  • docs: Add use-lax to the README.md

    docs: Add use-lax to the README.md

    Hi! :wave:

    I found out your library yesterday and found it pretty interesting.

    Following your React example, I created a library to abstract its use with hooks, use-lax.

    This PR just adds a link to my library in the README file.

    opened by arthurdenner 6
  • Use of eval() is strongly discouraged

    Use of eval() is strongly discouraged

    When spinning up a webapp with rollup and importing lax.js (in my case: I'm building a sapper app), it complains about laxxx using the eval statement, which supposedly is a security risk and may cause issues with minification. It's only a mild warning, but I'd be happy if you guys could switch out that eval with something else sometime :wink: Thanks.

    opened by ghost 5
  • Bump decode-uri-component from 0.2.0 to 0.2.2

    Bump decode-uri-component from 0.2.0 to 0.2.2

    Bumps decode-uri-component from 0.2.0 to 0.2.2.

    Release notes

    Sourced from decode-uri-component's releases.

    v0.2.2

    • Prevent overwriting previously decoded tokens 980e0bf

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.1...v0.2.2

    v0.2.1

    • Switch to GitHub workflows 76abc93
    • Fix issue where decode throws - fixes #6 746ca5d
    • Update license (#1) 486d7e2
    • Tidelift tasks a650457
    • Meta tweaks 66e1c28

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.0...v0.2.1

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Performance issues and crashes on iOS

    Performance issues and crashes on iOS

    Hi, we created a video-heavy site based on lax.js:

    https://marblever.se/v2

    It works perfectly on Chrome. But if I try it out on Safari iOS, the page tends to reset itself after a bit of scrolling, and eventually causes Safari to crash. This is on a pretty powerful device, an iPhone 12 Pro Max. I downsized the videos quite a bit to prevent this and even experimented with lazy-starting the videos. But nothing helped so far.

    Any idea what I can to do performance-optimize the behavior on iOS?

    bug 
    opened by derwaldgeist 12
  • Trouble centering an element on screen

    Trouble centering an element on screen

    In my React app, I would like to center an animated element on screen, using the following technique:

    1. Setting left to 50%
    2. Setting translateX to '-50%'

    The animation should only affect the translateY, i.e. move this horizontally centered element in the vertical direction.

    The challenge is:

    1. One I apply a translateY animation, translateX and translateZ will automatically be set to (almost) 0, overriding the settings I applied via CSS.
    2. Adding another translateX animation setting with -0.5*elWidth quite often fails. It seems as if lax.js is not able to calculate the element's width and thus sets it to 0 instead. I am not sure if this is unique to React. Sometimes, it helps if you add a pseudo animation stop that is lower than '-0.5*elWidth', but not always.
    3. Setting the translateX animation to -50% is not accepted by lax, it requires elWidth instead.
    4. Overriding the transform with translateX(-50%) !important does not work either, since it will override all animations by lax as well.

    This really caused me a lot of headaches. I think it would be best if lax would only add those transforms that are explicitly specified. That means: If I animate translateX, then only this parameter should be animated, not a full translate3D. For backwards compatibility, this could be controlled by an additional options flag.

    Thanks for providing this great library. Otherwise, I am happy.

    bug 
    opened by derwaldgeist 1
  • How to perform animation only once and until end position reached?

    How to perform animation only once and until end position reached?

    Is there any way to say "Hey, if you've reached your final position, please stay in that position"?

    Something like a callback "onAnimationEnd(removeElement(self))"?

    I'd love to get an answer.

    Thanks

    opened by 0x7357 2
  • VueJS 3 Example

    VueJS 3 Example

    Hello everyone,

    I'm in love with the Lax and it's capabilities. Unfortunately I can't get it working with Vue 3.

    I've checked the React example provided, but in Vue we do not have useEffect.

    Can anyone be kind enough to create a simple example for Vue 3 using Lax 2.

    Thanks tons!

    opened by abikali 1
Releases(v2.0.3)
  • v2.0.3(Dec 28, 2020)

    • Breaking change, preset values are now delaminated using : instead of - so that negative values cam be used. For example lax_preset_spin-400-360 should now be written as lax_preset_spin:400:360
    • Bug fixes and documentation improvements
    Source code(tar.gz)
    Source code(zip)
  • v2.0.2(Nov 16, 2020)

  • v2.0.1(Nov 14, 2020)

    Lax.js 2.0 has been completely re-written with a focus on modularity and flexibility giving you more tools to create awesome animations.

    • New javascript animation syntax, allowing for more advanced effect combos
    • Use any value to drive animations, for example mouse position, time of day .. and of course scroll!
    • Animations can be given inertia when scrolling
    • Create custom CSS bindings
    • Animation easings
    • And much more..
    Source code(tar.gz)
    Source code(zip)
  • v1.2.3(Apr 4, 2019)

  • v1.2.2(Apr 3, 2019)

  • v1.2.1(Apr 3, 2019)

  • v1.2.0(Mar 26, 2019)

    • Added functionality for responsive animations fixing #14, see https://github.com/alexfoxy/laxxx#responsive-design
    • Added functionality for sprite sheet animations. See demo & https://github.com/alexfoxy/laxxx#sprite-sheet-animations
    • Breaking change: You must now add the lax class to any element you want to animate.
    • Now inline style will be merged into animation fixing #9
    • Changed suggested set up to use window.requestAnimationFrame instead of binding to window scroll event #26
    • Can now add loop, offset and speed options into custom animations https://github.com/alexfoxy/laxxx#options
    • Performance improvements and code tweaks
    Source code(tar.gz)
    Source code(zip)
  • v1.1.0(Mar 19, 2019)

    • changed data-lax-optimize to data-lax-use-gpu
    • now use data-lax-optimize for optimising elements off screen
    • added background position key
    • added swing and speedy presets
    • fixed read me
    Source code(tar.gz)
    Source code(zip)
  • v1.0.4(Mar 17, 2019)

    Lax builds a list of all elements it needs to control when the page loads so if they are added to the DOM subsequently they won't be updated on page scroll. If you're using a library like React or vue.js, it is likely that not all elements are in the dom on page load. Because of this you will need to call lax.populateElements() when you add elements to the DOM that you want to animate.

    Source code(tar.gz)
    Source code(zip)
  • v1.0.2(Mar 16, 2019)

Owner
Alex Fox
I am a full stack developer with over 13 years' experience in full-stack development, UX, product development, web and mobile. Currently CTO @ Secret Spa.
Alex Fox
Scroll-stash - A JavaScript plugin to help preserve an element's scroll position.

scroll-stash A JavaScript plugin to help preserve an element's scroll position. CodePen Example Installation npm install scroll-stash JavaScript Impo

Sebastian Nitu 5 Sep 5, 2022
🚀 Scroll Follow Tab is a lightweight javascript library without jQuery, no dependencies.

Scroll Follow Tab is a lightweight javascript library without jQuery, no dependencies. It is used to make scrollspy effect for your menu, table of contents, etc. Only 21.7Kb.

Hieu Truong 11 Jun 20, 2022
🚀 Performance focused, lightweight scroll animation library 🚀

Sal Performance focused, lightweight (less than 2.8 kb) scroll animation library, written in vanilla JavaScript. No dependencies! Sal (Scroll Animatio

Mirek Ciastek 3.4k Dec 28, 2022
Simple and tiny JavaScript library that adds parallax animations on any images

simpleParallax.js simpleParallax.js is a very simple and tiny Vanilla JS library that adds parallax animations on any images. Where it may be laboriou

Geoffrey 1.5k Jan 3, 2023
A simple and fast API to monitor elements as you scroll

scrollMonitor The scroll monitor allows you to receive events when elements enter or exit a viewport. It does this using watcher objects, which watch

Stu Kabakoff 3.3k Jan 4, 2023
Lightweight, vanilla javascript parallax library

RELLAX Rellax is a buttery smooth, super lightweight, vanilla javascript parallax library. Update: Rellax now works on mobile (v1.0.0). Demo Website G

Dixon & Moe 6.7k Dec 30, 2022
Create an Apple-like one page scroller website (iPhone 5S website) with One Page Scroll plugin

#One Page Scroll 1.3.1 by Pete R. Create an Apple-like one page scroll website (iPhone 5S website) with One Page Scroll plugin Created by Pete R., Fou

Pete R. 9.6k Dec 31, 2022
Smooth scrolling for the web

iScroll, smooth scrolling for the web iScroll is a high performance, small footprint, dependency free, multi-platform javascript scroller. It works on

Matteo Spinelli 12.9k Jan 4, 2023
🛤 Detection of elements in viewport & smooth scrolling with parallax.

Locomotive Scroll Detection of elements in viewport & smooth scrolling with parallax effects. Installation ⚠️ Scroll-hijacking is a controversial prac

Locomotive 5.9k Dec 31, 2022
Largetable - jQuery plugin to scroll in/maximize large tables

largetable jQuery plugin to scroll in/maximize large tables Usage Install with npm: $ npm install largetable Then include largetable files in the HTM

Edinum 1 Feb 3, 2021
Animate elements as they scroll into view.

Animate elements as they scroll into view. Introduction ScrollReveal is a JavaScript library for easily animating elements as they enter/leave the vie

Julian Lloyd 21.2k Jan 4, 2023
▲ NEXT.JS - Example project using Next.js with Locomotive Scroll. (experimental)

nextjs-with-locomotive-scroll-example ?? NEXT.JS - Example project using Next.js with Locomotive Scroll. (experimental) ?? Demo ?? Getting started The

Bruno Silva 27 Dec 21, 2022
Better scroll event management using requestAnimationFrame.

Scroll Frame Better scroll event management using requestAnimationFrame. Install npm install @jamestomasino/scroll-frame Use const { addScrollListener

James Tomasino 2 Feb 12, 2022
Scroll made easy!

Demo - Installation - Methods - Callbacks - Styling ◼️ Features: ?? Native Scroll Behavior ?? Standardized events / shortcuts / API ?? Fast & Lightwei

Bruno Vieira 307 Nov 20, 2022
fullPage plugin by Alvaro Trigo. Create full screen pages fast and simple

fullPage.js English | Español | Français | Pусский | 中文 | 한국어 Available for Vue, React and Angular. | 7Kb gziped | Created by @imac2 Demo online | Cod

Álvaro 34.3k Jan 4, 2023
Stand-alone parallax scrolling library for mobile (Android + iOS) and desktop. No jQuery. Just plain JavaScript (and some love).

Please note: skrollr hasn't been under active development since about September 2014 (check out the contributions graphs on https://github.com/Prinzho

Alexander Prinzhorn 18.6k Jan 3, 2023
Give your pages some headroom. Hide your header until you need it

Headroom.js Headroom.js is a lightweight, high-performance JS widget (with no dependencies) that allows you to react to the user's scroll. The header

Nick Williams 10.9k Jan 4, 2023
Dragscroll is a micro library for drag-n-drop scrolling style

Dragscroll is a micro JavaScript library (910 bytes minified) which enables scrolling via holding the mouse button ("drag and drop" or "click and hold" style, online demo). It has no dependencies and is written in vanilla JavaScript (which means it works anywhere).

Dmitry Prokashev 1.1k Dec 21, 2022
Customizable, Pluginable, and High-Performance JavaScript-Based Scrollbar Solution.

Smooth Scrollbar Customizable, Flexible, and High Performance Scrollbars! Installation ⚠️ DO NOT use custom scrollbars unless you know what you are do

Daofeng Wu 3k Jan 1, 2023