https://github.com/giladk/react-scroll-rotate

Very simple react component for rotate element based on scroll position
https://github.com/giladk/react-scroll-rotate

Last synced: 2 months ago
JSON representation

Very simple react component for rotate element based on scroll position

• Host: GitHub
• URL: https://github.com/giladk/react-scroll-rotate
• Owner: giladk
• License: mit
• Created: 2019-07-03T19:47:58.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2022-08-18T01:01:47.000Z (over 2 years ago)
• Last Synced: 2024-08-02T19:38:48.653Z (6 months ago)
• Language: JavaScript
• Homepage: https://giladk.github.io/react-scroll-rotate/
• Size: 285 KB
• Stars: 8
• Watchers: 0
• Forks: 3
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-react-components - react-scroll-rotate - [demo](https://giladk.github.io/react-scroll-rotate/) - Very simple scroll based element rotation (UI Animation / Form Components)
• awesome-react-components - react-scroll-rotate - [demo](https://giladk.github.io/react-scroll-rotate/) - Very simple scroll based element rotation (UI Animation / Form Components)

README

        
# react-scroll-rotate ([demo](https://giladk.github.io/react-scroll-rotate/))

Very simple react component for rotate element based on scroll position

[![NPM](https://img.shields.io/npm/v/react-scroll-rotate.svg)](https://www.npmjs.com/package/react-scroll-rotate)

## Install

```bash

npm install --save react-scroll-rotate

```

## Usage

```jsx

import React, { Component } from 'react';

import  { ScrollRotate } from 'react-scroll-rotate';

function MyTitleComp(props) {

    return (

        Hello world

    )

}

```

## Props

| Property      | Type               | Default                               | Description                                                                                                                                  |

|:--------------|:-------------------|:--------------------------------------|:---------------------------------------------------------------------------------------------------------------------------------------------|

| `target`  | string | null | Target element id. By default it will use window scroll |

| `throttle`  | number           | null                                  | Use 'throttle' prop to invoke the update once in X seconds |

| `from`  | number           | 0                         | Rotation start point  |

| `to`  | number           | 360                                  | Rotation end point |

| `method`  | string           | 'px'                         | Use 'perc' to change rotation based on scroll percantges. |

| `loops`  | number           | 1                                  | When using method 'perc', define how many loops component will do while scrolling to bottom |

| `animationDuration`  | number           | 0.1                                  | Animation duration  |

## License

MIT