react-scroll-rotate

npm install --save react-scroll-rotate

What

react-scroll-rotate is a very simple react component that rotate children based on scroll poistion.

So for example, this "What?" title will look like this:

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

<Title> // Styled Component for example
  What <ScrollRotate>?</ScrollRotate>
</Title>

Default configs

By default, without any prop, ScrollRotate will rotate based on Scroll top 1px=1deg

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

<ScrollRotate>
  <span>Rotate me</span>
</ScrollRotate>

Loops

Use 'method' prop with 'perc' value to rotate based on scroll percantges

Use 'loops' prop to define how many rotations component will do during the scroll
Defualt is 1

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

<ScrollRotate method={"perc"}>
   <span>One loop</span
</ScrollRotate>
<ScrollRotate method={"perc"} loops={3}>
   <span>Three loops</span>
</ScrollRotate>

Target

Select target to control the component.

Loops:

Scroll me

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

<ScrollRotate target={"target-element-id"}>
   <span>I will response to #target-element-id scroll</span>
</ScrollRotate>

1 loop

2 loops

3 loops

From - To

Use 'from' and 'To' props to adjust the range of the circle
Defaults: 0 - 360

Loops: From:To:

Scroll me

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

<ScrollRotate from={90} to={270}>
   <span>From 90 to 270 Deg</span
</ScrollRotate>

By px

1 loop

2 loops

3 loops

Throttle

Use 'throttle' prop to invoke the update once in X seconds
Defaults: null
*Throttle is not used by default
*When you use 'throttle' prop you probably want to also add 'animationDuration' prop with +- same value

Throttle: Loops:

Scroll me

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

<ScrollRotate throttle={0.1}>
   <span>I will rotate every 0.1s</span
</ScrollRotate>

* = With animation duration
By px:
0.10 th'

Loops:
0.10 th'

0.50 th'

Animation duration

Use 'animationDuration' props to set animation duration by Seconds
Defaults: 0.1

Loops: Duration:

Scroll me

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

<ScrollRotate animationDuration={0.3}>
   <span>0.3s Animation duration</span
</ScrollRotate>

By px:
0.10 d

By Loops:
0 d

0.10 d

0.30 d

0.50 d