Parrots

Continuously synchronizing web with performance. Parrot em all! 🐤

Suitable for synchronizing HTML element scroll left, scroll top, width, height, ... or any other things like object properties, array items...

Installation

npm i --save parrots

UMD latest builds also available at jsDelivr

<script src="https://cdn.jsdelivr.net/npm/parrots@latest/dist/parrots.min.js"></script>

or unpkg.com

https://unpkg.com/parrots@latest/dist/parrots.min.js

Examples

Live examples

• Scroll left bidirectional sync
• Scroll sync with counter

// Create a handle to synchronize scroll left
var syncScrollLeft = parrots({
  // get scroll left from source
  getter: (el) => $(el).scrollLeft(),
  // set scroll left into items
  setter: (el, value) => $(el).scrollLeft(value)
  // auto sync duration, optional, default is 2 seconds (2000 milliseconds)
  duration: 2000
})
 
// Add affected elements
syncScrollLeft.to(el)
syncScrollLeft.to(el2)
 
// Trigger scroll left copying from el3 when it's scrolled
el3.on('scroll', syncScrollLeft.from(el3))