Skip to content

Commit e7f1797

Browse files
author
Jan Fischer
committed
Bump version to 2.3.0 and test nested Scene component
1 parent dda8aa8 commit e7f1797

File tree

2 files changed

+41
-39
lines changed

2 files changed

+41
-39
lines changed

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

Lines changed: 38 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ const Sticky2Styled = styled.div`
1111
height: 70vh;
1212
background: linear-gradient(160deg, #f47c66 0%,#e51906 100%);
1313
}
14-
14+
1515
.sticky, .sticky2 {
1616
height: 100vh;
1717
background: linear-gradient(160deg, #e4f5fc 0%,#bfe8f9 26%,#9fd8ef 59%,#0068f2 100%);
@@ -51,43 +51,45 @@ const Sticky2 = () => (
5151
<Sticky2Styled>
5252
<div className="section" />
5353
<Controller>
54-
<Scene
55-
triggerHook="onLeave"
56-
duration={1000}
57-
pin
58-
>
59-
{(progress) => (
60-
<div className="sticky">
61-
<Timeline totalProgress={progress} paused>
62-
<Tween
63-
from={{ x: '10%', top: '60%' }}
64-
to={{ x: '60%', top: '10%' }}
65-
>
66-
<div className="animation">
67-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29.267 29.267">
68-
<path d="M25.925 13.574c.405.173.928.295 1.571.366.295.025.579.036.86.036.326 0 .632-.018.911-.054-.351.329-.803.614-1.349.857-.552.244-1.262.365-2.138.365a9.544 9.544 0 0 1-2.23 4.028c-1.082 1.188-2.37 2.169-3.862 2.943s-3.131 1.312-4.926 1.617c-1.01.182-2.019.272-3.033.272-.765 0-1.533-.055-2.297-.164a15.456 15.456 0 0 1-5.118-1.617C2.669 21.378 1.232 20.169 0 18.599a7.4 7.4 0 0 0 2.433 1.435 8.417 8.417 0 0 0 5.828-.037 7.352 7.352 0 0 0 2.594-1.672 2.821 2.821 0 0 1-.441.036c-.279 0-.534-.049-.764-.146-.367-.146-.62-.345-.757-.594-.142-.249-.142-.524 0-.823.137-.298.493-.562 1.067-.792a5.375 5.375 0 0 1-.566.034c-.283 0-.544-.024-.783-.07a3.205 3.205 0 0 1-1.052-.375 3.369 3.369 0 0 1-.743-.577 3.723 3.723 0 0 1-.494-.66 2.57 2.57 0 0 1 .823-.499c.305-.116.706-.188 1.205-.211-1.118-.243-1.917-.606-2.391-1.078-.475-.475-.777-1.022-.895-1.643.33-.051.657-.108.994-.174.333-.069.6-.076.796-.029-.953-.475-1.614-1.029-1.994-1.662-.327-.559-.492-1.085-.492-1.572 0-.061.006-.127.019-.201a72.606 72.606 0 0 1 4.337 1.644c1.177.501 2.221.988 3.134 1.465.353.142.704.361 1.06.655l1.151.989a21.586 21.586 0 0 1 1.854-3.766c.359-.583.762-1.121 1.213-1.608a6.278 6.278 0 0 1 1.534-1.205c-.023.278-.167.555-.436.822.33-.278.685-.503 1.067-.677.387-.17.792-.283 1.216-.345-.049.28-.248.51-.604.685a8.51 8.51 0 0 1-.93.41c.096-.023.29-.087.574-.189.287-.104.592-.2.915-.283.326-.086.615-.144.879-.164.26-.025.417.021.464.145.072.146.03.271-.127.374a2.52 2.52 0 0 1-.577.267 7.996 7.996 0 0 1-.673.182c-.227.05-.375.086-.447.108l-.677.237a5.371 5.371 0 0 1 2.045.237 5.707 5.707 0 0 1 1.81.953 7.213 7.213 0 0 1 1.441 1.497 6.09 6.09 0 0 1 .914 1.844l.074.293c.021.097.048.205.072.326.244.076.535.12.879.139.34.017.677 0 1.014-.055.332-.054.637-.123.909-.209.276-.085.494-.165.651-.237-.194.476-.569.874-1.124 1.196-.557.32-1.249.505-2.074.555z"/>
69-
</svg>
70-
</div>
71-
</Tween>
72-
<Timeline
73-
target={
74-
<div className="heading">
75-
<h2>This is a cool heading</h2>
76-
</div>
77-
}
78-
>
54+
<div>
55+
<Scene
56+
triggerHook="onLeave"
57+
duration={1000}
58+
pin
59+
>
60+
{(progress) => (
61+
<div className="sticky">
62+
<Timeline totalProgress={progress} paused>
7963
<Tween
80-
from={{ opacity: 0 }}
81-
to={{ opacity: 1 }}
82-
/>
83-
<Tween
84-
to={{ x: '110%' }}
85-
/>
64+
from={{ x: '10%', top: '60%' }}
65+
to={{ x: '60%', top: '10%' }}
66+
>
67+
<div className="animation">
68+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29.267 29.267">
69+
<path d="M25.925 13.574c.405.173.928.295 1.571.366.295.025.579.036.86.036.326 0 .632-.018.911-.054-.351.329-.803.614-1.349.857-.552.244-1.262.365-2.138.365a9.544 9.544 0 0 1-2.23 4.028c-1.082 1.188-2.37 2.169-3.862 2.943s-3.131 1.312-4.926 1.617c-1.01.182-2.019.272-3.033.272-.765 0-1.533-.055-2.297-.164a15.456 15.456 0 0 1-5.118-1.617C2.669 21.378 1.232 20.169 0 18.599a7.4 7.4 0 0 0 2.433 1.435 8.417 8.417 0 0 0 5.828-.037 7.352 7.352 0 0 0 2.594-1.672 2.821 2.821 0 0 1-.441.036c-.279 0-.534-.049-.764-.146-.367-.146-.62-.345-.757-.594-.142-.249-.142-.524 0-.823.137-.298.493-.562 1.067-.792a5.375 5.375 0 0 1-.566.034c-.283 0-.544-.024-.783-.07a3.205 3.205 0 0 1-1.052-.375 3.369 3.369 0 0 1-.743-.577 3.723 3.723 0 0 1-.494-.66 2.57 2.57 0 0 1 .823-.499c.305-.116.706-.188 1.205-.211-1.118-.243-1.917-.606-2.391-1.078-.475-.475-.777-1.022-.895-1.643.33-.051.657-.108.994-.174.333-.069.6-.076.796-.029-.953-.475-1.614-1.029-1.994-1.662-.327-.559-.492-1.085-.492-1.572 0-.061.006-.127.019-.201a72.606 72.606 0 0 1 4.337 1.644c1.177.501 2.221.988 3.134 1.465.353.142.704.361 1.06.655l1.151.989a21.586 21.586 0 0 1 1.854-3.766c.359-.583.762-1.121 1.213-1.608a6.278 6.278 0 0 1 1.534-1.205c-.023.278-.167.555-.436.822.33-.278.685-.503 1.067-.677.387-.17.792-.283 1.216-.345-.049.28-.248.51-.604.685a8.51 8.51 0 0 1-.93.41c.096-.023.29-.087.574-.189.287-.104.592-.2.915-.283.326-.086.615-.144.879-.164.26-.025.417.021.464.145.072.146.03.271-.127.374a2.52 2.52 0 0 1-.577.267 7.996 7.996 0 0 1-.673.182c-.227.05-.375.086-.447.108l-.677.237a5.371 5.371 0 0 1 2.045.237 5.707 5.707 0 0 1 1.81.953 7.213 7.213 0 0 1 1.441 1.497 6.09 6.09 0 0 1 .914 1.844l.074.293c.021.097.048.205.072.326.244.076.535.12.879.139.34.017.677 0 1.014-.055.332-.054.637-.123.909-.209.276-.085.494-.165.651-.237-.194.476-.569.874-1.124 1.196-.557.32-1.249.505-2.074.555z"/>
70+
</svg>
71+
</div>
72+
</Tween>
73+
<Timeline
74+
target={
75+
<div className="heading">
76+
<h2>This is a cool heading</h2>
77+
</div>
78+
}
79+
>
80+
<Tween
81+
from={{ opacity: 0 }}
82+
to={{ opacity: 1 }}
83+
/>
84+
<Tween
85+
to={{ x: '110%' }}
86+
/>
87+
</Timeline>
8688
</Timeline>
87-
</Timeline>
88-
</div>
89-
)}
90-
</Scene>
89+
</div>
90+
)}
91+
</Scene>
92+
</div>
9193
</Controller>
9294
<div className="section" />
9395
</Sticky2Styled>

‎package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-scrollmagic",
3-
"version": "2.2.0",
3+
"version": "2.3.0",
44
"description": "React declarative component for ScrollMagic",
55
"author": "bitworking",
66
"license": "MIT",
@@ -24,8 +24,8 @@
2424
"deploy": "gh-pages -d example/build"
2525
},
2626
"peerDependencies": {
27-
"react": "^16.0.0",
28-
"react-dom": "^16.0.0"
27+
"react": "^16.0.0-0 || ^17.0.0-0",
28+
"react-dom": "^16.0.0-0 || ^17.0.0-0"
2929
},
3030
"devDependencies": {
3131
"babel-core": "^6.26.3",

0 commit comments

Comments
 (0)