Skip to content

Commit b157abf

Browse files
bitworkingbitworking
committedOct 19, 2018
Merge branch 'v2'
·
v2.3.0v2.0.0
2 parents 96e7ec5 + bc29623 commit b157abf

32 files changed

+14491
-5098
lines changed
 

‎.babelrc

+1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
"modules": false
55
}],
66
"stage-0",
7+
"stage-3",
78
"react"
89
]
910
}

‎README.md

+22-153
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,15 @@
11
# react-scrollmagic
22

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

7+
# Introduction
8+
9+
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).
10+
11+
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).
12+
713
## Install
814

915
```bash
@@ -14,15 +20,15 @@ npm install --save react-scrollmagic
1420

1521
```jsx
1622
import React from 'react';
17-
import { SMController, SMScene } from 'react-scrollmagic';
23+
import { Controller, Scene } from 'react-scrollmagic';
1824

1925
const App = () => (
2026
<div>
21-
<SMController>
22-
<SMScene duration={600} pin={true}>
27+
<Controller>
28+
<Scene duration={600} pin>
2329
<div>Sticky Example</div>
24-
</SMScene>
25-
</SMController>
30+
</Scene>
31+
</Controller>
2632
</div>
2733
);
2834
```
@@ -35,18 +41,16 @@ Examples source:
3541

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

38-
## Documentation
44+
# Documentation
3945

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

4248
http://scrollmagic.io/docs/ScrollMagic.Controller.html
4349
http://scrollmagic.io/docs/ScrollMagic.Scene.html
44-
https://greensock.com/docs/TweenMax
45-
https://greensock.com/docs/TimelineMax
4650

4751
There are two components available:
4852

49-
## SMController
53+
## Controller
5054

5155
Props:
5256

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

61-
## SMScene
65+
## Scene
6266

63-
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.
67+
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.
6468

65-
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.
69+
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.
6670

67-
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.
71+
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.
72+
73+
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.
6874

6975
Props:
7076

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

8691
## Types
8792

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

95-
### Tween
96-
97-
name | type | optional | default | more info
98-
--- | --- | --- | --- | ---
99-
target | any | yes | child element
100-
duration | number | yes | 1
101-
from | any | yes | undefined | [link](https://greensock.com/docs/TimelineMax/from())
102-
to | any | yes | undefined | [link](https://greensock.com/docs/TimelineMax/to())
103-
staggerFrom | any | yes | undefined | [link](https://greensock.com/docs/TimelineMax/staggerFrom())
104-
staggerTo | any | yes | undefined | [link](https://greensock.com/docs/TimelineMax/staggerTo())
105-
stagger | number | yes | 0
106-
onCompleteAll | Function | yes | null
107-
position | number or string | yes | "+=0" | only used if tween is part of timeline
108-
109-
If from and to are set, then [TimelineMax.fromTo()](https://greensock.com/docs/TimelineMax/fromTo()) is used.
110-
If staggerFrom and staggerTo are set, then [TimelineMax.staggerFromTo()](https://greensock.com/docs/TimelineMax/staggerFromTo()) is used.
111-
112-
Examples:
113-
114-
```jsx
115-
// from, to, staggerFrom and staggerTo are not set, so TimelineMax.to() is used
116-
const App = () => (
117-
<div>
118-
<SMController>
119-
<SMScene
120-
duration={300}
121-
tween={{
122-
css: {
123-
left: '0px',
124-
rotation: -360,
125-
},
126-
ease: 'Strong.easeOut',
127-
}}>
128-
<div>Tween.to Test</div>
129-
</SMScene>
130-
</SMController>
131-
</div>
132-
);
133-
```
134-
135-
```jsx
136-
// from and to are set, so TimelineMax.fromTo() is used
137-
const App = () => (
138-
<div>
139-
<SMController>
140-
<SMScene
141-
duration={200}
142-
tween={{
143-
from: {
144-
css: {
145-
left: '0px',
146-
rotation: -360,
147-
},
148-
ease: 'Strong.easeOut',
149-
},
150-
to: {
151-
css: {
152-
left: '100px',
153-
rotation: -180,
154-
},
155-
ease: 'Strong.easeOut',
156-
},
157-
}}>
158-
<div>Tween.fromTo Test</div>
159-
</SMScene>
160-
</SMController>
161-
</div>
162-
);
163-
```
164-
165-
### Timeline
166-
167-
name | type | optional | default
168-
--- | --- | --- | ---
169-
tweens | Tween[] | yes | undefined
170-
delay | number | yes | 0
171-
stagger | number | yes | 0
172-
align | "sequence", "start" or "normal" | yes | "normal"
173-
repeat | number | yes | 0
174-
repeatDelay | number | yes | 0
175-
yoyo | boolean | yes | false
176-
177-
Examples:
178-
179-
```jsx
180-
// The use of the "css" property (like in the Tween examples) would be more efficient but it also works without.
181-
// The GreenSock TweenMax function figures it out by itself which are css properties
182-
// and which are Tween properties.
183-
const App = () => (
184-
<div>
185-
<SMController>
186-
<SMScene
187-
pin={true}
188-
reverse={true}
189-
offset={100}
190-
duration={800}
191-
timeline={{
192-
tweens: [
193-
{
194-
target: '.text',
195-
staggerFrom: {
196-
opacity: 0,
197-
color: '#ff0000',
198-
},
199-
stagger: 0.15,
200-
},
201-
{
202-
target: '.textContainer',
203-
to: {
204-
scale: 2
205-
},
206-
},
207-
{
208-
target: '.textContainer',
209-
to: {
210-
scaleY: 0,
211-
ease: 'Bounce.easeOut',
212-
},
213-
},
214-
]
215-
}}
216-
>
217-
<div className="textContainer">
218-
<span className="text">G</span>
219-
<span className="text">A</span>
220-
<span className="text">N</span>
221-
<span className="text">G</span>
222-
<span className="text">S</span>
223-
<span className="text">T</span>
224-
<span className="text">A</span>
225-
</div>
226-
</SMScene>
227-
</SMController>
228-
</div>
229-
);
230-
```
231100

232101
This project was bootstrapped with:
233102

‎example/package.json

+15-3
Original file line numberDiff line numberDiff line change
@@ -6,17 +6,29 @@
66
"private": true,
77
"dependencies": {
88
"flow-bin": "^0.81.0",
9+
"next": "^7.0.2",
910
"react": "^16.4.1",
1011
"react-dom": "^16.4.1",
12+
"react-gsap": "1.0.16",
1113
"react-router-dom": "^4.3.1",
12-
"react-scripts": "^1.1.4",
14+
"react-scripts": "2.0.5",
1315
"react-scrollmagic": "link:..",
1416
"styled-components": "^3.4.9"
1517
},
1618
"scripts": {
1719
"start": "react-scripts start",
1820
"build": "react-scripts build",
1921
"test": "react-scripts test --env=jsdom",
20-
"eject": "react-scripts eject"
21-
}
22+
"eject": "react-scripts eject",
23+
"next:dev": "next",
24+
"next:build": "next build",
25+
"next:start": "next start",
26+
"next:bs": "next build && next start"
27+
},
28+
"browserslist": [
29+
">0.2%",
30+
"not dead",
31+
"not ie <= 11",
32+
"not op_mini all"
33+
]
2234
}

‎example/pages/about.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export default () => (
2+
<div>
3+
<p>This is the about page</p>
4+
</div>
5+
)

‎example/pages/index.js

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import { default as React } from 'react';
2+
import Link from 'next/link';
3+
import styled from 'styled-components';
4+
import { Tween, Timeline } from 'react-gsap';
5+
import { Controller, Scene } from 'react-scrollmagic';
6+
7+
const StickyStyled = styled.div`
8+
display: inline-block;
9+
`;
10+
11+
const Sticky1 = styled.div`
12+
height: 100vh;
13+
background-color: #62bbdb;
14+
font-size: 50px;
15+
`;
16+
17+
const Index = () => (
18+
<div>
19+
<Link href="/about">
20+
<button>Go to About Page</button>
21+
</Link>
22+
23+
<div style={{ height: '100vh' }} />
24+
25+
<Controller>
26+
<Scene duration={600} pin triggerHook="onLeave" indicators>
27+
<Sticky1>
28+
Sticky 1
29+
</Sticky1>
30+
</Scene>
31+
<div style={{ height: '40vh' }} />
32+
<Scene duration={700} pin={true} triggerHook="onLeave" indicators>
33+
{(event, progress) => (
34+
<div style={{ height: '100vh', backgroundColor: '#8be5b1', fontSize: '50px', padding: '50px' }}>
35+
<Tween from={{ x: '200px', y: '300px', rotation: 180 }} totalProgress={progress} paused>
36+
<StickyStyled>Sticky 2</StickyStyled>
37+
</Tween>
38+
</div>
39+
)}
40+
</Scene>
41+
</Controller>
42+
43+
<div style={{ height: '100vh' }} />
44+
45+
</div>
46+
);
47+
48+
export default Index;

‎example/src/App.js

+3-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,9 @@ const AppStyled = styled.div`
2424
`;
2525

2626
const Home = () => (
27-
<div />
27+
<div style={{ marginLeft: '400px' }}>
28+
Empty home...click on the examples
29+
</div>
2830
);
2931

3032
const App = () => (

‎example/src/components/ScrollMagicExamples/ClassToggle.js

+9-9
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// @flow
22
import React from 'react';
33
import styled from 'styled-components';
4-
import { SMController, SMScene } from 'react-scrollmagic';
4+
import { Controller, Scene } from 'react-scrollmagic';
55

66
const ClassToggleStyled = styled.div`
77
.section {
@@ -29,16 +29,16 @@ const ClassToggle = () => (
2929
<ClassToggleStyled>
3030
<div className="section" />
3131
<div id="trigger" />
32-
<SMController>
33-
<SMScene duration={200} classToggle="zap" triggerElement="#trigger" indicators={true}>
34-
{(event, progress) => (
35-
<div className="test">Pin Test {event} {progress}</div>
32+
<Controller>
33+
<Scene duration={200} classToggle="zap" triggerElement="#trigger" indicators={true}>
34+
{(progress, event) => (
35+
<div className="test">Pin Test {event.type} {progress}</div>
3636
)}
37-
</SMScene>
38-
<SMScene classToggle={['.test', 'yellow']} reverse={false} indicators={true}>
37+
</Scene>
38+
<Scene classToggle={['.test', 'yellow']} reverse={false} indicators={true}>
3939
<div>Toggle other class</div>
40-
</SMScene>
41-
</SMController>
40+
</Scene>
41+
</Controller>
4242
<div className="section" />
4343
</ClassToggleStyled>
4444
);

0 commit comments

Comments
 (0)
Please sign in to comment.