Update readme

README.md

@@ -1,16 +1,17 @@
 [![AOS - Animate on scroll library](https://s32.postimg.org/ktvt59hol/aos_header.png)](http://michalsnik.github.io/aos/)
 
-[![NPM version](https://img.shields.io/npm/v/aos.svg?style=flat)](https://npmjs.org/package/aos)
+[![NPM version](https://img.shields.io/npm/v/aos/next.svg?style=flat)](https://npmjs.org/package/aos)
 [![NPM downloads](https://img.shields.io/npm/dm/aos.svg?style=flat)](https://npmjs.org/package/aos)
 [![Build Status](https://travis-ci.org/michalsnik/aos.svg?branch=master)](https://travis-ci.org/michalsnik/aos)
 [![Gitter](https://badges.gitter.im/michalsnik/aos.svg)](https://gitter.im/michalsnik/aos?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
 
 [![Twitter Follow](https://img.shields.io/twitter/follow/michalsnik.svg?style=social)](https://twitter.com/michalsnik) [![Twitter URL](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/home?status=AOS%20-%20Animate%20on%20Scroll%20library%0Ahttps%3A//github.com/michalsnik/aos)
 
-👉 To get a better understanding how this actually works, I encourage you to check [my post on CSS-tricks](https://css-tricks.com/aos-css-driven-scroll-animation-library/).
+## :exclamation::exclamation::exclamation: This is README for aos@next :exclamation::exclamation::exclamation:
 
----
+For last stable release (v2) go [here](https://github.com/michalsnik/aos/tree/v2)
 
+---
 ### 🚀 [Demo](http://michalsnik.github.io/aos/)
 
 ### 🌟 Codepen Examples
@@ -19,6 +20,8 @@
 - [With anchor-placement and different easings](http://codepen.io/michalsnik/pen/EyxoNm)
 - [With simple custom animations](http://codepen.io/michalsnik/pen/WxvNvE)
 
+👉 To get a better understanding how this actually works, I encourage you to check [my post on CSS-tricks](https://css-tricks.com/aos-css-driven-scroll-animation-library/).
+
 ---
 
 ## ⚙ Installation
@@ -154,6 +157,53 @@ Then you'll be able to listen for two custom events then:
 
 ## Recepies:
 
+#### Adding custom animations:
+Sometimes built-in animations are just not enough. Let's say you need one box to have different animation depending on resultion.
+Here's how you could do it:
+
+```css
+[data-aos="new-animation"] {
+  opacity: 0;
+  transition-property: transform, opacity;
+
+  &.aos-animate {
+    opacity: 1;
+  }
+
+  @media screen and (min-width: 768px) {
+    transform: translateX(100px);
+
+    &.aos-animate {
+      transform: translateX(0);
+    }
+  }
+}
+```
+Then use it in HTML:
+```html
+<div data-aos="new-animation"></div>
+```
+The element will only animate opacity on mobile devices, but from 768px width it'll also slide from right to left.
+
+#### Adding custom easing:
+Similar to animations you can add custom easings:
+```css
+[data-aos] {
+  body[data-aos-easing="new-easing"] &,
+  &[data-aos][data-aos-easing="new-easing"] {
+    transition-timing-function: cubic-bezier(.250, .250, .750, .750);
+  }
+}
+```
+
+#### Customizing default animations distance
+Default distance for built-in animations is 100px. As long as you're using SCSS though, you can override it:
+```css
+$aos-distance: 200px; // It has to be above import
+@import 'node_modules/aos/src/sass/aos.scss';
+```
+You have to however configure your build process to allow it to import styles from `node_modules` beforehand.
+
 #### Integrating external CSS animation library (e.g. Animate.css):
 Use `animatedClassName` to change default behaviour of AOS, to apply class names placed inside `data-aos` on scroll.