use-parallax - npm Package Compare versions

use-parallax

Package Overview

Dependencies

Maintainers

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 0.0.4 to 0.0.5

package.json

		{
		"name": "use-parallax",
		"version": "0.0.4",
		"version": "0.0.5",
		"description": "React Hooks to support scroll interactions along based on the Framer Motion library",
		@@ -5,0 +5,0 @@ "main": "dist/index.js",

116

README.md

		# useParallax
		React Hooks to support scroll interactions along based on the Framer Motion library
		Functions `usePositiveOffset`, `useSticky`, `useSpeed` and `useTrigger` are custom hook that I wrote to make it easier to create common parallax effect such as sticky headers.

		## `usePositiveOffset`

		### Description
		Convert a negative offset `MotionValue`, that comes with `contentOffsetX` and `contentOffsetY` props of `Scroll`, to a positive one.

		### Usage

		```jsx
		// ==> 1. import it
		import { usePositiveOffset } from "./useParallax"
		...
		function App() {
		// ==> 2. call usePositiveOffset in a function component
		const positiveOffset = usePositiveOffset(offset)
		...
		}
		```

		## `useSticky`

		### Description
		Returns a `MotionValue` which can be used to make an item sticky when the `Scroll` is scrolled into specific ranges.

		### Usage

		```jsx
		// ==> 1. import it
		import { useSticky } from "./useParallax"
		...

		function App() {
		...
		// ==> 2. call useSticky to create a new MotionValue. The first parameter MUST be a positive offset.
		const titleOffset = useSticky(positiveOffset, [200, 400], [500, 700], [900, 1200])
		...
		return (
		<Scroll contentOffsetY={offset}>
		// ==> 3. use titleOffset as a prop
		<Frame y={titleOffset}>Title</Frame>
		...
		</Scroll>
		)
		}
		```

		In the code above, the title will be sticky when the list is scrolled into three ranges. When the list is scrolled outside of these ranges, the title will scroll with the rest of list normally.


		## `useSpeed`

		### Description
		Returns a `MotionValue` which can be used to make an item move at a different speed when the `Scroll` is scrolled into specified ranges.

		### Usage

		```jsx
		// ==> 1. import it
		import { useSpeed } from "./useParallax"
		...

		function App() {
		...
		// ==> 2. call useSpeed to create a new MotionValue.
		// The first parameter MUST be a positive offset.
		// The following parameters are range-speed pairs.
		const titleOffset = useSpeed(positiveOffset,
		[0, 200 ], 1, // speed > 0: the item moves faster than the scroll speed
		[200, 400], 0, // speed = 0: the item scrolls at the same speed as other items
		[500, 700], -0.5, // -1 < speed < 0: the item moves slower than scroll speed
		[900, 1200], -1, // speed = -1: the item is sticky
		[1200, 1500], -2 // speed < -1: the item moves in the opposite direction than the scrolling
		)
		...
		return (
		<Scroll contentOffsetY={offset}>
		// ==> 3. use titleOffset as a prop
		<Frame y={titleOffset}>Title</Frame>
		...
		</Scroll>
		)
		}
		```

		## `useTrigger`

		### Description
		Trigger something, e.g. an animation, when scrolling into the specified range

		### Usage

		```jsx
		// ==> 1. import it
		import { useTrigger } from "./useParallax"
		...

		function App() {
		...
		// ==> 2. call useTrigger to setup the trigger
		useTrigger(
		positiveOffset, // The first parameter MUST be a positive offset.
		[200, 300], // Trigger range
		// This function will be called only once per scroll direction.
		// direction > 0: scrolling up/left (normal scroll)
		// direction < 0: scrolling down/right
		function(direction) {
		if (direction > 0) anim.start({ rotate: 180 })
		else anim.start({ rotate: 0 })
		}
		)
		...
		}
		```

Improved metrics