diff --git a/gatsby-config.js b/gatsby-config.js
index abe5803..a021a37 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -4,6 +4,7 @@ module.exports = {
   },
   plugins: [
     'gatsby-plugin-netlify',
+    'gatsby-plugin-page-transitions',
     'gatsby-plugin-react-helmet',
     {
       resolve: 'gatsby-source-wordpress',
diff --git a/package.json b/package.json
index 11393fb..2ada975 100644
--- a/package.json
+++ b/package.json
@@ -4,10 +4,12 @@
   "version": "0.1.0",
   "author": "Saburly <info@saburly.com>",
   "dependencies": {
+    "aos": "^2.3.3",
     "gatsby": "^1.9.247",
     "gatsby-image": "^1.0.54",
     "gatsby-link": "^1.6.40",
     "gatsby-plugin-netlify": "^1.0.21",
+    "gatsby-plugin-page-transitions": "^1.0.7",
     "gatsby-plugin-react-helmet": "^2.0.10",
     "gatsby-plugin-sharp": "^1.6.48",
     "gatsby-remark-prismjs": "^2.0.5",
diff --git a/src/components/PageIntro.js b/src/components/PageIntro.js
index 4de7c0c..dcf11b2 100644
--- a/src/components/PageIntro.js
+++ b/src/components/PageIntro.js
@@ -1,51 +1,72 @@
-import React from 'react'
+import React, { Component } from 'react'
 
 import SectionIntro from './SectionIntro'
 import Button from './Button'
 
-const PageIntro = ({ ...props }) => (
-  <section className="saburly-intro bg-saburly-light relative">
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1400.8 96.4">
-      <title>bg-saburly-white</title>
-      <path
-        d="M417.7,96.4C655.2,93.3,743.6,0,983.1,0h417.7V96.4H417.7Z"
-        transform="translate(0 0)"
-        style={{ fill: '#fff' }}
-      />
-    </svg>
-    <div
-      className={`relative container mx-auto items-center flex lg:flex-row flex-col ${
-        props.reversed ? 'flex-col-reverse' : ''
-      } p-4`}
-    >
-      <div className="text-center lg:text-left">
-        {props.children}
-        <SectionIntro
-          header
-          intro={props.intro}
-          classes={`lg:text-left lg:max-w-sm content-center ${
-            props.sectionClasses
-          }`}
-          headline={props.headline}
-          text={props.text}
-        />
-        {props.button && (
-          <Button
-            text={props.buttonText}
-            url={props.url}
-            classes={props.buttonClasses}
+class PageIntro extends Component {
+  componentDidMount() {
+    let tiltjs = require('vanilla-tilt')
+    if (this.props.tiltImage) {
+      tiltjs.init(document.querySelector('.tiltImage'), {
+        max: 20,
+        speed: 400,
+        easing: 'cubic-bezier(.03,.98,.52,.99)',
+        glare: true,
+        'max-glare': 0.8,
+        'glare-prerender': false,
+      })
+    }
+  }
+  render() {
+    return (
+      <section className="saburly-intro bg-saburly-light relative">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1400.8 96.4">
+          <title>bg-saburly-white</title>
+          <path
+            d="M417.7,96.4C655.2,93.3,743.6,0,983.1,0h417.7V96.4H417.7Z"
+            transform="translate(0 0)"
+            style={{ fill: '#fff' }}
           />
-        )}
-      </div>
-      {props.image && (
-        <img
-          src={props.image}
-          className={`${props.imgClasses} md:max-h-sm md:max-w-md mx-auto`}
-          alt="Software Development Agency"
-        />
-      )}
-    </div>
-  </section>
-)
+        </svg>
+        <div
+          className={`relative container mx-auto items-center flex lg:flex-row flex-col ${
+            this.props.reversed ? 'flex-col-reverse' : ''
+          } p-4`}
+        >
+          <div className="text-center lg:text-left">
+            {this.props.children}
+            <SectionIntro
+              header
+              intro={this.props.intro}
+              classes={`lg:text-left lg:max-w-sm content-center ${
+                this.props.sectionClasses
+              }`}
+              headline={this.props.headline}
+              text={this.props.text}
+            />
+            {this.props.button && (
+              <Button
+                text={this.props.buttonText}
+                url={this.props.url}
+                classes={this.props.buttonClasses}
+              />
+            )}
+          </div>
+          {this.props.image && (
+            <div>
+              <img
+                src={this.props.image}
+                className={`${
+                  this.props.imgClasses
+                } tiltImage md:max-h-sm md:max-w-md mx-auto`}
+                alt="Software Development Agency"
+              />
+            </div>
+          )}
+        </div>
+      </section>
+    )
+  }
+}
 
 export default PageIntro
diff --git a/src/pages/about.js b/src/pages/about.js
index 2fbcd36..02971f7 100644
--- a/src/pages/about.js
+++ b/src/pages/about.js
@@ -6,53 +6,39 @@ import SectionIntro from '../components/SectionIntro'
 import IntroImage from '../images/web-development-consultancy.jpg'
 import MeaningSaburly from '../images/coding-practice.svg'
 
-class AboutPage extends Component {
-  componentDidMount() {
-    let tiltjs = require('vanilla-tilt')
-    tiltjs.init(document.querySelector('.tiltImage'), {
-      max: 35,
-      speed: 400,
-      scale: 1.1,
-      glare: true,
-      'max-glare': 0.8,
-      'glare-prerender': false,
-      easing: 'cubic-bezier(.03,.98,.52,.99)',
-    })
-  }
+import PageTransition from 'gatsby-plugin-page-transitions'
 
-  render() {
-    return (
-      <div>
-        <PageIntro
-          headline="Founded by developers"
-          text="Saburly was founded in 2017 by experienced software developers that understand what it takes to create modern digital solutions. Our focus is on gathering and guiding the best talents in the industry in order to create digital experiences that make valuable impact."
-          image={IntroImage}
-          imgClasses="border-white border-8 rounded tiltImage -mb-12"
+const AboutPage = () => (
+  <PageTransition>
+    <PageIntro
+      tiltImage
+      headline="Founded by developers"
+      text="Saburly was founded in 2017 by experienced software developers that understand what it takes to create modern digital solutions. Our focus is on gathering and guiding the best talents in the industry in order to create digital experiences that make valuable impact."
+      image={IntroImage}
+      imgClasses="border-white border-8 rounded -mb-12"
+    />
+
+    <section className="container mx-auto my-12 p-4">
+      <div className="md:flex justify-center items-center">
+        <img
+          src={MeaningSaburly}
+          className="hidden lg:block max-h-xs"
+          alt="User Experience Design Agency"
+        />
+        <SectionIntro
+          headline="Meaning of Saburly"
+          text="...Patience. ...Our goal is long-term engagement."
         />
-
-        <section className="container mx-auto my-12 p-4">
-          <div className="md:flex justify-center items-center">
-            <img
-              src={MeaningSaburly}
-              className="hidden lg:block max-h-xs"
-              alt="User Experience Design Agency"
-            />
-            <SectionIntro
-              headline="Meaning of Saburly"
-              text="...Patience. ...Our goal is long-term engagement."
-            />
-          </div>
-        </section>
-
-        <section className="container mx-auto my-12 p-4">
-          <SectionIntro
-            headline="The Team"
-            text="We are a small company with a personal touch that knows our stuff. Our team consists of handpicked expert software developers, designers and system architects - all highly motivated to help you succeed."
-          />
-        </section>
       </div>
-    )
-  }
-}
+    </section>
+
+    <section className="container mx-auto my-12 p-4">
+      <SectionIntro
+        headline="The Team"
+        text="We are a small company with a personal touch that knows our stuff. Our team consists of handpicked expert software developers, designers and system architects - all highly motivated to help you succeed."
+      />
+    </section>
+  </PageTransition>
+)
 
 export default AboutPage
diff --git a/src/pages/contact.js b/src/pages/contact.js
index e32fabf..bf70f60 100644
--- a/src/pages/contact.js
+++ b/src/pages/contact.js
@@ -8,8 +8,10 @@ import Sarajevo from '../images/sarajevo-web-agency.jpg'
 import Stockholm from '../images/stockholm-web-agency.jpg'
 import FormImage from '../images/contact-web-consultancy.svg'
 
+import PageTransition from 'gatsby-plugin-page-transitions'
+
 const ContactPage = () => (
-  <div>
+  <PageTransition>
     <PageIntro
       headline="Let's make things happen"
       text="We are always on a lookout for exciting challenges. Feel free to contact us if you want to start something great or just find out more about what we do."
@@ -155,7 +157,7 @@ const ContactPage = () => (
         className="text-center block m-x-auto md:max-w-lg mx-auto"
       />
     </section>
-  </div>
+  </PageTransition>
 )
 
 export default ContactPage
diff --git a/src/pages/index.js b/src/pages/index.js
index dab0b63..5dd87a1 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -20,8 +20,10 @@ import LogoRicoh from '../images/logo-ricoh-color.svg'
 import LogoKinnarps from '../images/logo-kinnarps-color.svg'
 import LogoCoor from '../images/logo-coor-color.svg'
 
+import PageTransition from 'gatsby-plugin-page-transitions'
+
 const IndexPage = ({ ...props }) => (
-  <div>
+  <PageTransition>
     <PageIntro
       text="We're a team of experienced, creative and passionate engineers and designers. Our mission is to make you stand out and gain competitive advantages with the help of modern technologies."
       image={ImgIntro}
@@ -138,7 +140,7 @@ const IndexPage = ({ ...props }) => (
         />
       </section>
     </main>
-  </div>
+  </PageTransition>
 )
 
 export const query = graphql`
diff --git a/src/pages/services.js b/src/pages/services.js
index 1897c78..71fb880 100644
--- a/src/pages/services.js
+++ b/src/pages/services.js
@@ -11,9 +11,12 @@ import WebdevServices from '../images/custom-software-development.svg'
 import UXdesign from '../images/user-experience-design-services.svg'
 import HowWeWork from '../images/flexible-workflow.svg'
 
+import PageTransition from 'gatsby-plugin-page-transitions'
+
 const ServicesPage = () => (
-  <div>
+  <PageTransition>
     <PageIntro
+      tiltImage
       buttonClasses="text-white font-normal shadow hover:shadow-md rounded-full mt-4 font-light bg-teal hover:bg-teal-dark mb-20"
       headline="Agile Practitioners"
       text="At Saburly we embrace Agile’s methodologies for every project and business environment, no matter the size, scale, or complexity. Our flexible processes ensure high productivity and we know how to balance between cost, time and quality."
@@ -150,7 +153,7 @@ const ServicesPage = () => (
       </div>
       <WorkStyle />
     </div>
-  </div>
+  </PageTransition>
 )
 
 export default ServicesPage
diff --git a/src/templates/blog.js b/src/templates/blog.js
index 8519fa9..b467cd5 100644
--- a/src/templates/blog.js
+++ b/src/templates/blog.js
@@ -4,11 +4,13 @@ import Link from 'gatsby-link'
 import PageIntro from '../components/PageIntro'
 import Card from '../components/Card'
 
+import PageTransition from 'gatsby-plugin-page-transitions'
+
 class Blog extends Component {
   render() {
     const data = this.props.data
     return (
-      <main>
+      <PageTransition>
         <PageIntro
           headline="Bugs keep us busy"
           text="but occasionally we have fun & publish"
@@ -31,7 +33,7 @@ class Blog extends Component {
             </div>
           ))}
         </div>
-      </main>
+      </PageTransition>
     )
   }
 }
diff --git a/src/templates/post-default.js b/src/templates/post-default.js
index 233a923..30c0188 100644
--- a/src/templates/post-default.js
+++ b/src/templates/post-default.js
@@ -4,6 +4,8 @@ import Prism from 'prismjs'
 
 require('prismjs/themes/prism-solarizedlight.css')
 
+import PageTransition from 'gatsby-plugin-page-transitions'
+
 class PostDefault extends Component {
   componentDidMount() {
     Prism.highlightAll()
@@ -11,7 +13,7 @@ class PostDefault extends Component {
   render() {
     const { data } = this.props
     return (
-      <div>
+      <PageTransition>
         <Helmet
           title={`${data.wordpressPost.title} - Saburly.com`}
           meta={[
@@ -32,7 +34,7 @@ class PostDefault extends Component {
             }}
           />
         </main>
-      </div>
+      </PageTransition>
     )
   }
 }
diff --git a/yarn.lock b/yarn.lock
index 25b7fa4..300fe21 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -260,6 +260,14 @@ anymatch@^1.3.0:
     micromatch "^2.1.5"
     normalize-path "^2.0.0"
 
+aos@^2.3.3:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/aos/-/aos-2.3.3.tgz#bddbe68fc73f7e90ff95f5d0f3810fee5acacbe2"
+  dependencies:
+    classlist-polyfill "^1.0.3"
+    lodash.debounce "^4.0.6"
+    lodash.throttle "^4.0.1"
+
 aproba@^1.0.3:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.2.0.tgz#6802e6264efd18c790a1b0d517f0f2627bf2c94a"
@@ -1950,6 +1958,10 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
+classlist-polyfill@^1.0.3:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/classlist-polyfill/-/classlist-polyfill-1.2.0.tgz#935bc2dfd9458a876b279617514638bcaa964a2e"
+
 cli-boxes@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/cli-boxes/-/cli-boxes-1.0.0.tgz#4fa917c3e59c94a004cd61f8ee509da651687143"
@@ -2828,7 +2840,7 @@ dom-converter@~0.1:
   dependencies:
     utila "~0.3"
 
-dom-helpers@^3.2.1:
+dom-helpers@^3.2.1, dom-helpers@^3.3.1:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.3.1.tgz#fc1a4e15ffdf60ddde03a480a9c0fece821dd4a6"
 
@@ -3871,6 +3883,14 @@ gatsby-plugin-page-creator@^1.0.1:
     parse-filepath "^1.0.1"
     slash "^1.0.0"
 
+gatsby-plugin-page-transitions@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/gatsby-plugin-page-transitions/-/gatsby-plugin-page-transitions-1.0.7.tgz#e6c5a858d3c59fbccfefb19d0bd0834c36535d48"
+  dependencies:
+    history "^4.7.2"
+    prop-types "^15.6.2"
+    react-transition-group "^2.4.0"
+
 gatsby-plugin-react-helmet@^2.0.10:
   version "2.0.11"
   resolved "https://registry.yarnpkg.com/gatsby-plugin-react-helmet/-/gatsby-plugin-react-helmet-2.0.11.tgz#a2db81755f5b41d54e0e535ca1d9a008d3ccff0a"
@@ -5778,6 +5798,10 @@ lodash.clonedeep@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef"
 
+lodash.debounce@^4.0.6:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
+
 lodash.defaults@^4.0.1:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/lodash.defaults/-/lodash.defaults-4.2.0.tgz#d09178716ffea4dde9e5fb7b37f6f0802274580c"
@@ -5926,6 +5950,10 @@ lodash.templatesettings@^4.0.0:
   dependencies:
     lodash._reinterpolate "~3.0.0"
 
+lodash.throttle@^4.0.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
+
 lodash.toarray@^4.4.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/lodash.toarray/-/lodash.toarray-4.4.0.tgz#24c4bfcd6b2fba38bfd0594db1179d8e9b656561"
@@ -7833,7 +7861,7 @@ promise@^7.1.1:
   dependencies:
     asap "~2.0.3"
 
-prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1:
+prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2:
   version "15.6.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102"
   dependencies:
@@ -8073,6 +8101,10 @@ react-hot-loader@^3.0.0-beta.6:
     redbox-react "^1.3.6"
     source-map "^0.6.1"
 
+react-lifecycles-compat@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
+
 react-proxy@^3.0.0-alpha.0:
   version "3.0.0-alpha.1"
   resolved "https://registry.yarnpkg.com/react-proxy/-/react-proxy-3.0.0-alpha.1.tgz#4400426bcfa80caa6724c7755695315209fa4b07"
@@ -8117,6 +8149,15 @@ react-side-effect@^1.1.0:
     exenv "^1.2.1"
     shallowequal "^1.0.1"
 
+react-transition-group@^2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.4.0.tgz#1d9391fabfd82e016f26fabd1eec329dbd922b5a"
+  dependencies:
+    dom-helpers "^3.3.1"
+    loose-envify "^1.3.1"
+    prop-types "^15.6.2"
+    react-lifecycles-compat "^3.0.4"
+
 react-typed@^1.0.9:
   version "1.0.9"
   resolved "https://registry.yarnpkg.com/react-typed/-/react-typed-1.0.9.tgz#ad06dc0c7283b1869b9f0e012244ab3eb1a03be1"