From 9f4ef8bc397ed54ccf3df96e692de23201e95d02 Mon Sep 17 00:00:00 2001
From: Jared Silver <jared@hellosaurus.com>
Date: Fri, 13 Nov 2020 16:32:54 -0500
Subject: [PATCH 1/2] Reverse spring motion direction

---
 src/components/TextLoop.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/TextLoop.tsx b/src/components/TextLoop.tsx
index 51866ba..62daacb 100644
--- a/src/components/TextLoop.tsx
+++ b/src/components/TextLoop.tsx
@@ -138,7 +138,7 @@ class TextLoop extends React.PureComponent<Props, State> {
 
         return {
             opacity: spring(this.getOpacity(), this.props.springConfig),
-            translate: spring(-height, this.props.springConfig),
+            translate: spring(height, this.props.springConfig),
         };
     };
 
@@ -148,7 +148,7 @@ class TextLoop extends React.PureComponent<Props, State> {
 
         return {
             opacity: this.getOpacity(),
-            translate: height,
+            translate: -height,
         };
     };
 

From 316909ca55bcd6e2df2f0cb3492c967b7c2df2f4 Mon Sep 17 00:00:00 2001
From: Phil Leggetter <phil@leggetter.co.uk>
Date: Sat, 20 Mar 2021 16:18:40 +0000
Subject: [PATCH 2/2] add "direction" property: "up"/"down"

---
 examples/App.tsx            | 22 ++++++++++++++++++++++
 src/components/TextLoop.tsx |  8 ++++++--
 2 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/examples/App.tsx b/examples/App.tsx
index 62c942e..9215804 100644
--- a/examples/App.tsx
+++ b/examples/App.tsx
@@ -40,6 +40,25 @@ const BaseExample: React.FunctionComponent = (): JSX.Element => (
     </Section>
 );
 
+const DirectionExample: React.FunctionComponent = (): JSX.Element => (
+    <Section>
+        <Title>Default</Title>
+        <Example>
+            <TextLoop direction="down">
+                <span>Trade faster</span>
+                <span>Increase sales</span>
+                <span>Stock winners</span>
+            </TextLoop>{" "}
+            and{" "}
+            <TextLoop direction="up">
+                <span>be awesome</span>
+                <span>win big</span>
+                <span>live the dream</span>
+            </TextLoop>
+        </Example>
+    </Section>
+);
+
 const FastExample: React.FunctionComponent = (): JSX.Element => (
     <Section>
         <Title>Fast transition</Title>
@@ -178,6 +197,7 @@ const StaggeredExample: React.FunctionComponent = (): JSX.Element => (
 
 enum Sections {
     Base,
+    Direction,
     Fast,
     Smooth,
     Variable,
@@ -191,6 +211,7 @@ const App: React.FunctionComponent = (): JSX.Element => {
 
     const mapSectionToComponent = {
         [Sections.Base]: BaseExample,
+        [Sections.Direction]: DirectionExample,
         [Sections.Fast]: FastExample,
         [Sections.Smooth]: SmoothExample,
         [Sections.Variable]: VariableExample,
@@ -210,6 +231,7 @@ const App: React.FunctionComponent = (): JSX.Element => {
                     }}
                 >
                     <option value={Sections.Base}>Default</option>
+                    <option value={Sections.Direction}>Direction</option>
                     <option value={Sections.Fast}>Fast</option>
                     <option value={Sections.Smooth}>Smooth</option>
                     <option value={Sections.Variable}>Variable</option>
diff --git a/src/components/TextLoop.tsx b/src/components/TextLoop.tsx
index 62daacb..26873bf 100644
--- a/src/components/TextLoop.tsx
+++ b/src/components/TextLoop.tsx
@@ -23,6 +23,7 @@ type Props = {
     noWrap: boolean;
     className?: string;
     onChange?: Function;
+    direction: "up" | "down";
 };
 
 type State = {
@@ -50,6 +51,7 @@ class TextLoop extends React.PureComponent<Props, State> {
         fade: true,
         mask: false,
         noWrap: true,
+        direction: "up",
     };
 
     constructor(props: Props) {
@@ -136,9 +138,10 @@ class TextLoop extends React.PureComponent<Props, State> {
     willLeave = (): { opacity: OpaqueConfig; translate: OpaqueConfig } => {
         const { height } = this.getDimensions();
 
+        const dirAdjust = this.props.direction === "up" ? -1 : 1;
         return {
             opacity: spring(this.getOpacity(), this.props.springConfig),
-            translate: spring(height, this.props.springConfig),
+            translate: spring(height * dirAdjust, this.props.springConfig),
         };
     };
 
@@ -146,9 +149,10 @@ class TextLoop extends React.PureComponent<Props, State> {
     willEnter = (): { opacity: 0 | 1; translate: number } => {
         const { height } = this.getDimensions();
 
+        const dirAdjust = this.props.direction === "up" ? 1 : -1;
         return {
             opacity: this.getOpacity(),
-            translate: -height,
+            translate: height * dirAdjust,
         };
     };