Skip to content

Commit

Permalink
Merge branch 'v2'
Browse files Browse the repository at this point in the history
  • Loading branch information
@bitworking
bitworking committed Oct 19, 2018
2 parents 96e7ec5 + bc29623 commit b157abf
Show file tree
Hide file tree
Showing 32 changed files with 14,491 additions and 5,098 deletions.
1 change: 1 addition & 0 deletions .babelrc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
"modules": false
}],
"stage-0",
"stage-3",
"react"
]
}
175 changes: 22 additions & 153 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,15 @@
# react-scrollmagic

> React declarative component for ScrollMagic
> React components for ScrollMagic
[![NPM](https://img.shields.io/npm/v/react-scrollmagic.svg)](https://www.npmjs.com/package/react-scrollmagic)

# Introduction

react-scrollmagic lets you use the [ScrollMagic](http://scrollmagic.io/) library in React in a fully declarative way. It abstracts away the direct use of the ScrollMagic classes [ScrollMagic.Controller](http://scrollmagic.io/docs/ScrollMagic.Controller.html) and [ScrollMagic.Scene](http://scrollmagic.io/docs/ScrollMagic.Scene.html).

From version 2 on the GSAP library in no more included. But react-scrollmagic plays nicely together with [react-gsap](https://github.com/bitworking/react-gsap).

## Install

```bash
Expand All @@ -14,15 +20,15 @@ npm install --save react-scrollmagic

```jsx
import React from 'react';
import { SMController, SMScene } from 'react-scrollmagic';
import { Controller, Scene } from 'react-scrollmagic';

const App = () => (
<div>
<SMController>
<SMScene duration={600} pin={true}>
<Controller>
<Scene duration={600} pin>
<div>Sticky Example</div>
</SMScene>
</SMController>
</Scene>
</Controller>
</div>
);
```
Expand All @@ -35,18 +41,16 @@ Examples source:

https://github.com/bitworking/react-scrollmagic/tree/master/example/src/components/ScrollMagicExamples

## Documentation
# Documentation

These React components use http://scrollmagic.io/ and https://greensock.com/ internally. So for an in-depth documentation please visits following sites:
These React components use http://scrollmagic.io/ internally. So for an in-depth documentation please visits following sites:

http://scrollmagic.io/docs/ScrollMagic.Controller.html
http://scrollmagic.io/docs/ScrollMagic.Scene.html
https://greensock.com/docs/TweenMax
https://greensock.com/docs/TimelineMax

There are two components available:

## SMController
## Controller

Props:

Expand All @@ -58,13 +62,15 @@ globalSceneOptions | object | yes | {} | [link](http://scrollmagic.io/docs/Scrol
loglevel | number | yes | 2
refreshInterval | number | yes | 100

## SMScene
## Scene

The SMScene component only consumes a single child. If you want to animate multiple children then you have to wrap them in a HTML element.
The Scene component only consumes a single child. If you want to animate multiple children then you have to wrap them in a HTML element.

SMScene sets the ref for the child component automatically. This only works for HTML tags, Styled Components or React.forwardRef components. If you use stateless or stateful components then you need to set the triggerElement prop, pin and target selector or wrap them in a HTML tag. See [Components.js](https://github.com/bitworking/react-scrollmagic/blob/master/example/src/components/ScrollMagicExamples/Components.js) for an example.
Scene sets the ref for the child component automatically. This only works for HTML tags, Styled Components or React.forwardRef components. If you use stateless or stateful components then you need to set the triggerElement or pin prop or wrap them in a HTML tag. See [Components.js](https://github.com/bitworking/react-scrollmagic/blob/master/example/src/components/ScrollMagicExamples/Components.js) for an example.

SMScene component also works with a function as child. The function takes an event string as first parameter and the animation progress (0-1) as second parameter. See [ClassToggle.js](https://github.com/bitworking/react-scrollmagic/blob/master/example/src/components/ScrollMagicExamples/ClassToggle.js) for an example.
The Scene component also works with a function as child. The function takes an animation progress (0-1) as first parameter and the event object as second parameter. See [ClassToggle.js](https://github.com/bitworking/react-scrollmagic/blob/master/example/src/components/ScrollMagicExamples/ClassToggle.js) for an example.

From version 2 on it also works with a [react-gsap](https://github.com/bitworking/react-gsap) Tween or Timeline component as direct child. See [SectionWipes2.js](https://github.com/bitworking/react-scrollmagic/blob/master/example/src/components/ScrollMagicExamples/SectionWipes2.js) for an example.

Props:

Expand All @@ -80,8 +86,7 @@ indicators | boolean | yes | false | only boolean in contrast to plugin options:
classToggle | string or string[2] | yes | undefined | [link](http://scrollmagic.io/docs/ScrollMagic.Scene.html#setClassToggle)
pin | boolean or string | yes | undefined | [link](http://scrollmagic.io/docs/ScrollMagic.Scene.html#setPin)
pinSettings | PinSettings | yes | undefined | See Types and [link](http://scrollmagic.io/docs/ScrollMagic.Scene.html#setPin)
tween | Tween | yes | undefined | See Types and [link](https://greensock.com/docs/TweenMax)
timeline | Timeline | yes | undefined | See Types and [link](https://greensock.com/docs/TimelineMax)


## Types

Expand All @@ -92,142 +97,6 @@ name | type | optional | default
pushFollowers | boolean | yes | true
spacerClass | string | yes | "scrollmagic-pin-spacer"

### Tween

name | type | optional | default | more info
--- | --- | --- | --- | ---
target | any | yes | child element
duration | number | yes | 1
from | any | yes | undefined | [link](https://greensock.com/docs/TimelineMax/from())
to | any | yes | undefined | [link](https://greensock.com/docs/TimelineMax/to())
staggerFrom | any | yes | undefined | [link](https://greensock.com/docs/TimelineMax/staggerFrom())
staggerTo | any | yes | undefined | [link](https://greensock.com/docs/TimelineMax/staggerTo())
stagger | number | yes | 0
onCompleteAll | Function | yes | null
position | number or string | yes | "+=0" | only used if tween is part of timeline

If from and to are set, then [TimelineMax.fromTo()](https://greensock.com/docs/TimelineMax/fromTo()) is used.
If staggerFrom and staggerTo are set, then [TimelineMax.staggerFromTo()](https://greensock.com/docs/TimelineMax/staggerFromTo()) is used.

Examples:

```jsx
// from, to, staggerFrom and staggerTo are not set, so TimelineMax.to() is used
const App = () => (
<div>
<SMController>
<SMScene
duration={300}
tween={{
css: {
left: '0px',
rotation: -360,
},
ease: 'Strong.easeOut',
}}>
<div>Tween.to Test</div>
</SMScene>
</SMController>
</div>
);
```

```jsx
// from and to are set, so TimelineMax.fromTo() is used
const App = () => (
<div>
<SMController>
<SMScene
duration={200}
tween={{
from: {
css: {
left: '0px',
rotation: -360,
},
ease: 'Strong.easeOut',
},
to: {
css: {
left: '100px',
rotation: -180,
},
ease: 'Strong.easeOut',
},
}}>
<div>Tween.fromTo Test</div>
</SMScene>
</SMController>
</div>
);
```

### Timeline

name | type | optional | default
--- | --- | --- | ---
tweens | Tween[] | yes | undefined
delay | number | yes | 0
stagger | number | yes | 0
align | "sequence", "start" or "normal" | yes | "normal"
repeat | number | yes | 0
repeatDelay | number | yes | 0
yoyo | boolean | yes | false

Examples:

```jsx
// The use of the "css" property (like in the Tween examples) would be more efficient but it also works without.
// The GreenSock TweenMax function figures it out by itself which are css properties
// and which are Tween properties.
const App = () => (
<div>
<SMController>
<SMScene
pin={true}
reverse={true}
offset={100}
duration={800}
timeline={{
tweens: [
{
target: '.text',
staggerFrom: {
opacity: 0,
color: '#ff0000',
},
stagger: 0.15,
},
{
target: '.textContainer',
to: {
scale: 2
},
},
{
target: '.textContainer',
to: {
scaleY: 0,
ease: 'Bounce.easeOut',
},
},
]
}}
>
<div className="textContainer">
<span className="text">G</span>
<span className="text">A</span>
<span className="text">N</span>
<span className="text">G</span>
<span className="text">S</span>
<span className="text">T</span>
<span className="text">A</span>
</div>
</SMScene>
</SMController>
</div>
);
```

This project was bootstrapped with:

Expand Down
18 changes: 15 additions & 3 deletions example/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,17 +6,29 @@
"private": true,
"dependencies": {
"flow-bin": "^0.81.0",
"next": "^7.0.2",
"react": "^16.4.1",
"react-dom": "^16.4.1",
"react-gsap": "1.0.16",
"react-router-dom": "^4.3.1",
"react-scripts": "^1.1.4",
"react-scripts": "2.0.5",
"react-scrollmagic": "link:..",
"styled-components": "^3.4.9"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
"eject": "react-scripts eject",
"next:dev": "next",
"next:build": "next build",
"next:start": "next start",
"next:bs": "next build && next start"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}
5 changes: 5 additions & 0 deletions example/pages/about.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
export default () => (
<div>
<p>This is the about page</p>
</div>
)
48 changes: 48 additions & 0 deletions example/pages/index.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
import { default as React } from 'react';
import Link from 'next/link';
import styled from 'styled-components';
import { Tween, Timeline } from 'react-gsap';
import { Controller, Scene } from 'react-scrollmagic';

const StickyStyled = styled.div`
display: inline-block;
`;

const Sticky1 = styled.div`
height: 100vh;
background-color: #62bbdb;
font-size: 50px;
`;

const Index = () => (
<div>
<Link href="/about">
<button>Go to About Page</button>
</Link>

<div style={{ height: '100vh' }} />

<Controller>
<Scene duration={600} pin triggerHook="onLeave" indicators>
<Sticky1>
Sticky 1
</Sticky1>
</Scene>
<div style={{ height: '40vh' }} />
<Scene duration={700} pin={true} triggerHook="onLeave" indicators>
{(event, progress) => (
<div style={{ height: '100vh', backgroundColor: '#8be5b1', fontSize: '50px', padding: '50px' }}>
<Tween from={{ x: '200px', y: '300px', rotation: 180 }} totalProgress={progress} paused>
<StickyStyled>Sticky 2</StickyStyled>
</Tween>
</div>
)}
</Scene>
</Controller>

<div style={{ height: '100vh' }} />

</div>
);

export default Index;
4 changes: 3 additions & 1 deletion example/src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,9 @@ const AppStyled = styled.div`
`;

const Home = () => (
<div />
<div style={{ marginLeft: '400px' }}>
Empty home...click on the examples
</div>
);

const App = () => (
Expand Down
18 changes: 9 additions & 9 deletions example/src/components/ScrollMagicExamples/ClassToggle.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
// @flow
import React from 'react';
import styled from 'styled-components';
import { SMController, SMScene } from 'react-scrollmagic';
import { Controller, Scene } from 'react-scrollmagic';

const ClassToggleStyled = styled.div`
.section {
Expand Down Expand Up @@ -29,16 +29,16 @@ const ClassToggle = () => (
<ClassToggleStyled>
<div className="section" />
<div id="trigger" />
<SMController>
<SMScene duration={200} classToggle="zap" triggerElement="#trigger" indicators={true}>
{(event, progress) => (
<div className="test">Pin Test {event} {progress}</div>
<Controller>
<Scene duration={200} classToggle="zap" triggerElement="#trigger" indicators={true}>
{(progress, event) => (
<div className="test">Pin Test {event.type} {progress}</div>
)}
</SMScene>
<SMScene classToggle={['.test', 'yellow']} reverse={false} indicators={true}>
</Scene>
<Scene classToggle={['.test', 'yellow']} reverse={false} indicators={true}>
<div>Toggle other class</div>
</SMScene>
</SMController>
</Scene>
</Controller>
<div className="section" />
</ClassToggleStyled>
);
Expand Down
Loading

0 comments on commit b157abf

Please sign in to comment.