splide-extension-auto-scroll icon indicating copy to clipboard operation
splide-extension-auto-scroll copied to clipboard

feat: extra performance and stabilization options for autoscroll

Open dmitriynazaratiy opened this issue 2 years ago • 1 comments

Related Issues

#10

Description

This PR introduces new set of performance and stabilization related options for an AutoScroll:

  • fpsLock number (optional) - when fpsLock is set AutoScroll renders will perform as if device has real fps value equal to it. This includes skips render for frames if real fps is higher and proper calculation for an expected render position if real fps is lower than fpsLock value. This option solves an issue of different frame rates on different devices as well as known problem of requestAnimationFrame() potential skipping animation frames.
  • virtualSpeed boolean (optional) - when virtualSpeed flag is set to true AutoScroll will perform animation as if slider component has its size equal to virtualViewportSize regardless of real slider size. This also includes scaling of a speed value up or down during position calculations to stabilize animation speed across different screen sizes. virtualSpeed and virtualViewportSize options pair solves an issue of original algo being bound to a px per frame resulting in a different slide per frame speed on different screen sizes or different slider size (which created an illusion of different scroll speed)
  • virtualViewportSize number (optional, default = 1000) - when virtualSpeed flag is set to true this option value is used to determine virtual size of a slider component for further calculations (see virtualSpeed option description)

Example of usage

https://codepen.io/d-nazaratiy/pen/dywywyq

dmitriynazaratiy avatar Aug 19 '23 13:08 dmitriynazaratiy

Thank you very much, the site works much faster now. @NaotoshiFujita could you please merge this?

Piteriuz avatar Jul 22 '24 08:07 Piteriuz