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 51866ba..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,
         };
     };