Popularity
0.2
Stable
Activity
3.1
Declining
2
0
0
Monthly Downloads: 0
Programming language: JavaScript
Tags:
UI Animation
react-scroll-rotate alternatives and similar libraries
Based on the "UI Animation" category
-
react-spring
A spring physics based React animation library. -
react-motion
A spring that solves your animation problems. -
framer/motion
Open source, production-ready animation and gesture library for React -
react-flip-move
Effortless animation between DOM changes (eg. list reordering) using the FLIP technique. -
react-router-transition
Transitions built for react-router, powered by react-motion. -
react-gsap-enhancer
Use the full power of React and GSAP together. -
react-motion-ui-pack
Wrapper component around React Motion for easier UI transitions. -
React Native Circle Menu
⭕️ CircleMenu is a simple, elegant UI menu with a circular layout and material design animations. Made by @Ramotion -
data-driven-motion
Easily animate your data in react. -
react-spark-scroll
Scroll-based actions and animations for react. -
react-track
Track the position of DOM elements. Create cool animations. -
react-mt-svg-lines
A React.js wrapper component to animate the line stroke in SVGs. -
react-atv-img
A port of @drewwilson’s atvImg (Apple TV 3D parallax effect) library in React. -
react-web-animation
React components for the Web Animations API -. -
react-transitive-number
React component to apply transition effect to numeric strings, a la old Groupon timers. -
react-parallax-component
Easiest way to add scroll parallax effect on the component. -
auto-size-transition
A component that scale dynamically according to the internal children size
Do you think we are missing an alternative of react-scroll-rotate or a related project?
README
react-scroll-rotate (demo)
Very simple react component for rotate element based on scroll position
Install
npm install --save react-scroll-rotate
Usage
import React, { Component } from 'react';
import { ScrollRotate } from 'react-scroll-rotate';
function MyTitleComp(props) {
return (<MyTitleWrapper>
Hello <ScrollRotate><span>world</span></ScrollRotate>
</MyTitleWrapper>)
}
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
*Note that all licence references and agreements mentioned in the react-scroll-rotate README section above
are relevant to that project's source code only.