diff --git a/components/pull-to-refresh.js b/components/pull-to-refresh.js
index 034b6205..2b96ef1d 100644
--- a/components/pull-to-refresh.js
+++ b/components/pull-to-refresh.js
@@ -72,7 +72,10 @@ export default function PullToRefresh ({ children, className }) {
       onTouchMove={handleTouchMove}
       onTouchEnd={handleTouchEnd}
     >
-      <p className={`${styles.pullMessage}`} style={{ top: `${Math.max(-20, Math.min(-20 + pullDistance / 2, 5))}px` }}>
+      <p
+        className={`${styles.pullMessage}`}
+        style={{ opacity: pullDistance > 0 ? 1 : 0, top: `${Math.max(-20, Math.min(-20 + pullDistance / 2, 5))}px` }}
+      >
         {pullMessage}
       </p>
       {children}