react-scroll-rotate

npm install --save react-scroll-rotate

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


Scroll me


Scroll me


Scroll me


Scroll me


Scroll me


Scroll me


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


Scroll me


Scroll me


Scroll me


Scroll me


Scroll me


Scroll me


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


Scroll me


Scroll me


Scroll me


Scroll me


Scroll me


Scroll me


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


Scroll me


Scroll me


Scroll me


Scroll me


Scroll me


Scroll me


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