update animation content

Author: Mohamad Faris

docs/contentful/Animations.md

@@ -0,0 +1,16 @@
+# Animations On Scroll
+Animation Contentful components on scroll is implemented currently for following components:
+- [Viewport](./Viewport.md)
+- [Image](./Image.md)
+- [ContentBlock](./ContentBlock.md)
+
+![screenshot](./pics/Animation/screenshot.png)
+
+**Preview:** https://community-app.topcoder.com/examples/contentful/viewport/1HRSb4Bls4S2mQesG6mJOn
+
+Defining a scroll animation is easy via the Web UI. Search for the "Animation On Scroll" field and either select existing animation or create new one.
+![](./pics/anim1.png)
+
+## Animation Model
+To define a default animation only `Name` and `Animate On Scroll` fields are required. There is help hint bellow each fields what is does and how to use it. For further detailed examples see: https://michalsnik.github.io/aos/. All available properties are supported from Contentful animatable components as well.
+![](./pics/anim2.png)

docs/contentful/Route.md

@@ -1,5 +1,5 @@
 # Route
-A Route that can render a Viewport at its endpoint, and also include sub-routes with Viewports. When linked to community-app it will render its [Viewport](./viewport.md) under the specified `URL`.
+A Route that can render a Viewport at its endpoint, and also include sub-routes with Viewports. When linked to community-app it will render its [Viewport](./Viewport.md) under the specified `URL`.
 
 ## Fields
 ![](./pics/Route.png)

docs/contentful/Viewport.md

@@ -0,0 +1,6 @@
+# Viewport
+
+A generic container for other objects, that renders its children into a container element. It supports nested viewports, different layout options for viewport content via themes. Viewport should be considered as the main content layout and grouping component.
+
+## Fields
+![](./pics/Viewport.png)

docs/contentful/animations.md

@@ -1,10 +1,14 @@
 # Animations On Scroll
-Animationg Contentful components on scroll is implemetented currently for following components:
-- Viewport
-- Image
-- ContentBlock
+Animation Contentful components on scroll is implemented currently for following components:
+- [Viewport](./Viewport.md)
+- [Image](./Image.md)
+- [ContentBlock](./ContentBlock.md)
 
-Definig a scroll animation is easy via the Web UI. Search for the "Animation On Scroll" field and either select existing animation or create new one.
+![screenshot](./pics/Animation/screenshot.png)
+
+**Preview:** https://community-app.topcoder.com/examples/contentful/viewport/1HRSb4Bls4S2mQesG6mJOn
+
+Defining a scroll animation is easy via the Web UI. Search for the "Animation On Scroll" field and either select existing animation or create new one.
 ![](./pics/anim1.png)
 
 ## Animation Model

docs/contentful/index.md

@@ -18,6 +18,7 @@ Instructions are also provided below for developments that want to modify/create
     - [Basics](./content-writer-basics.md)
     - Content Types
         - [Accordion](./accordion.md)
+        - [Animation](./Animation.md)
         - [App Component](./AppComponent.md)
         - [Banner](./banner.md)
         - [ContentBlock](./ContentBlock.md)
@@ -33,7 +34,7 @@ Instructions are also provided below for developments that want to modify/create
         - [Navigation Menu](./NavigationMenu.md)
         - [Quote](./Quote.md)
         - [Route](./Route.md)
-        - [Viewport](./viewport.md)
+        - [Viewport](./Viewport.md)
         - [Member Card](./memberCard.md)
         - [Article](./Article.md)
     - [Preview Content](./preview-content.md)