https://github.com/tomassestak/framer-motion-scroll-to-hook

useScrollToHook for Framer Motion animation library
https://github.com/tomassestak/framer-motion-scroll-to-hook

custom-hook framer framer-motion hook scroll scroll-to scroll-to-top

Last synced: 4 months ago
JSON representation

useScrollToHook for Framer Motion animation library

• Host: GitHub
• URL: https://github.com/tomassestak/framer-motion-scroll-to-hook
• Owner: TomasSestak
• Created: 2022-05-30T21:01:57.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2023-10-14T15:47:06.000Z (over 1 year ago)
• Last Synced: 2024-10-12T23:04:59.996Z (4 months ago)
• Topics: custom-hook, framer, framer-motion, hook, scroll, scroll-to, scroll-to-top
• Language: TypeScript
• Homepage: https://TomasSestak.github.io/framer-motion-scroll-to-hook
• Size: 1.66 MB
• Stars: 6
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# framer-motion-scroll-to-hook

> Simple custom hook for ScrollTo functionality using framer-motion

[![NPM](https://img.shields.io/npm/v/framer-motion-scroll-to-hook.svg)](https://www.npmjs.com/package/framer-motion-scroll-to-hook) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash

npm install framer-motion-scroll-to-hook

```

```bash

yarn add framer-motion-scroll-to-hook

```

## Usage

useScrollTo hook accepts 1 argument a that is framer-motion config:

    1: Spring | Tween | undefined

        

scrollTo function returned from useScrollTo hook accepts 2 arguments:

    1: Element | string | number (number of pixels from top of the window) | undefined

    2: Number (offset in pixels from element you want to scroll to) | undefined

In version 2 you can directly import scrollTo function from the package and use it without the hook 

    Options (one object argument):

        scroller?: HTMLElement | Window | null;

        transition?: Spring | Tween;

        target?: Element | number | string | null;

        offset?: number;

## Examples

```tsx

import {useScrollTo} from 'framer-motion-scroll-to-hook'

//Scroll to element (you may wanna useRef)

const BasicExampleWthConfig = () => {

	const scrollTo = useScrollTo()

	return (

		 scrollTo(document.querySelector('#id'))}>

			Scroll to Element with predefined config from framer-motion

		

	)

}

//Scroll to top with config

const ScrollToTop = () => {

	const scrollTo = useScrollTo({mass: 120, stiffness: 1, type: 'spring'})

	return (

		

			Scroll to the top of the page with your config

		

	)

}

//Scroll to top with offset and first argument as string only (document.querySelector is used in the hook)

const ScrollToTopWithOffset = () => {

	const scrollToId = useScrollTo()

	return (

		 scrollToId('#id', 300)}>

			Scroll to the top of the page with default config and offset from element

		

	)

}

import {scrollTo} from 'framer-motion-scroll-to-hook'

const ScrollToTopFunction = () => {

	return (

		 scrollTo()}>

			Scroll to the top of the page with default config

		

	)

}

```

## License

MIT © [TomasSestak](https://github.com/TomasSestak)