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.

Try the demo

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