react-reveal demo

anastasiya29 · Oct 18, 2019 · b921848 · b921848
1 parent 00c3b75
commit b921848
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 4 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -68,6 +68,7 @@
     "mkdirp": "^0.5.1",
     "node-gyp": "^3.8.0",
     "prettier": "^1.16.0",
+    "react-reveal": "^1.2.2",
     "react-social-icons": "^4.1.0"
   }
 }
diff --git a/src/components/recentPosts/recentPosts.js b/src/components/recentPosts/recentPosts.js
@@ -2,11 +2,12 @@ import React from 'react';
 import { StaticQuery, graphql } from 'gatsby';
 import Card from 'containers/card';
 import PostPreview from 'components/postPreview';
+import Fade from 'react-reveal/Fade';
 
 const LISTING_QUERY = graphql`
   query RecentPostsQuery {
     allMarkdownRemark(
-      limit: 5
+      limit: 100
       sort: { order: DESC, fields: [frontmatter___date] }
     ) {
       edges {
@@ -38,9 +39,11 @@ const RecentPosts = () => (
     query={LISTING_QUERY}
     render={({ allMarkdownRemark }) =>
       allMarkdownRemark.edges.map(({ node }) => (
-        <Card key={node.fields.slug} mb={[40, 50]}>
-          <PostPreview {...node} />
-        </Card>
+        <Fade bottom key={node.fields.slug}>
+          <Card mb={[40, 50]}>
+            <PostPreview {...node} />
+          </Card>
+        </Fade>
       ))
     }
   />