feat: bump to 3.1.0 and optimize Timeline target handling

Author: Jan Fischer

packages/docz/package.json

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

packages/docz/src/components/Timeline.mdx

@@ -87,7 +87,7 @@ In this way these component can be better reused and the refs not only work in a
 You can also pass an array ref like seen with div2. In this way you can use the `stagger` prop.
 
 ```javascript
-const TargetWithNames = forwardRef((props, ref: any) => {
+const TargetWithNames = forwardRef((props, ref) => {
   const div1 = useRef(null);
   const div2 = useRef([]);
   const div3 = useRef(null);
@@ -112,6 +112,26 @@ const TargetWithNames = forwardRef((props, ref: any) => {
 
 ```
 
+If you want to combine multiple of those named components, you can do it like this:
+
+```javascript
+const TargetWithNamesCombined = forwardRef((props, ref) => {
+  const target1 = useRef({});
+  const target2 = useRef({});
+  useImperativeHandle(ref, () => ({
+    ...target1.current,
+    ...target2.current,
+  }));
+  return (
+    <>
+      <TargetWithNames1 ref={target1} />
+      <TargetWithNames2 ref={target2} />
+    </>
+  );
+});
+
+```
+
 For version < 3:
 
 If you need to target individual elements you can use a special forwardRef function.

packages/next/package.json

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

packages/playground/package.json

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

packages/playground/src/examples/Timeline.tsx

@@ -14,6 +14,22 @@ import { Tween, Timeline, SplitWords, SplitChars, Controls, PlayState } from 're
 
 const TimelineStyled = styled.div``;
 
+const StyledTarget1 = styled.div`
+  height: 200px;
+  background-color: #accef7;
+`;
+
+const StyledTarget2 = styled.div`
+  height: 50px;
+  background-color: #ff4757;
+  padding: 50px;
+`;
+
+const Inline = styled.div`
+  display: inline-block;
+  font-size: 40px;
+`;
+
 const TimelinePlayState = () => {
   const [playing, setPlaying] = React.useState(false);
   const [progress, setProgress] = React.useState(0);
@@ -147,6 +163,44 @@ const TargetWithNames = forwardRef((props, ref: any) => {
   );
 });
 
+const TargetWithNames2 = forwardRef((props, ref: any) => {
+  const div4 = useRef(null);
+  const div5 = useRef<MutableRefObject<any>[]>([]);
+  const div6 = useRef(null);
+  useImperativeHandle(ref, () => ({
+    div4,
+    div5,
+    div6,
+  }));
+  return (
+    <div>
+      <div ref={div4}>first</div>
+      <SplitChars
+        ref={(charRef: MutableRefObject<any>) => div5.current.push(charRef)}
+        wrapper={<span style={{ display: 'inline-block' }} />}
+      >
+        second
+      </SplitChars>
+      <div ref={div6}>third</div>
+    </div>
+  );
+});
+
+const TargetWithNamesCombined = forwardRef((props, ref: any) => {
+  const target1 = useRef({});
+  const target2 = useRef({});
+  useImperativeHandle(ref, () => ({
+    ...target1.current,
+    ...target2.current,
+  }));
+  return (
+    <>
+      <TargetWithNames ref={target1} />
+      <TargetWithNames2 ref={target2} />
+    </>
+  );
+});
+
 const TimelineTargets = () => {
   return (
     <Timeline target={<TargetWithNames />}>
@@ -159,6 +213,16 @@ const TimelineTargets = () => {
 
 //export default TimelineTargets;
 
+const ForwardRefComponent = forwardRef(({ children }, ref: any) => {
+  return (
+    <div>
+      <StyledTarget1 ref={ref}>
+        <span>{children}</span>
+      </StyledTarget1>
+    </div>
+  );
+});
+
 const Component = forwardRef(({ children }, ref?) => {
   const div1 = useRef(null);
   const div2 = useRef(null);
@@ -213,34 +277,98 @@ const Out = () => {
   const divRef1 = useCallback(ref => {
     if (ref !== null) {
       // Ref never updates
-      console.log(ref);
+      // console.log(ref);
     }
   }, []);
 
   const divRef2 = useRef(null);
 
   useEffect(() => {
     // Ref never updates
-    console.log(divRef2.current);
+    // console.log(divRef2.current);
   }, []);
 
   return (
     <div className="App">
-      <Timeline target={<TargetWithNames />}>
-        <Tween from={{ x: -100 }} to={{ x: 100 }}>
-          <div ref={divRef1} style={{ width: 200, height: 200, background: 'rebeccapurple' }} />
-        </Tween>
+      <Timeline
+        // target={
+        //   <>
+        //     <StyledTarget1>
+        //       <StyledTarget2 />
+        //     </StyledTarget1>
+        //     <StyledTarget1>
+        //       <StyledTarget2 />
+        //     </StyledTarget1>
+        //   </>
+        // }
+        // target={<div style={{ height: '300px', backgroundColor: '#ccc' }} />}
+        // target={<TargetWithNames />}
+        target={
+          <>
+            <TargetWithNames />
+            <TargetWithNames2 />
+          </>
+        }
+        // target={<TargetWithNamesCombined />}
+        // target={
+        //   <>
+        //     <TargetWithNames />
+        //     <ForwardRefComponent>ForwardRefComponent 1</ForwardRefComponent>
+        //     <ForwardRefComponent>ForwardRefComponent 2</ForwardRefComponent>
+        //   </>
+        // }
+      >
+        {/*<Tween from={{ x: -100 }} to={{ x: 100 }}>*/}
+        {/*  <div ref={divRef1} style={{ width: 200, height: 200, background: 'rebeccapurple' }} />*/}
+        {/*</Tween>*/}
 
-        <Tween from={{ x: -100 }} to={{ x: 100 }}>
-          <div ref={divRef2} style={{ width: 200, height: 200, background: 'fuchsia' }} />
-        </Tween>
+        {/*<Tween from={{ x: -100 }} to={{ x: 100 }}>*/}
+        {/*  <div ref={divRef2} style={{ width: 200, height: 200, background: 'fuchsia' }} />*/}
+        {/*</Tween>*/}
 
         <Tween to={{ x: '200px' }} target="div3" position="0" />
         <Tween to={{ x: '200px' }} target="div1" position="0.5" />
         <Tween to={{ x: '200px' }} target="div2" position="1" stagger={0.1} />
+
+        <Tween to={{ x: '200px' }} target="div6" position="2" />
+        <Tween to={{ x: '200px' }} target="div4" position="2.5" />
+        <Tween to={{ x: '200px' }} target="div5" position="3" stagger={0.1} />
+
+        {/*<Tween to={{ x: '200px' }} target={3} />*/}
+        {/*<Tween to={{ x: '200px' }} target={4} />*/}
       </Timeline>
     </div>
   );
 };
 
-export default Out;
+//export default Out;
+
+const Test = () => {
+  // the array gets filled up with every new render!
+  // can SplitWords outputs it's refs as array, so that we don't need to push into?
+  const ref = useRef<MutableRefObject<any>[]>([]);
+
+  useEffect(() => {
+    console.log(ref);
+  }, []);
+
+  return (
+    <Controls playState={PlayState.stop}>
+      <Timeline
+        target={
+          <Fragment>
+            <SplitWords ref={(charRef: any) => ref.current.push(charRef)} wrapper={<Inline />}>
+              This text gets splitted by words.
+            </SplitWords>
+          </Fragment>
+        }
+      >
+        <Tween to={{ y: '-20px' }} position={0.5} duration={0.1} target={1} />
+        <Tween to={{ y: '-20px' }} position="+=0.5" duration={0.1} target={3} />
+        <Tween to={{ y: '-20px' }} position="+=0.5" duration={0.1} target={5} />
+      </Timeline>
+    </Controls>
+  );
+};
+
+export default Test;

packages/react-gsap/package.json

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

packages/react-gsap/src/Timeline.tsx

@@ -2,13 +2,7 @@ import React, { Fragment, ReactNode, ReactElement } from 'react';
 import { gsap } from 'gsap';
 import { isForwardRef, isFragment } from 'react-is';
 import { PlayState } from './types';
-import {
-  getTweenFunction,
-  setPlayState,
-  nullishCoalescing,
-  getRefProp,
-  getTargetRefProp,
-} from './helper';
+import { getTweenFunction, setPlayState, nullishCoalescing, getTargetRefProp } from './helper';
 import Provider, { Context } from './Provider';
 import { TweenProps } from './Tween';
 
@@ -205,7 +199,7 @@ class Timeline extends Provider<TimelineProps> {
 
   cloneElement(child: any) {
     // @ts-ignore
-    return React.cloneElement(child, getRefProp(child, this.addTarget));
+    return React.cloneElement(child, getTargetRefProp(child, this.setTarget, this.addTarget));
   }
 
   renderTarget(target?: Target): ReactNode {
@@ -215,8 +209,7 @@ class Timeline extends Provider<TimelineProps> {
 
     // if is forwardRef clone and pass targets as ref
     if (isForwardRef(target)) {
-      // @ts-ignore
-      return React.cloneElement(target, getTargetRefProp(target, this.setTarget));
+      return this.cloneElement(target);
     }
 
     // else iterate the first level of children and set targets