Add react-is, Timeline targets Map, able to set refs from target forwardRef component

Author: Jan Fischer

packages/playground/package.json

@@ -17,7 +17,7 @@
     "gsap": "^3.2.6",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "react-gsap": "2.0.6",
+    "react-gsap": "2.2.0",
     "react-router-dom": "^5.1.2",
     "react-scripts": "3.4.1",
     "react-transition-group": "^4.3.0",

packages/playground/src/examples/Animation.tsx

@@ -34,7 +34,7 @@ export const RubberBand = ({
   children,
   ...rest
 }: {
-  children: React.ReactNode;
+  children: React.ReactElement;
   [key: string]: any;
 }) => (
   <Timeline target={children} {...rest}>

packages/playground/src/examples/Timeline.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React, { forwardRef, Fragment, useRef, useImperativeHandle, ReactElement } from 'react';
 import styled from 'styled-components';
 import { Tween, Timeline, SplitWords, SplitLetters, Controls, PlayState } from 'react-gsap';
 
@@ -114,4 +114,24 @@ const TimelineComponent = () => (
   </TimelineStyled>
 );
 
-export default TimelineComponent;
+const TargetWithNames = forwardRef((props, targets: any) => (
+  <div>
+    <div ref={div => targets.set('div1', div)}>first</div>
+    <div ref={div => targets.set('div2', div)} style={{ display: 'inline-block' }}>
+      second
+    </div>
+    <div ref={div => targets.set('div3', div)}>third</div>
+  </div>
+));
+
+const TimelineTargets = () => {
+  return (
+    <Timeline target={<TargetWithNames />}>
+      <Tween to={{ x: '200px' }} target="div3" position="0" />
+      <Tween to={{ x: '200px' }} target="div1" position="0" />
+      <Tween to={{ x: '200px', rotation: 0 }} from={{ rotation: 180 }} target="div2" position="0" />
+    </Timeline>
+  );
+};
+
+export default TimelineTargets;

packages/react-gsap/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-gsap",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "React components for GSAP",
   "author": "bitworking",
   "license": "MIT",
@@ -25,8 +25,8 @@
   },
   "peerDependencies": {
     "gsap": ">=3",
-    "react": ">=16",
-    "react-dom": ">=16"
+    "react": ">=16.6",
+    "react-dom": ">=16.6"
   },
   "husky": {
     "hooks": {
@@ -44,12 +44,16 @@
   "devDependencies": {
     "@types/react": "^16.9.34",
     "@types/react-dom": "^16.9.7",
+    "@types/react-is": "^16.7.1",
     "gsap": "^3.2.6",
     "husky": "^4.2.5",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "tsdx": "^0.13.2",
     "tslib": "^1.11.1",
     "typescript": "^3.8.3"
+  },
+  "dependencies": {
+    "react-is": "^16.13.1"
   }
 }

packages/react-gsap/src/Timeline.tsx

@@ -1,18 +1,24 @@
-import React, { Fragment } from 'react';
+import React, { Fragment, ReactNode, ReactElement, forwardRef } from 'react';
 import { gsap } from 'gsap';
+import { isForwardRef, isFragment } from 'react-is';
 import { PlayState } from './types';
 import { getTweenFunction, setPlayState, refOrInnerRef, nullishCoalescing } from './helper';
 import Provider, { Context } from './Provider';
+import { TweenProps } from './Tween';
 
 type Label = {
   label: string;
   position: string | number;
 };
 
+export type Targets = Map<string | number, ReactElement>;
+
+export type Target = ReactElement | null;
+
 export type TimelineProps = {
-  children: React.ReactNode;
-  wrapper?: React.ReactElement;
-  target?: any;
+  children: ReactNode;
+  wrapper?: ReactElement;
+  target?: Target;
   position?: string | number;
   labels?: Label[];
 
@@ -29,7 +35,7 @@ class Timeline extends Provider<TimelineProps> {
   static contextType = Context;
 
   timeline: any;
-  targets: any[] = [];
+  targets: Targets = new Map();
 
   setPlayState(playState: PlayState) {
     const { playState: previousPlayState } = this.props;
@@ -45,7 +51,7 @@ class Timeline extends Provider<TimelineProps> {
   }
 
   getSnapshotBeforeUpdate() {
-    this.targets = [];
+    this.targets = new Map();
     return null;
   }
 
@@ -105,12 +111,21 @@ class Timeline extends Provider<TimelineProps> {
     // add tweens or nested timelines to timeline
     this.consumers.forEach(consumer => {
       if (consumer.tween && !consumer.props.children) {
-        const { position, target, stagger, ...vars } = consumer.props;
-        const tween = getTweenFunction(nullishCoalescing(this.targets[target], this.targets), {
-          stagger,
-          ...vars,
-        });
+        const { position, target, stagger, ...vars } = consumer.props as TweenProps;
+
+        const tween = getTweenFunction(
+          // @ts-ignore
+          nullishCoalescing(
+            target ? this.targets.get(target) : null,
+            Array.from(this.targets.values())
+          ),
+          {
+            stagger,
+            ...vars,
+          }
+        );
         this.timeline.add(tween, nullishCoalescing(position, '+=0'));
+        consumer.setGSAP(tween);
       } else {
         const { position } = consumer.props;
         this.timeline.add(consumer.getGSAP(), nullishCoalescing(position, '+=0'));
@@ -139,12 +154,21 @@ class Timeline extends Provider<TimelineProps> {
   }
 
   addTarget(target: any) {
-    // target is null at unmount
     if (target !== null) {
-      this.targets.push(target);
+      this.targets.set(this.targets.size, target);
+    }
+  }
+
+  setTarget(key: string, target: any) {
+    if (target !== null) {
+      this.targets.set(key, target);
     }
   }
 
+  setTargets(targets: Targets) {
+    this.targets = targets;
+  }
+
   getTargets() {
     return this.targets;
   }
@@ -156,20 +180,40 @@ class Timeline extends Provider<TimelineProps> {
     });
   }
 
-  render() {
-    let { target, children, wrapper } = this.props;
+  renderTarget(target?: Target): ReactNode {
+    if (!target) {
+      return null;
+    }
 
-    let output = (
+    // if is forwardRef clone and pass targets as ref
+    if (isForwardRef(target)) {
+      return <target.type ref={this.targets} />;
+    }
+
+    // else iterate the first level of children and set targets
+    return (
       <Fragment>
         {/* First render the target */}
-        {React.Children.map(target, child => {
-          if (child.type.toString() === 'Symbol(react.fragment)') {
+        {React.Children.map<ReactElement, ReactElement>(target, child => {
+          if (isFragment(child)) {
             return React.Children.map(child.props.children, fragmentChild => {
               return this.cloneElement(fragmentChild);
             });
           }
           return this.cloneElement(child);
         })}
+      </Fragment>
+    );
+  }
+
+  render() {
+    let { target, children, wrapper } = this.props;
+
+    const renderedTarget = this.renderTarget(target);
+
+    let output = (
+      <Fragment>
+        {renderedTarget}
         {children}
       </Fragment>
     );

packages/react-gsap/src/Tween.tsx

@@ -4,11 +4,11 @@ import { PlayState } from './types';
 import { getTweenFunction, setPlayState, isEqual, refOrInnerRef } from './helper';
 import { Context } from './Provider';
 
-// import { CSSPlugin } from 'gsap/CSSPlugin';
+import { CSSPlugin } from 'gsap/CSSPlugin';
 import SvgDrawPlugin from './plugins/PlugInSvgDraw';
 import CountPlugin from './plugins/PlugInCount';
 
-// gsap.registerPlugin(CSSPlugin);
+gsap.registerPlugin(CSSPlugin);
 gsap.registerPlugin(SvgDrawPlugin);
 gsap.registerPlugin(CountPlugin);
 
@@ -35,7 +35,7 @@ export type TweenProps = {
   /** One or multiple "refable" components  */
   children?: React.ReactNode;
   wrapper?: React.ReactElement;
-  target?: number;
+  target?: number | string;
   position?: string | number;
 
   from?: any;
@@ -70,7 +70,9 @@ class Tween extends React.Component<TweenProps, {}> {
   }
 
   componentWillUnmount() {
-    this.tween.kill();
+    if (this.tween) {
+      this.tween.kill();
+    }
   }
 
   getSnapshotBeforeUpdate() {
@@ -164,14 +166,25 @@ class Tween extends React.Component<TweenProps, {}> {
     if (this.tween) {
       this.tween.kill();
     }
-    this.tween = getTweenFunction(this.targets, this.props);
+
+    if (this.props.children) {
+      this.tween = getTweenFunction(this.targets, this.props);
+    } else {
+      // why this is needed?
+      this.tween = () => {};
+    }
+
     this.context.registerConsumer(this);
   }
 
   getGSAP() {
     return this.tween;
   }
 
+  setGSAP(tween: any) {
+    this.tween = tween;
+  }
+
   addTarget(target: any) {
     // target is null at unmount
     if (target !== null) {

packages/react-gsap/src/helper.ts

@@ -66,6 +66,7 @@ const getTweenFunction = (targets: any, props: any): gsap.core.Tween | gsap.core
   }
 
   // if multiple tweens (stagger), wrap them in a timeline
+  // TODO: if it's already an timeline add event handlers
   if (Array.isArray(tweenFunction)) {
     tweenFunction.forEach(t => {
       t.paused(false);

packages/react-gsap/src/index.tsx

@@ -1,7 +1,7 @@
 export { default as Tween } from './Tween';
 export { default as Timeline } from './Timeline';
 export { default as Reveal } from './tools/Reveal';
-// export { default as Scroller } from './tools/Scroller';
+export { default as Scroller } from './tools/Scroller';
 export { SplitWords, SplitChars, SplitLetters } from './tools/SplitText';
 export { default as Controls } from './tools/Controls';
 export { PlayState } from './types';

yarn.lock

@@ -1990,6 +1990,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-is@^16.7.1":
+  version "16.7.1"
+  resolved "https://registry.yarnpkg.com/@types/react-is/-/react-is-16.7.1.tgz#d3f1c68c358c00ce116b55ef5410cf486dd08539"
+  integrity sha512-dMLFD2cCsxtDgMkTydQCM0PxDq8vwc6uN5M/jRktDfYvH3nQj6pjC9OrCXS2lKlYoYTNJorI/dI8x9dpLshexQ==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-native@*":
   version "0.62.5"
   resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.62.5.tgz#605c2d31485c515ee18b62e8b29ffdbba404a443"
@@ -13652,7 +13659,7 @@ react-hot-loader@^4.12.20:
     shallowequal "^1.1.0"
     source-map "^0.7.3"
 
-react-is@^16.12.0, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4:
+react-is@^16.12.0, react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==