fix: react 17 Timeline target

Author: Jan Fischer

.eslintrc

@@ -23,7 +23,7 @@
     "gsap": "^3.2.6",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
-    "react-gsap": "3.2.0"
+    "react-gsap": "3.2.1"
   },
   "devDependencies": {
     "@types/react": "^16.8.23",

packages/docz/package.json

@@ -12,7 +12,7 @@
     "next": "^9.5.1",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
-    "react-gsap": "3.2.0"
+    "react-gsap": "3.2.1"
   },
   "devDependencies": {
     "@types/node": "^14.14.22",

packages/next/package.json

@@ -17,7 +17,7 @@
     "gsap": "^3.2.6",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "react-gsap": "3.2.0",
+    "react-gsap": "3.2.1",
     "react-router-dom": "^5.1.2",
     "react-scripts": "4.0.1",
     "react-transition-group": "^4.3.0",

packages/playground/package.json

@@ -36,9 +36,9 @@ const TransitionItem = ({
           paused={true}
           playState={
             state === 'entering'
-              ? PlayState.reverse
+              ? PlayState.restartReverse
               : state === 'exiting'
-              ? PlayState.play
+              ? PlayState.restart
               : undefined
           }
           ease="Back.easeInOut"

packages/playground/src/examples/Transition.tsx

@@ -1,6 +1,6 @@
 {
   "name": "react-gsap",
-  "version": "3.2.0",
+  "version": "3.2.1",
   "description": "React components for GSAP",
   "author": "bitworking",
   "license": "MIT",

packages/react-gsap/package.json

@@ -177,7 +177,9 @@ function isDOMTypeElement(element: any) {
 
 // https://stackoverflow.com/a/39165137
 function getReactNode(dom: any, traverseUp = 0) {
-  const key = Object.keys(dom ?? {}).find(key => key.startsWith('__reactInternalInstance$'));
+  const key = Object.keys(dom ?? {}).find(
+    key => key.startsWith('__reactInternalInstance$') || key.startsWith('__reactFiber$')
+  );
 
   const domFiber = key && dom[key];
   if (!domFiber) return null;

packages/react-gsap/src/helper.ts

@@ -134,12 +134,12 @@ class Scroller extends Provider<ScrollerProps, ScrollerState> {
 
       let progress = 0;
 
-      if (triggerPosition == TriggerPosition.top) {
+      if (triggerPosition === TriggerPosition.top) {
         const height = entry.boundingClientRect.height;
         const top = entry.boundingClientRect.top;
         const position = top <= 0 ? -top : 0;
         progress = position / height;
-      } else if (triggerPosition == TriggerPosition.bottom) {
+      } else if (triggerPosition === TriggerPosition.bottom) {
         const height = entry.boundingClientRect.height;
         const position = height - Math.max(Math.min(entry.boundingClientRect.top, height), 0);
         progress = position / height;
@@ -168,7 +168,7 @@ class Scroller extends Provider<ScrollerProps, ScrollerState> {
   };
 
   getTotalProgress(progresses: number[]) {
-    const length = progresses.length;
+    // const length = progresses.length;
     return progresses.reduceRight((previousValue, currentValue) => {
       if (previousValue) {
         return Math.min(currentValue || 1, 1) + previousValue;