Parallax-controller - Core classes and controller for creating parallax scrolling effects

Last update: Aug 2, 2022

🕹 Parallax Controller

npm version codecov

Core classes and controller for creating parallax scrolling effects.

This package was created for react-scroll-parallax, but can be used as a standalone lib.

Usage

Create the parallax controller first:

const controller = ParallaxController.init();

Then create an element with animation effects as props:

controller.createElement({
  elOuter: document.getElementById('outer'),
  elInner: document.getElementById('inner'),
  props: {
    translateY: [-100, 100],
    opacity: [0.4, 1],
  },
});
<div id="outer">
  <div id="inner">
    <!-- children  -->
  </div>
</div>

Optimizations to Reduce Jank

A number of techniques are used to keep scrolling optimized:

  1. Uses a single passive scroll listener to control all animated elements on the page.
  2. A minimal amount of work is done on the scroll event to prevent jank with no calls to methods that cause layout shifts.
  3. Calculations that cause layout, reflow (getBoundingClientRect()) are cached and only updated when layout may change.
  4. The requestAnimationFrame is used to apply all scroll effects.
  5. Only GPU supported CSS effects transform and opacity are allowed.
  6. CSS will-change is added to an element based on animation effects to prevent paints.

If you have ideas to further optimize scrolling please PR or post an issue.

⚠️ Scroll Effects May Still Cause Jank and Bad User Experiences!

It's up to you to make sure you use this package appropriately. Here's some suggestions for usage while maintaining good UX:

  1. Keep effects simple -- less is more. Oftentimes the less extreme animations on the page the better the scrolling will be.
  2. Minimize the number of scroll effects on elements that are in view at the same time.
  3. When using images keep them small and optimized. Hi-resolution images will hurt scroll performance.
  4. Disable most (or all) scroll effects on mobile. Mobile devices optimize for best battery life and animation performance will often be degraded.

GitHub

https://github.com/jscottsmith/parallax-controller
You might also like...

A react native scroll view component with Parallax header :p

A react native scroll view component with Parallax header :p

RNParallax (react-native-parallax-header) A react native scroll view component with Parallax header :p Inspired by GitHub - jaysoo/react-native-parall

Jul 10, 2022

react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swiper , similar to the one found in Google's app like Sheet, Drive, Docs...

react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swiper , similar to the one found in Google's app like Sheet, Drive, Docs...

react-native-app-intro react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swipe

Jul 15, 2022

A Mapbox GL react native module for creating custom maps

Deprecation notice This repository is no longer actively maintained. Continued development of react-native-mapbox-gl may be found in the community dri

Aug 1, 2022

React Native component for creating animated, circular progress with ReactART

React Native component for creating animated, circular progress with ReactART

react-native-circular-progress React Native component for creating animated, circular progress. Useful for displaying users points for example. Exampl

Aug 9, 2022

React Native component for creating animated, circular progress with ReactART

React Native component for creating animated, circular progress with ReactART

react-native-circular-progress React Native component for creating animated, circular progress. Useful for displaying users points for example. Exampl

Jul 31, 2022

Text inputs with custom label and icon animations for iOS and android. Built with react native and inspired by Codrops.

Text inputs with custom label and icon animations for iOS and android. Built with react native and inspired by Codrops.

React Native Textinput Effects I've come across with those beautiful text inputs created and blogged by Codrops and wanted to port them to react-nativ

Jul 30, 2022

An easy-to-use, highly customizable react-native package for searching and selecting from a list of gifs and/or stickers using the Tenor and/or the Giphy API

An easy-to-use, highly customizable react-native package for searching and selecting from a list of gifs and/or stickers using the Tenor and/or the Giphy API

react-native-gif-search An easy-to-use, highly customizable react-native package for searching and selecting from a list of gifs and/or stickers using

Jul 30, 2022

An awesome and cross-platform React Native date picker and calendar component for iOS and Android

An awesome and cross-platform React Native date picker and calendar component for iOS and Android

react-native-common-date-picker An awesome and cross-platform React Native date picker and calendar component for iOS and Android. This package is des

Jul 27, 2022
Comments
  • 1. Specify translateY in vh unit instead of px or %

    Apparently vh and vw units are not currently supported.

    If it's just matter of adding it to the typescript definitions, I will be glad to create a pull request.

    But, by looking at parseValueAndUnit.test.ts, it looks like vh is not supported on purpose.

    Do you have any advice on how to approach this problem?

    Reviewed by AFusco at 2022-04-12 14:34
  • 2. Initial start/end values based on progress are not being clamped

    Initial start/end values based on progress are not being clamped.

    See here for reproduction: https://github.com/jscottsmith/react-scroll-parallax/issues/142

    Reviewed by jscottsmith at 2022-03-14 05:30
  • 3. Configure view size to allow animation to start at center of view.

    Sometimes users want the animation to begin at the middle of the screen instead of at the bottom. Or they want the animation to end early before the element leaves the view. See react-scroll-parallax #157

    To allow this an option can be added to scale the view size (the portion of the scroll area where the element animates).

    The new option viewportSize should accept pixels or percent values via the box model. Percent would be based off the view size.

    viewportSize: [top, right, bottom, left]

    Examples

    To configure an element to start animating at the middle of the screen the bottom of the view is adjusted to half the view size:

    viewportSize: [0, 0, 50%, 0]

    To configure an element to end animating at the middle of the screen the top of the view is adjusted to half the view size:

    viewportSize: [50%, 0, 0, 0]

    Reviewed by jscottsmith at 2022-05-03 18:05
  • 4. Add speedX and speedY props to control movement on a single axis

    Consider adding speedX and speedY to control movement on a single axis no matter the scroll axis.

    https://github.com/jscottsmith/react-scroll-parallax/issues/141

    Reviewed by jscottsmith at 2022-03-11 02:04
Paged Parallax Swiper with Effects
Paged Parallax Swiper with Effects

React Native Parallax Swiper Configurable parallax swiper based on an iOS pattern. Features Flexible. Share one Animated.Value between ParallaxSwiper

Jul 12, 2022
react-native-orientation-controller ★23 - A react-native library for obtaining and controlling the current device and application orientation

react-native-orientation-controller A react-native library for obtaining and controlling current device or application orientation This library is a f

Dec 28, 2020
✌️ ListView with pull-to-refresh and infinite scrolling for Android and iOS React-Native apps
✌️ ListView with pull-to-refresh and infinite scrolling for Android and iOS React-Native apps

Gifted ListView A ListView with pull-to-refresh, infinite scrolling and more for Android and iOS React-Native apps Changelog 0.0.13 Use RefreshControl

Jul 24, 2022
ScrollView with infinte paged scrolling (no looping). The number of pages rendered before and after current page can be customized. Pages are rendered when user scrolled.
ScrollView with infinte paged scrolling (no looping). The number of pages rendered before and after current page can be customized. Pages are rendered when user scrolled.

react-native-infinite-scrollview ScrollView with infinte paged scrolling (no looping). The number of pages rendered before and after current page can

May 17, 2022
React/redux wrappers for auto-scrolling react-collapse components

react-scroll-collapse Component wrappers for auto-scrolling collapsible elements - with smooth animations powered by react-motion and react-collapse.

Jun 5, 2022
React Native: Native Shine Button - Effects like shining
React Native: Native Shine Button - Effects like shining

ReactNative: Native Shine Button (Android/iOS) If this project has helped you out, please support us with a star ?? This library is a React Native br

Jul 29, 2022
Swiper/carousel component for React Native featuring previews, multiple layouts, parallax images, performant handling of huge numbers of items, and more. Compatible with Android & iOS.
Swiper/carousel component for React Native featuring previews, multiple layouts, parallax images, performant handling of huge numbers of items, and more. Compatible with Android & iOS.

react-native-snap-carousel ✨ Some great news for you, fellow plugin user! ?? Head over there now to learn more about all the goodness that's coming yo

Aug 1, 2022
A ScrollView-like component with parallax and sticky header support.
A ScrollView-like component with parallax and sticky header support.

Rodrigocs - Animated Driver This component now uses Native Driver by default. Remember to pass a Animated component to renderScrollComponent, by defau

Aug 3, 2022
react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swiper , similar to the one found in Google's app like Sheet, Drive, Docs...
react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swiper , similar to the one found in Google's app like Sheet, Drive, Docs...

react-native-app-intro react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swipe

Aug 6, 2022
Parallax scroll view for react-native
Parallax scroll view for react-native

react-native-parallax-scroll A ScrollView-like component that: Has a parallax background Has a parallax foreground Has a fixed or sticky header Can be

Aug 1, 2022