Merge branch 'develop'

Author: bitworking

README.md

@@ -76,17 +76,17 @@ Props:
 
 name | type | optional | default | more info
 --- | --- | --- | --- | ---
-duration | number or string | yes | 0 
-offset | number or string | yes | 0
+duration | number or string | yes | 0 | Can be changed on-the-fly
+offset | number or string | yes | 0 | Can be changed on-the-fly
 triggerElement | string, object or null | yes | child element
-triggerHook | number or string | yes | "onCenter" | [link](http://scrollmagic.io/docs/ScrollMagic.Scene.html#constructor)
-reverse | boolean | yes | true
+triggerHook | number or string | yes | "onCenter" | [link](http://scrollmagic.io/docs/ScrollMagic.Scene.html#constructor) (Can be changed on-the-fly)
+reverse | boolean | yes | true | Can be changed on-the-fly
 loglevel | number | yes | 2
 indicators | boolean | yes | false | only boolean in contrast to plugin options: [link](http://scrollmagic.io/docs/debug.addIndicators.html#Scene.addIndicators)
 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)
-
+enabled | boolean | yes | true | Can be changed on-the-fly
 
 ## Types
 

example/package.json

@@ -11,7 +11,7 @@
     "react-dom": "^16.4.1",
     "react-gsap": "1.0.16",
     "react-router-dom": "^4.3.1",
-    "react-scripts": "2.0.5",
+    "react-scripts": "3.0.0",
     "react-scrollmagic": "link:..",
     "styled-components": "^3.4.9"
   },

example/src/components/ScrollMagicExamples/Sticky.js

@@ -26,7 +26,7 @@ const Sticky = () => (
   <StickyStyled>
     <div className="section" />
     <Controller>
-      <Scene duration={600} pin={true}>
+      <Scene duration={600} pin={true} enabled={true}>
         <div className="sticky"><div>Pin Test</div></div>
       </Scene>
       <Scene duration={200} pin={{ pushFollowers: false }}>

example/yarn.lock

@@ -1,6 +1,6 @@
 {
   "name": "react-scrollmagic",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "description": "React declarative component for ScrollMagic",
   "author": "bitworking",
   "license": "MIT",
@@ -49,8 +49,8 @@
     "gh-pages": "2.0.0",
     "react": "^16.4.1",
     "react-dom": "^16.4.1",
-    "react-scripts": "2.0.5",
-    "rollup": "^0.64.1",
+    "react-scripts": "3.0.0",
+    "rollup": "0.68.2",
     "rollup-plugin-babel": "^3.0.7",
     "rollup-plugin-commonjs": "^9.1.3",
     "rollup-plugin-cpy": "^1.0.0",

package.json

@@ -136,9 +136,48 @@ class SceneBase extends React.PureComponent<SceneBaseProps, SceneBaseState> {
       this.scene.addIndicators({ name: ' ' });
     }
 
+    if (enabled !== undefined) {
+      this.scene.enabled(enabled);
+    }
+
     this.scene.addTo(controller);
   }
 
+  componentDidUpdate(prevProps: SceneBaseProps) {
+    const {
+      duration,
+      offset,
+      triggerElement,
+      triggerHook,
+      reverse,
+      enabled,
+    } = this.props;
+
+    if (duration !== undefined && duration !== prevProps.duration) {
+      this.scene.duration(duration);
+    }
+
+    if (offset !== undefined && offset !== prevProps.offset) {
+      this.scene.offset(offset);
+    }
+
+    if (triggerElement !== undefined && triggerElement !== prevProps.triggerElement) {
+      // this.scene.triggerElement(triggerElement);
+    }
+
+    if (triggerHook !== undefined && triggerHook !== prevProps.triggerHook) {
+      this.scene.triggerHook(triggerHook);
+    }
+
+    if (reverse !== undefined && reverse !== prevProps.reverse) {
+      this.scene.reverse(reverse);
+    }
+
+    if (enabled !== undefined && enabled !== prevProps.enabled) {
+      this.scene.enabled(enabled);
+    }
+  }
+
   componentWillUnmount() {
     this.scene.destroy();
   }