react-scroll-transitions
v1.2.1
Published
![version](https://img.shields.io/npm/v/react-scroll-transitions) ![downloads](https://img.shields.io/npm/dw/react-scroll-transitions) ![license](https://img.shields.io/npm/l/react-scroll-transitions)
Downloads
15
Maintainers
Readme
react-scroll-transitions
Introduction
A small but powerfull module for creating scoll animations. Simply add an array of sections to the component and the render function will parse all the information that you will need.
Usage
import React from "react";
import { render } from "react-dom";
import ScrollTransitions from "react-scroll-transitions";
const Example = () => (
<ScrollTransitions
sections={[
{ id: "title" },
{ id: "chapter1" },
{
id: "chapter2"
},
{ id: "end" }
]}
render={(id, transitionData) => (
<div>
ID: {id}
<br />
Percent: {transitionData.percent.toFixed(2)}
</div>
)}
/>
);
render(<Example />, document.getElementById("root"));
ScrollProsition (component): Props
sections
Array of Objects:
- id: (String) Unique id for section
- height (optional): (Number: default = 1) The scroll height of each section (1 means 100% of the window height)
- inTransition (optional): (String: default - "linear") Option for transition types (see 'transition types')
- outTransition (optional): (String: default - "linear") Option for transition types (see 'transition types')
render
A function that renders each section onScroll
.
properties
id: String (id of the section),
transitionData: Object
- isVisible: boolean - Is the section active
- isEntering: boolean - Is the section on the entring transition
- isLeaving: boolean - Is the section on the leaving transition
- percent: number [0-1] - Percent of section
- enteringPercent: number [0-1] - Percent of enter transition (with ease in/out values)
- leavingPercent: number [0-1] - Percent of leaving transition (with ease in/out values)
- transitionPercent: number [0-1] - Percent of both transitions (without ease in/out values)
renderAll
A function that renders a component and parses all transition data.
allTransitionData (Object)
visibility: Array
Array of ids that are visible.
positions: ObjectArray
- isVisible: boolean - Is the section active
- isEntering: boolean - Is the section on the entring transition
- isLeaving: boolean - Is the section on the leaving transition
- percent: number [0-1] - Percent of section
- enteringPercent: number [0-1] - Percent of enter transition (with ease in/out values)
- leavingPercent: number [0-1] - Percent of leaving transition (with ease in/out values)
- transitionPercent: number [0-1] - Percent of both transitions (without ease in/out values)
test (optional)
Default: false
When set to true
renders coloured divs for testing and over-rides the render function.
dynamicLoading (optional)
Default: true
Removes each section from the DOM when it isn't visible.
fixedContainer (optional)
Default: true
Renders the render()
content inside a fixed container for each section.
transitionSize (optional)
Default: 0.5
The size of transitions (0.5 = half of the screen height)
transitionOverlap (optional)
Default: false
Overlaps the transitions, rendering both sections at the same time during each transition.
padStart (option)
Default: true
Pads the start of the page to equal the same duration of scrolling as other sections (you might want to remove this if your animation doesn't begin by entering the frame).
padEnd (option)
Default: true
Pads the end of the page to equal the same duration of scrolling as other sections (you might want to remove this if your animation doesn't end by leaving the frame).
getScrollTransition (Function): Parameters
Object
- percent : (number: [0-1]) The value of the section percent.
- from : (number: [0-1]) Start value of the section transition.
- to : (number: [0-1]) End value of the section transition.
- transition : (string: TransitionType) Transition type.
- reverse : (boolean) Reverse the direction (0 to 1 becomes 1 to 0).
Transition types
Thanks to Gaëtan Renaudeau.
Options:
- linear : No easing, no acceleration
- easeIn : Accelerating from zero velocity
- easeOut : Decelerating to zero velocity
- easeInOut : Acceleration until halfway, then deceleration
- solid : 1 when higher than 0.00