diff --git a/docs/animated.md b/docs/animated.md
index 434efe5984f..f685e5d4671 100644
--- a/docs/animated.md
+++ b/docs/animated.md
@@ -3,20 +3,194 @@ id: animated
title: Animated
---
-The `Animated` library is designed to make animations fluid, powerful, and painless to build and maintain. `Animated` focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and `start`/`stop` methods to control time-based animation execution.
-
-The most basic workflow for creating an animation is to create an `Animated.Value`, hook it up to one or more style attributes of an animated component, and then drive updates via animations using `Animated.timing()`:
+The `Animated` library is designed to make animations fluid, powerful, and painless to build and maintain. `Animated` focuses on declarative relationships between inputs and outputs, configurable transforms in between, and `start`/`stop` methods to control time-based animation execution.
+
+The core workflow for creating an animation is to create an `Animated.Value`, hook it up to one or more style attributes of an animated component, and then drive updates via animations using `Animated.timing()`.
+
+
+
+
+
+ Using with Function Components
+
+
+ Using with Class Components
+
+
+
+
+
+
+> Don't modify the animated value directly. You can use the [`useRef` Hook](https://reactjs.org/docs/hooks-reference.html#useref) to return a mutable ref object. This ref object's `current` property is initialized as the given argument and persists throughout the component lifecycle.
+
+
+
+> Don't modify the animated value directly. It is usually stored as a [state variable](intro-react#state) in class components.
+
+
+
+
+## Example
+
+The following example contains a `View` which will fade in and fade out based on the animated value `fadeAnim`
+
+
+
+
+ Function Component Example
+
+
+ Class Component Example
+
+
+
+
+
+
+```SnackPlayer name=Animated
+import React, { useRef } from "react";
+import { Animated, Text, View, StyleSheet, Button } from "react-native";
+
+export default function App() {
+ // fadeAnim will be used as the value for opacity. Initial Value: 0
+ const fadeAnim = useRef(new Animated.Value(0)).current;
+
+ const fadeIn = () => {
+ // Will change fadeAnim value to 1 in 5 seconds
+ Animated.timing(fadeAnim, {
+ toValue: 1,
+ duration: 2000
+ }).start();
+ };
+
+ const fadeOut = () => {
+ // Will change fadeAnim value to 0 in 5 seconds
+ Animated.timing(fadeAnim, {
+ toValue: 0,
+ duration: 2000
+ }).start();
+ };
+
+ return (
+
+
+ Fading View!
+
+
+
+
+
+
+ );
+}
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ alignItems: "center",
+ justifyContent: "center"
+ },
+ fadingContainer: {
+ paddingVertical: 8,
+ paddingHorizontal: 16,
+ backgroundColor: "powderblue"
+ },
+ fadingText: {
+ fontSize: 28,
+ textAlign: "center",
+ margin: 10
+ },
+ buttonRow: {
+ flexDirection: "row",
+ marginVertical: 16
+ }
+});
+```
-```jsx
-Animated.timing(
- // Animate value over time
- this.state.fadeAnim, // The value to drive
- {
- toValue: 1, // Animate to final value of 1
+
+
+```SnackPlayer name=Animated
+import React, { Component } from "react";
+import { Animated, Text, View, StyleSheet, Button } from "react-native";
+
+class App extends Component {
+ // fadeAnim will be used as the value for opacity. Initial Value: 0
+ state = {
+ fadeAnim: new Animated.Value(0)
+ };
+
+ fadeIn = () => {
+ // Will change fadeAnim value to 1 in 5 seconds
+ Animated.timing(this.state.fadeAnim, {
+ toValue: 1,
+ duration: 2000
+ }).start();
+ };
+
+ fadeOut = () => {
+ // Will change fadeAnim value to 0 in 5 seconds
+ Animated.timing(this.state.fadeAnim, {
+ toValue: 0,
+ duration: 2000
+ }).start();
+ };
+
+ render() {
+ return (
+
+
+ Fading View!
+
+
+
+
+
+
+ );
+ }
+}
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ alignItems: "center",
+ justifyContent: "center"
+ },
+ fadingContainer: {
+ paddingVertical: 8,
+ paddingHorizontal: 16,
+ backgroundColor: "powderblue"
+ },
+ fadingText: {
+ fontSize: 28,
+ textAlign: "center",
+ margin: 10
},
-).start(); // Start the animation
+ buttonRow: {
+ flexDirection: "row",
+ marginVertical: 16
+ }
+});
+
+export default App;
```
+
+
Refer to the [Animations](animations#animated-api) guide to see additional examples of `Animated` in action.
## Overview
diff --git a/docs/animations.md b/docs/animations.md
index a21edbe1a0e..a44a61a4a31 100644
--- a/docs/animations.md
+++ b/docs/animations.md
@@ -16,11 +16,11 @@ The [`Animated`](animated) API is designed to concisely express a wide variety o
For example, a container view that fades in when it is mounted may look like this:
```SnackPlayer
-import React, { useState, useEffect } from 'react';
+import React, { useRef, useEffect } from 'react';
import { Animated, Text, View } from 'react-native';
const FadeInView = (props) => {
- const [fadeAnim] = useState(new Animated.Value(0)) // Initial value for opacity: 0
+ const fadeAnim = useRef(new Animated.Value(0)).current // Initial value for opacity: 0
React.useEffect(() => {
Animated.timing(
@@ -226,6 +226,318 @@ For example, when working with horizontal scrolling gestures, you would do the f
)}
```
+The following example implements a horizontal scrolling carousel where the scroll position indicators are animated using the `Animated.event` used in the `ScrollView`
+
+#### ScrollView with Animated Event Example
+
+