Wiki pages effects_tutorial created with 3 different tutos: ecore_animator, edje_animation and elementary_animations + gif images + code_c, edc

Signed-off-by: Clément Bénier <clement.benier@openwide.fr> Signed-off-by: Pierre Le Magourou <pierre.lemagourou@openwide.fr>
2015-07-15 13:52:30 +02:00 · 2015-07-15 13:52:30 +02:00 · 391e5c41dc
parent 4fa947dd76
commit 391e5c41dc
48 changed files with 3072 additions and 0 deletions
--- a/media/code_c/tutorial/effects/ecore_animator.c
+++ b/media/code_c/tutorial/effects/ecore_animator.c
@ -0,0 +1,177 @@
+#include <Elementary.h>
+
+static Eina_Bool
+_do_rotate(void *data, double pos)
+{
+   // Get the animation target
+   Evas_Object *obj = data;
+   // Declaration of an `Evas_Map`
+   Evas_Map *m;
+   // Variables to store the target size and position
+   int x, y, w, h;
+
+   // Getting the size and position of the target
+   evas_object_geometry_get(obj, &x, &y, &w, &h);
+   // Creation of an `Evas_Map` of 4 points
+   m = evas_map_new(4);
+   // Populate source and destination map points to match exactly object.
+   evas_map_util_points_populate_from_object(m, obj);
+   // Create a rotation of 360° with x+(w/2) "x" center and y +(h/2) "y" center.
+   evas_map_util_rotate(m, 360.0 * pos, x + (w / 2), y + (h / 2));
+   // Setting the object to "animate" in the `Evas_Map`
+   evas_object_map_set(obj, m);
+   // Starting the Animation
+   evas_object_map_enable_set(obj, EINA_TRUE);
+   // Free used memory
+   evas_map_free(m);
+
+   return EINA_TRUE;
+}
+
+static void
+_btn_rotate_cb(void *data, Evas_Object *btn, void *ev)
+{
+   Evas_Object *target = data;
+   ecore_animator_timeline_add(1, _do_rotate, target);
+}
+
+static Eina_Bool
+_do_zoom(void *data, double pos)
+{
+   Evas_Object *obj = data;
+   Evas_Map *m;
+   int x, y, w, h;
+
+   evas_object_geometry_get(obj, &x, &y, &w, &h);
+   m = evas_map_new(4);
+   evas_map_util_points_populate_from_object(m, obj);
+   evas_map_util_zoom(m, 2 * pos, 2 * pos, x , y);
+   evas_object_map_set(obj, m);
+   evas_object_map_enable_set(obj, EINA_TRUE);
+   evas_map_free(m);
+
+   return EINA_TRUE;
+}
+
+static void _btn_zoom_cb(void *data, Evas_Object *btn, void *ev)
+{
+   Evas_Object *target = data;
+   ecore_animator_timeline_add(1, _do_zoom, target);
+}
+
+static Eina_Bool
+_do_3d(void *data, double pos)
+{
+   Evas_Object *obj = data;
+   Evas_Map *m;
+   int x, y, w, h;
+
+   evas_object_geometry_get(obj, &x, &y, &w, &h);
+   m = evas_map_new(4);
+   evas_map_util_points_populate_from_object(m, obj);
+   evas_map_util_3d_rotate(m, pos * 360, pos * 360, pos * 360, x + (w / 3), y + 60, 0);
+   evas_object_map_set(obj, m);
+   evas_object_map_enable_set(obj, EINA_TRUE);
+   evas_map_free(m);
+
+   return EINA_TRUE;
+}
+
+static void
+_btn_3d_cb(void *data, Evas_Object *btn, void *ev)
+{
+   Evas_Object *target = data;
+   ecore_animator_timeline_add(1, _do_3d, target);
+}
+
+static Eina_Bool
+_do_drop(void *data, double pos)
+{
+   Evas_Object *obj = data;
+   int x, y, w, h;
+   double frame = pos;
+   frame = ecore_animator_pos_map(pos, ECORE_POS_MAP_BOUNCE, 2, 4);
+
+   evas_object_geometry_get(obj, &x, &y, &w, &h);
+   evas_object_move(obj, x, 600 * frame);
+
+   return EINA_TRUE;
+}
+
+EAPI_MAIN int
+elm_main(int argc, char **argv)
+{
+   Evas_Object *win, *label, *bt1, *bt2, *bt3, *target;
+   win = elm_win_util_standard_add("Ecore Animator", "Ecore Animator Tutorial");
+   elm_policy_set(ELM_POLICY_QUIT, ELM_POLICY_QUIT_LAST_WINDOW_CLOSED);
+   elm_win_autodel_set(win, EINA_TRUE);
+
+   if (elm_win_wm_rotation_supported_get(win))
+     {
+        int rots[4] = { 0, 90, 180, 270 };
+        elm_win_wm_rotation_available_rotations_set(win, (const int *)(&rots), 4);
+     }
+
+   // Application title
+   label = elm_label_add(win);
+   elm_object_text_set(label, "Ecore Animator Tutorial");
+   evas_object_size_hint_weight_set(label, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+   elm_win_resize_object_add(win, label);
+   evas_object_show(label);
+
+   // Animation target
+   // Setting the image path
+   char buf[PATH_MAX];
+   snprintf(buf, sizeof(buf), "icon.png");
+   // Adding the image
+   target = elm_image_add(win);
+   // Setting the image path
+   if (!elm_image_file_set(target, buf, NULL))
+        printf("error: could not load image \"%s\"\n", buf);
+   evas_object_size_hint_weight_set(target, EVAS_HINT_FILL, EVAS_HINT_FILL);
+   //Moving the image
+   evas_object_move(target, 130, 100);
+   //Resizing the image
+   evas_object_resize(target, 200, 100);
+   //Showing the image
+   evas_object_show(target);
+
+   // Button 1 : Rotation effect
+   bt1 = elm_button_add(win);
+   elm_object_text_set(bt1, "Rotate");
+   evas_object_size_hint_weight_set(bt1, EVAS_HINT_FILL, EVAS_HINT_FILL);
+   evas_object_move(bt1, 25, 0);
+   evas_object_resize(bt1, 90, 70);
+   evas_object_smart_callback_add(bt1, "clicked", _btn_rotate_cb, target);
+   evas_object_show(bt1);
+
+   // Button 2 : Zoom Effect
+   bt2 = elm_button_add(win);
+   elm_object_text_set(bt2, "Zoom");
+   evas_object_size_hint_weight_set(bt2, EVAS_HINT_FILL, EVAS_HINT_FILL);
+   evas_object_move(bt2, 315, 0);
+   evas_object_resize(bt2, 90, 70);
+   evas_object_smart_callback_add(bt2, "clicked", _btn_zoom_cb, target);
+   evas_object_show(bt2);
+
+   // Button 3 : 3D Rotation Effect
+   bt3 = elm_button_add(win);
+   elm_object_text_set(bt3, "3D");
+   evas_object_size_hint_weight_set(bt3, EVAS_HINT_FILL, EVAS_HINT_FILL);
+   evas_object_move(bt3, 170, 0);
+   evas_object_resize(bt3, 90, 70);
+   evas_object_smart_callback_add(bt3, "clicked", _btn_3d_cb, target);
+   evas_object_show(bt3);
+
+   //drop and bounce effects
+   ecore_animator_timeline_add(2, _do_drop, bt1);
+   ecore_animator_timeline_add(2.3, _do_drop, bt2);
+   ecore_animator_timeline_add(2.5, _do_drop, bt3);
+
+   evas_object_resize(win, 480, 800);
+   evas_object_show(win);
+   elm_run();
+   elm_shutdown();
+   return EXIT_SUCCESS;
+}
+ELM_MAIN()
--- a/media/code_c/tutorial/effects/edje_animation.c
+++ b/media/code_c/tutorial/effects/edje_animation.c
@ -0,0 +1,37 @@
+#include <Elementary.h>
+
+EAPI_MAIN int
+elm_main(int argc, char **argv)
+{
+   Evas_Object *win, *layout, *button, *btn_up;
+   win = elm_win_util_standard_add("Edje Animation", "Edje Animation Tutorial");
+   elm_policy_set(ELM_POLICY_QUIT, ELM_POLICY_QUIT_LAST_WINDOW_CLOSED);
+   elm_win_autodel_set(win, EINA_TRUE);
+
+   layout = elm_layout_add(win);
+
+   elm_layout_file_set(layout, "edje_animation.edj", "my_layout");
+
+   // Creation button in the app window
+   button = elm_button_add(win);
+   elm_object_text_set(button, "Rotate");
+   // Add the button to the edje layout container called "btn/rotate"
+   elm_object_part_content_set(layout, "btn/rotate", button);
+   evas_object_show(button);
+
+   // Creation a up button in the app window
+   btn_up = elm_button_add(win);
+   // Add the button to the edje layout container called "btn/grow"
+   elm_object_text_set(btn_up, "Grow");
+   elm_object_part_content_set(layout, "btn/grow", btn_up);
+   evas_object_show(btn_up);
+
+   evas_object_resize(layout, 400, 400);
+   evas_object_show(layout);
+   evas_object_resize(win, 400, 400);
+   evas_object_show(win);
+   elm_run();
+   elm_shutdown();
+   return 0;
+}
+ELM_MAIN()
--- a/media/code_c/tutorial/effects/edje_animation.edc
+++ b/media/code_c/tutorial/effects/edje_animation.edc
@ -0,0 +1,238 @@
+collections {
+   images
+   {
+      image: "image1.png" COMP;
+      image: "image2.png" COMP;
+   }
+   group {
+      name: "my_layout";
+      parts {
+         // An image using image1
+         part
+         {
+            name: "image";
+            type: IMAGE;
+            description
+            {
+               state: "default" 0.0;
+               max: 63 63;
+               min: 63 63;
+               image { normal: "icon.png"; }
+               rel1.relative: 0.2 0.0;
+               rel2.relative: 0.0 0.0;
+            }
+
+            description
+            {
+               state: "down-state" 1.0;
+               inherit: "default" 0.0;
+               rel1.relative: 0.2 0.92;
+               rel2.relative: 0.05 0.9;
+            }
+         }
+         part
+         {
+            name: "txt_title";
+            type: TEXT;
+            mouse_events: 0;
+
+            // The default State
+            description
+            {
+               state: "default" 0.0;
+               align: 0.0 0.0;
+               rel1 { relative: 0.5 0.0; }
+               rel2 { relative: 1.0 0.5; }
+               text
+               {
+                  font: "Sans";
+                  size: 22;
+                  text: "edje animation";
+               }
+               color: 0 0 0 255;
+            }
+
+            // The "Bigger" state
+            description
+            {
+               state: "Bigger" 0.0;
+               align: 0.0 0.0;
+               rel1 { relative: 0.0 0.0; }
+               rel2 { relative: 1.0 0.2; }
+               text
+               {
+                  size: 26;
+                   text: "animation terminated";
+               }
+               color: 0 0 0 255;
+            }
+         }
+         // Container for the rotate button
+         part
+         {
+            type: SWALLOW;
+            name: "btn/rotate";
+            description
+            {
+               state: "default" 0.0;
+               rel1.relative: 0.30 0.9;
+               rel2.relative: 0.50 0.99;
+            }
+         }
+         // Container for the grow button
+         part
+         {
+            type: SWALLOW;
+            name: "btn/grow";
+            description
+            {
+               state: "default" 0.0;
+               rel1.relative: 1.02 0;
+               rel1.to: "btn/rotate";
+               rel2.relative: 2.02 1;
+               rel2.to: "btn/rotate";
+            }
+         }
+         // The animation target
+         part
+         {
+            name: "atarget";
+            type: IMAGE;
+
+            // Default state
+            description
+            {
+               state: "default" 0.0;
+               image { normal: "c1.svg"; }
+               color: 255 0 0 255; /* red */
+               rel1 { relative: 0.3 0.3; }
+               rel2 { relative: 0.7 0.7; }
+            }
+            // The rotate state
+            description
+            {
+               state: "rotate" 0.0;
+               inherit: "default" 0.0;
+
+               map
+               {
+                  //Enable Map on the part
+                  on: 1;
+                  //Enable smooth rendering
+                  smooth: 1;
+                  //Enable perspective
+                  perspective_on: 1;
+
+                  //Apply rotations on the part
+                  rotation.x: 0;
+                  rotation.y: 0;
+                  rotation.z: 0;
+               }
+               color: 0 255 0 255; /* green */
+            }
+            description
+            {
+               state: "rotate" 1.0;
+               inherit: "rotate" 0.0;
+               map.rotation.z: 360;
+            }
+            // The grow state
+            description {
+               state: "grow" 0.0;
+               inherit: "default" 0.0;
+               color: 0 0 255 255; /* blue */
+               rel1
+               {
+                  relative: 0.2 0.2;
+                  offset: 0.3 0.3;
+               }
+               rel2
+               {
+                  relative: 0.7 0.4;
+                  offset: 0.3 0.3;
+               }
+            }
+         }
+      }
+      programs {
+         // Icon drop animation
+         program
+         {
+            name: "animation,state1";
+            source: "";
+            signal: "load";
+            action: STATE_SET "down-state" 1.0;
+            target: "image";
+            transition: BOUNCE 2.5 0.0 5.0;
+         }
+         // Make the title bigger
+         program
+         {
+            name: "animation,bigtitle";
+            source: "";
+            signal: "load";
+            action: STATE_SET "Bigger" 1.0;
+            target: "txt_title";
+            transition: LINEAR 5.0;
+         }
+         // Make the title go back to normal
+         program
+         {
+            name: "animation,normaltitle";
+            source: "image";
+            signal: "mouse,clicked,*";
+            action: STATE_SET "default" 1.0;
+            target: "txt_title";
+            transition: LINEAR 0.5;
+         }
+         // Change the color of target to green
+         program
+         {
+            name: "rotate,target";
+            source: "btn/rotate";
+            signal: "mouse,clicked,*";
+            action: STATE_SET "rotate" 0.0;
+            target: "atarget";
+            transition: SIN 0.2;
+            after: "rotate,target,2";
+         }
+         // Rotate 360°
+         program
+         {
+            name: "rotate,target,2";
+            action: STATE_SET "rotate" 1.0;
+            target: "atarget";
+            transition: SIN 0.7;
+            after: "rotate,end";
+         }
+         // Go back to the normal.
+         program
+         {
+            name: "rotate,end";
+            action: STATE_SET "rotate" 0.0;
+            target: "atarget";
+            transition: LINEAR 0.2;
+         }
+         // Grow the target and go back to normal state
+         program
+         {
+            name: "grow,target";
+            source: "btn/grow";
+            signal: "mouse,clicked,*";
+            action: STATE_SET "grow" 1.0;
+            after: "go,default";
+            target: "atarget";
+            transition: SINUSOIDAL 1.0;
+         }
+         // Go back to normal (default) state
+         program
+         {
+            name: "go,default";
+            action: STATE_SET "default" 1.0;
+            target: "atarget";
+            transition: SIN 1.0;
+         }
+      }
+   }
+}
+
--- a/media/code_c/tutorial/effects/elementary_animations.c
+++ b/media/code_c/tutorial/effects/elementary_animations.c
@ -0,0 +1,376 @@
+#include <Elementary.h>
+
+typedef struct _Animations
+{
+   Evas_Object *button;
+   Evas_Object *buttonbck;
+   float *rt_angle;
+   float *zto;
+   float *zfrom;
+} Animations;
+
+/**************
+ * Resize
+ *************/
+static void
+_resize_effect(Evas_Object *obj)
+{
+   // Elementary Transition declaration and creation
+   Elm_Transit *trans = elm_transit_add();
+
+   // Adding the transition target object
+   elm_transit_object_add(trans, obj);
+
+   // Setting the resize effect
+   elm_transit_effect_resizing_add(trans, 100, 50, 300, 150);
+
+   // Setting the transition duration
+   elm_transit_duration_set(trans, 3.0);
+
+   // Starting the transition
+   elm_transit_go(trans);
+}
+
+static void
+_btn_resize_cb(void *data, Evas_Object *btn, void *ev)
+{
+   Animations *anim = (Animations *)data;
+
+   // Starting the rotation effect 360 degrees
+   //evas_object_resize(button, 100, 50);
+   elm_object_text_set(anim->button, "Resize");
+   _resize_effect(anim->button);
+}
+
+/*************
+ * Rotation
+ *************/
+static void
+_rotation_effect(Evas_Object *obj, float angle)
+{
+   Elm_Transit *trans = elm_transit_add();
+   elm_transit_object_add(trans, obj);
+
+   // rotates the object from its original angle to given degrees to the right
+   elm_transit_effect_rotation_add(trans, 0.0, angle);
+   elm_transit_duration_set(trans, 2.0);
+   elm_transit_go(trans);
+}
+
+static void
+_btn_rotate_cb(void *data, Evas_Object *btn, void *ev)
+{
+   Animations *anim = (Animations *)data;
+
+   // Setting the button text
+   elm_object_text_set(anim->button, "Rotate");
+   _rotation_effect(anim->button, *(anim->rt_angle));
+}
+
+/**************
+ *   Zoom
+ *************/
+static void
+_zoom_effect(Evas_Object *obj, float from, float to)
+{
+   Elm_Transit *trans = elm_transit_add();
+   elm_transit_object_add(trans, obj);
+
+   elm_transit_effect_zoom_add(trans, from, to);
+   elm_transit_duration_set(trans, 2.0);
+   elm_transit_go(trans);
+}
+
+static void
+_btn_zoom_cb(void *data, Evas_Object *btn, void *ev)
+{
+   Animations *anim = (Animations *)data;
+
+   // Starting the rotation effect 360 degrees
+   //evas_object_resize(anim->button, 100, 50);
+   elm_object_text_set(anim->button, "Zoom");
+   _zoom_effect(anim->button, *(anim->zfrom), *(anim->zto));
+}
+
+/**************
+ *   Flip
+ *************/
+static void
+_flip_effect(Evas_Object *obj, Evas_Object *obj2)
+{
+   Elm_Transit *trans;
+
+   trans = elm_transit_add();
+   elm_transit_object_add(trans, obj);
+   elm_transit_object_add(trans, obj2);
+   elm_transit_effect_flip_add(trans, ELM_TRANSIT_EFFECT_FLIP_AXIS_X, EINA_TRUE);
+
+   elm_transit_duration_set(trans, 3.0);
+   elm_transit_go(trans);
+}
+
+static void
+_btn_flip_cb(void *data, Evas_Object *btn, void *ev)
+{
+   Animations *anim = (Animations *)data;
+
+   // Setting the button text
+   elm_object_text_set(anim->button, "Flip");
+   _flip_effect(anim->button, anim->buttonbck);
+}
+
+/**************
+ *   Blend
+ *************/
+static void
+_blend_effect(Evas_Object *obj, Evas_Object *obj2)
+{
+   Elm_Transit *trans;
+
+   trans = elm_transit_add();
+   elm_transit_object_add(trans, obj);
+   elm_transit_object_add(trans, obj2);
+   elm_transit_effect_blend_add(trans);
+   elm_transit_duration_set(trans, 3.0);
+   elm_transit_go(trans);
+}
+
+static void
+_btn_blend_cb(void *data, Evas_Object *btn, void *ev)
+{
+   Animations *anim = (Animations *)data;
+
+   // Setting the button text
+   elm_object_text_set(anim->button, "Blend");
+   _blend_effect(anim->button, anim->buttonbck);
+}
+
+/**************
+ *   Fade
+ *************/
+static void
+_fade_effect(Evas_Object *obj, Evas_Object *obj2)
+{
+   Elm_Transit *trans;
+
+   trans = elm_transit_add();
+   elm_transit_object_add(trans, obj);
+   elm_transit_object_add(trans, obj2);
+   elm_transit_effect_fade_add(trans);
+   elm_transit_duration_set(trans, 3.0);
+   elm_transit_go(trans);
+}
+
+static void
+_btn_fade_cb(void *data, Evas_Object *btn, void *ev)
+{
+   Animations *anim = (Animations *)data;
+
+
+   // Setting the button text
+   elm_object_text_set(anim->button, "Fade");
+   _fade_effect(anim->button, anim->buttonbck);
+}
+
+/**************
+ *   FlipY
+ *************/
+static void
+_flip_y_effect(Evas_Object *obj, Evas_Object *obj2)
+{
+  Elm_Transit *trans;
+
+   trans = elm_transit_add();
+   elm_transit_object_add(trans, obj);
+   elm_transit_object_add(trans, obj2);
+   elm_transit_effect_flip_add(trans, ELM_TRANSIT_EFFECT_FLIP_AXIS_Y, EINA_TRUE);
+   elm_transit_duration_set(trans, 3.0);
+   elm_transit_go(trans);
+}
+
+static void
+_btn_flip_y_cb(void *data, Evas_Object *btn, void *ev)
+{
+   Animations *anim = (Animations *)data;
+
+
+   // Setting the button text
+   elm_object_text_set(anim->button, "Flip 2");
+   _flip_y_effect(anim->button, anim->buttonbck);
+}
+
+/**************
+ *   Wipe
+ *************/
+static void
+_wipe_effect(Evas_Object *obj)
+{
+   Elm_Transit *trans;
+
+   trans = elm_transit_add();
+   elm_transit_object_add(trans, obj);
+   elm_transit_effect_wipe_add(trans, ELM_TRANSIT_EFFECT_WIPE_TYPE_HIDE, ELM_TRANSIT_EFFECT_WIPE_DIR_RIGHT);
+   elm_transit_duration_set(trans, 3.0);
+   elm_transit_go(trans);
+}
+
+static void
+_btn_wipe_cb(void *data, Evas_Object *btn, void *ev)
+{
+   Animations *anim = (Animations *)data;
+
+   // Starting the rotation effect 360 degrees
+   //evas_object_resize(anim->button, 100, 50);
+   // Setting the button text
+   elm_object_text_set(anim->button, "Wipe");
+   _wipe_effect(anim->button);
+}
+
+EAPI_MAIN int
+elm_main(int argc, char **argv)
+{
+   Evas_Object *win, *label, *hbox, *left_vbox, *center_vbox, *right_vbox;
+   Evas_Object *button, *buttonbck;
+   float rt_angle, zto, zfrom;
+
+   win = elm_win_util_standard_add("Elementary Animations", "Elementary Animations Tutorial");
+   elm_policy_set(ELM_POLICY_QUIT, ELM_POLICY_QUIT_LAST_WINDOW_CLOSED);
+   elm_win_autodel_set(win, EINA_TRUE);
+   if (elm_win_wm_rotation_supported_get(win))
+     {
+        int rots[4] = { 0, 90, 180, 270 };
+        elm_win_wm_rotation_available_rotations_set(win, (const int *)(&rots), 4);
+     }
+
+   //set the values for animations
+   rt_angle = 360.0;
+   zfrom = 1.0;
+   zto = 2.0;
+
+   /* Label*/
+   label = elm_label_add(win);
+   elm_object_text_set(label, "Effects Tutorial");
+   evas_object_size_hint_weight_set(label, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+   evas_object_move(label, 100, 0);
+   evas_object_resize(label, 200, 50);
+   evas_object_show(label);
+
+   /* Creation a button in the app window*/
+   button = elm_button_add(win);
+   evas_object_move(button, 100, 100);      // Moving the button to x=50 y=100
+   evas_object_resize(button, 200, 50);    // Resizing the button 100x50
+   evas_object_show(button);               // Showing the button
+   /* Creation a back button in the app window*/
+   buttonbck = elm_button_add(win);
+   elm_object_text_set(buttonbck, "Button back");
+   evas_object_move(buttonbck, 100, 100);
+   evas_object_resize(buttonbck, 200, 50);
+
+   /*set the structure of pointeurs*/
+   Animations anim = { button, buttonbck, &rt_angle, &zto, &zfrom };
+
+   /***********************************************************************************************************************
+                                                   *Boxes*
+   ***********************************************************************************************************************/
+   // Creation of the main container box
+   hbox = elm_box_add(win);
+   elm_box_horizontal_set(hbox, EINA_TRUE);
+   elm_box_homogeneous_set(hbox, EINA_TRUE);
+   evas_object_move(hbox, 130, 200);
+   evas_object_show(hbox);
+
+   // Creation of the first column
+   left_vbox = elm_box_add(hbox);
+   elm_box_horizontal_set(left_vbox, EINA_FALSE);
+   elm_box_homogeneous_set(left_vbox, EINA_TRUE);
+   evas_object_show(left_vbox);
+   elm_box_pack_start(hbox, left_vbox);
+
+   // Creation of the second column
+   center_vbox = elm_box_add(hbox);
+   elm_box_horizontal_set(center_vbox, EINA_FALSE);
+   elm_box_homogeneous_set(center_vbox, EINA_TRUE);
+   evas_object_show(center_vbox);
+   elm_box_pack_end(hbox, center_vbox);
+
+   // Creation of the last column
+   right_vbox = elm_box_add(hbox);
+   elm_box_horizontal_set(right_vbox, EINA_FALSE);
+   elm_box_homogeneous_set(right_vbox, EINA_TRUE);
+   evas_object_show(right_vbox);
+   elm_box_pack_end(hbox, right_vbox);
+
+   /***********************************************************************************************************************
+                                                   *Buttons*
+   ***********************************************************************************************************************/
+   // The resize button
+   Evas_Object *btn_resize = elm_button_add(win);
+   elm_object_text_set(btn_resize, "Resize");                                      // Setting the button text
+   evas_object_size_hint_weight_set(btn_resize, EVAS_HINT_FILL, EVAS_HINT_FILL);   // Setting the hint weight policy
+   evas_object_show(btn_resize);                                                   // Showing the button
+   evas_object_smart_callback_add(btn_resize, "clicked", _btn_resize_cb, &anim);   // Setting the "clicked" callback
+   elm_box_pack_end(left_vbox, btn_resize);                                        // Adding the button to the first column
+
+   // The rotation button
+   Evas_Object *btn_rotate = elm_button_add(win);
+   elm_object_text_set(btn_rotate, "Rotate");
+   evas_object_size_hint_weight_set(btn_rotate, EVAS_HINT_FILL, EVAS_HINT_FILL);
+   evas_object_show(btn_rotate);
+   evas_object_smart_callback_add(btn_rotate, "clicked", _btn_rotate_cb, &anim);
+   elm_box_pack_end(center_vbox, btn_rotate);
+
+   // The zoom button
+   Evas_Object *btn_zoom = elm_button_add(win);
+   elm_object_text_set(btn_zoom, "Zoom");
+   evas_object_size_hint_weight_set(btn_zoom, EVAS_HINT_FILL, EVAS_HINT_FILL);
+   evas_object_show(btn_zoom);
+   evas_object_smart_callback_add(btn_zoom, "clicked", _btn_zoom_cb, &anim);
+   elm_box_pack_end(right_vbox, btn_zoom);
+
+   // The flip button
+   Evas_Object *btn_flip = elm_button_add(win);
+   elm_object_text_set(btn_flip, "Flip x");
+   evas_object_size_hint_weight_set(btn_flip, EVAS_HINT_FILL, EVAS_HINT_FILL);
+   evas_object_show(btn_flip);
+   evas_object_smart_callback_add(btn_flip, "clicked", _btn_flip_cb, &anim);
+   elm_box_pack_end(left_vbox, btn_flip);
+
+   // The blend button
+   Evas_Object *btn_blend = elm_button_add(win);
+   elm_object_text_set(btn_blend, "Blend");
+   evas_object_size_hint_weight_set(btn_blend, EVAS_HINT_FILL, EVAS_HINT_FILL);
+   evas_object_show(btn_blend);
+   evas_object_smart_callback_add(btn_blend, "clicked", _btn_blend_cb, &anim);
+   elm_box_pack_end(center_vbox, btn_blend);
+
+   // The fade button
+   Evas_Object *btn_fade = elm_button_add(win);
+   elm_object_text_set(btn_fade, "Fade");
+   evas_object_size_hint_weight_set(btn_fade, EVAS_HINT_FILL, EVAS_HINT_FILL);
+   evas_object_show(btn_fade);
+   evas_object_smart_callback_add(btn_fade, "clicked", _btn_fade_cb, &anim);
+   elm_box_pack_end(right_vbox, btn_fade);
+
+   // The flip y button
+   Evas_Object *btn_flip_y = elm_button_add(win);
+   elm_object_text_set(btn_flip_y, "Flip y");
+   evas_object_size_hint_weight_set(btn_flip_y, EVAS_HINT_FILL, EVAS_HINT_FILL);
+   evas_object_show(btn_flip_y);
+   evas_object_smart_callback_add(btn_flip_y, "clicked", _btn_flip_y_cb, &anim);
+   elm_box_pack_end(left_vbox, btn_flip_y);
+
+   // The wipe button
+   Evas_Object *btn_wipe = elm_button_add(win);
+   elm_object_text_set(btn_wipe, "Wipe");
+   evas_object_size_hint_weight_set(btn_wipe, EVAS_HINT_FILL, EVAS_HINT_FILL);
+   evas_object_show(btn_wipe);
+   evas_object_smart_callback_add(btn_wipe, "clicked", _btn_wipe_cb, &anim);
+   elm_box_pack_end(right_vbox, btn_wipe);
+
+   evas_object_resize(win, 400, 400);
+   evas_object_show(win);
+   elm_run();
+   elm_shutdown();
+   return 0;
+}
+ELM_MAIN()
--- a/media/code_c/tutorial/effects/transit.c
+++ b/media/code_c/tutorial/effects/transit.c
@ -0,0 +1,248 @@
+#include <Elementary.h>
+
+/* store naviframe pointeurs */
+typedef struct _Navi
+{
+   Evas_Object *navi;
+   Evas_Object *navi2;
+} Navi;
+
+static void
+rotation_cb(void *data, Evas_Object *obj, void *event_info)
+{
+   Navi *navis = data;
+   Evas_Object *navi=navis->navi;
+   Elm_Transit *transit = elm_transit_add();
+
+   // 360 degree rotation effect in the clock-wise direction
+   elm_transit_object_add(transit, navi);
+   elm_transit_effect_rotation_add(transit, 0, 360);
+   elm_transit_duration_set(transit, 1);
+   elm_transit_go(transit);
+}
+
+static void
+zoom_cb(void *data, Evas_Object *obj, void *event_info)
+{
+   Navi *navis = data;
+   Evas_Object *navi=navis->navi;
+   // Zoom out to scale 0.6
+   Elm_Transit *transit = elm_transit_add();
+   elm_transit_smooth_set(transit, EINA_FALSE);
+   elm_transit_object_add(transit, navi);
+   elm_transit_effect_zoom_add(transit, 1.0, 0.4);
+   elm_transit_duration_set(transit, 0.5);
+
+   // Zoom in to the original size
+   Elm_Transit *transit2 = elm_transit_add();
+   elm_transit_smooth_set(transit2, EINA_FALSE);
+   elm_transit_object_add(transit2, navi);
+   elm_transit_effect_zoom_add(transit2, 0.4, 1.0);
+   elm_transit_duration_set(transit2, 0.5);
+
+   elm_transit_chain_transit_add(transit, transit2);
+   elm_transit_go(transit);
+}
+
+static void
+blend_cb(void *data, Evas_Object *obj, void *event_info)
+{
+   Navi *navis = data;
+   Evas_Object *navi=navis->navi;
+   Evas_Object *navi2=navis->navi2;
+   Elm_Transit *transit = elm_transit_add();
+
+   elm_transit_object_add(transit, navi);
+   elm_transit_object_add(transit, navi2);
+   elm_transit_effect_blend_add(transit);
+   elm_transit_duration_set(transit, 3.0);
+   elm_transit_objects_final_state_keep_set(transit, EINA_TRUE);
+   elm_transit_go(transit);
+
+}
+
+static void
+fade_cb(void *data, Evas_Object *obj, void *event_info)
+{
+   Navi *navis = data;
+   Evas_Object *navi=navis->navi;
+   Evas_Object *navi2=navis->navi2;
+   Elm_Transit *transit = elm_transit_add();
+
+   elm_transit_object_add(transit, navi);
+   elm_transit_object_add(transit, navi2);
+   elm_transit_effect_fade_add(transit);
+   elm_transit_duration_set(transit, 3.0);
+   elm_transit_objects_final_state_keep_set(transit, EINA_TRUE);
+   elm_transit_go(transit);
+
+}
+
+static void
+flip_cb(void *data, Evas_Object *obj, void *event_info)
+{
+   Navi *navis = data;
+   Evas_Object *navi=navis->navi;
+   Evas_Object *navi2=navis->navi2;
+   Elm_Transit *transit = elm_transit_add();
+
+   elm_transit_object_add(transit, navi);
+   elm_transit_object_add(transit, navi2);
+   elm_transit_effect_flip_add(transit, ELM_TRANSIT_EFFECT_FLIP_AXIS_X, EINA_TRUE);
+   elm_transit_duration_set(transit, 3.0);
+   elm_transit_objects_final_state_keep_set(transit, EINA_TRUE);
+   elm_transit_go(transit);
+}
+
+static void
+resizable_flip_cb(void *data, Evas_Object *obj, void *event_info)
+{
+   Navi *navis = data;
+   Evas_Object *navi=navis->navi;
+   Evas_Object *navi2=navis->navi2;
+   Elm_Transit *transit = elm_transit_add();
+
+   elm_transit_object_add(transit, navi);
+   elm_transit_object_add(transit, navi2);
+   elm_transit_effect_resizable_flip_add(transit, ELM_TRANSIT_EFFECT_FLIP_AXIS_Y, EINA_TRUE);
+   elm_transit_duration_set(transit, 3.0);
+   elm_transit_objects_final_state_keep_set(transit, EINA_TRUE);
+   elm_transit_go(transit);
+}
+
+static void
+wipe_cb(void *data, Evas_Object *obj, void *event_info)
+{
+   Navi *navis = data;
+   Evas_Object *navi=navis->navi;
+   Elm_Transit *transit = elm_transit_add();
+
+   elm_transit_object_add(transit, navi);
+   elm_transit_effect_wipe_add(transit, ELM_TRANSIT_EFFECT_WIPE_TYPE_HIDE, ELM_TRANSIT_EFFECT_WIPE_DIR_RIGHT);
+   elm_transit_duration_set(transit, 3.0);
+   elm_transit_go(transit);
+}
+
+static void
+translation_cb(void *data, Evas_Object *obj, void *event_info)
+{
+   Navi *navis = data;
+   Evas_Object *navi=navis->navi;
+   Elm_Transit *transit = elm_transit_add();
+
+   elm_transit_object_add(transit, navi);
+   elm_transit_effect_translation_add(transit, 0, 0, 50, 100);
+   elm_transit_duration_set(transit, 3.0);
+   elm_transit_go(transit);
+}
+
+static void
+color_cb(void *data, Evas_Object *obj, void *event_info)
+{
+   Navi *navis = data;
+   Evas_Object *navi=navis->navi;
+   Elm_Transit *transit = elm_transit_add();
+
+   elm_transit_object_add(transit, navi);
+   elm_transit_effect_color_add(transit,0,0,0,0,255,255,0,255);
+   elm_transit_duration_set(transit, 3.0);
+   elm_transit_go(transit);
+}
+
+static void
+custom_cb(void *data, Evas_Object *obj, void *event_info)
+{
+   Navi *navis = data;
+   Evas_Object *navi=navis->navi;
+   Evas_Object *navi2=navis->navi2;
+   Elm_Transit *transit = elm_transit_add();
+
+   elm_transit_object_add(transit, navi);
+   elm_transit_object_add(transit, navi2);
+   elm_transit_effect_color_add(transit,0,0,0,0,255,255,0,255);
+   elm_transit_effect_flip_add(transit, ELM_TRANSIT_EFFECT_FLIP_AXIS_Y, EINA_TRUE);
+   elm_transit_duration_set(transit, 3.0);
+
+   Elm_Transit *transit2 = elm_transit_add();
+   elm_transit_object_add(transit2, navi2);
+   elm_transit_object_add(transit2, navi);
+   elm_transit_effect_color_add(transit2,0,0,0,0,180,255,0,255);
+   elm_transit_effect_zoom_add(transit2, 1.0, 0.1);
+   elm_transit_duration_set(transit2, 3.0);
+
+   elm_transit_chain_transit_add(transit, transit2);
+   elm_transit_go(transit);
+}
+
+EAPI_MAIN int
+elm_main(int argc, char **argv)
+{
+   Evas_Object *win, *navi, *navi2, *list, *list2;
+
+   win = elm_win_util_standard_add("Transition", "Transition Tutorial");
+   elm_policy_set(ELM_POLICY_QUIT, ELM_POLICY_QUIT_LAST_WINDOW_CLOSED);
+   elm_win_autodel_set(win, EINA_TRUE);
+   if (elm_win_wm_rotation_supported_get(win))
+     {
+        int rots[4] = { 0, 90, 180, 270 };
+        elm_win_wm_rotation_available_rotations_set(win, (const int *)(&rots), 4);
+     }
+
+   Elm_Object_Item *nf_it, *nf_it2;
+
+   /* add two naviframes and two lists to switch
+    * from one to another in some transitions */
+   navi2 = elm_naviframe_add(win);
+   navi = elm_naviframe_add(win);
+   list = elm_list_add(navi);
+   list2 = elm_list_add(navi2);
+   elm_list_mode_set(list, ELM_LIST_COMPRESS);
+   elm_list_mode_set(list2, ELM_LIST_COMPRESS);
+
+   /* store naviframe pointeurs to pass them
+    * in data pointeur parameter */
+   Navi navis = {navi, navi2};
+   Navi navis2 = {navi2, navi};
+
+   /* first list items */
+   elm_list_item_append(list, "Blend", NULL, NULL, blend_cb, &navis);
+   elm_list_item_append(list, "Color", NULL, NULL, color_cb, &navis);
+   elm_list_item_append(list, "Fade", NULL, NULL, fade_cb, &navis);
+   elm_list_item_append(list, "Flip", NULL, NULL, flip_cb, &navis);
+   elm_list_item_append(list, "Rotation", NULL, NULL, rotation_cb, &navis);
+   elm_list_item_append(list, "ResizableFlip", NULL, NULL, resizable_flip_cb, &navis);
+   elm_list_item_append(list, "Translation", NULL, NULL, translation_cb, &navis);
+   elm_list_item_append(list, "Wipe", NULL, NULL, wipe_cb, &navis);
+   elm_list_item_append(list, "Zoom", NULL, NULL, zoom_cb, &navis);
+   elm_list_item_append(list, "Custom", NULL, NULL, custom_cb, &navis);
+   elm_list_go(list);
+
+   /* second list items*/
+   elm_list_item_append(list2, "Blend2", NULL, NULL, blend_cb, &navis2);
+   elm_list_item_append(list2, "Color2", NULL, NULL, color_cb, &navis2);
+   elm_list_item_append(list2, "Fade2", NULL, NULL, fade_cb, &navis2);
+   elm_list_item_append(list2, "Flip2", NULL, NULL, flip_cb, &navis2);
+   elm_list_item_append(list2, "Rotation2", NULL, NULL, rotation_cb, &navis2);
+   elm_list_item_append(list2, "ResizableFlip2", NULL, NULL, resizable_flip_cb, &navis2);
+   elm_list_item_append(list2, "Translation2", NULL, NULL, translation_cb, &navis2);
+   elm_list_item_append(list2, "Wipe2", NULL, NULL, wipe_cb, &navis2);
+   elm_list_item_append(list2, "Zoom2", NULL, NULL, zoom_cb, &navis2);
+   elm_list_item_append(list2, "Custom2", NULL, NULL, custom_cb, &navis2);
+   elm_list_go(list2);
+
+   nf_it = elm_naviframe_item_push(navi, "Transit", NULL, NULL, list, NULL);
+   nf_it2 = elm_naviframe_item_push(navi2, "Transit2", NULL, NULL, list2, NULL);
+
+   evas_object_show(navi);
+   evas_object_show(navi2);
+   evas_object_show(list);
+   evas_object_show(list2);
+   evas_object_resize(navi2, 400, 400);
+   evas_object_resize(navi, 400, 400);
+   evas_object_resize(win, 400, 400);
+   evas_object_show(win);
+   elm_run();
+   elm_shutdown();
+   return 0;
+}
+ELM_MAIN()
--- a/media/ecore_animator.gif
+++ b/media/ecore_animator.gif
--- a/media/ecore_animator_3D.gif
+++ b/media/ecore_animator_3D.gif
--- a/media/ecore_animator_rotate.gif
+++ b/media/ecore_animator_rotate.gif
--- a/media/ecore_animator_start.gif
+++ b/media/ecore_animator_start.gif
--- a/media/ecore_animator_zoom.gif
+++ b/media/ecore_animator_zoom.gif
--- a/media/edje_animation_grow.gif
+++ b/media/edje_animation_grow.gif
--- a/media/edje_animation_reset.gif
+++ b/media/edje_animation_reset.gif
--- a/media/edje_animation_rotate.gif
+++ b/media/edje_animation_rotate.gif
--- a/media/edje_animation_start.gif
+++ b/media/edje_animation_start.gif
--- a/media/elementary_animations_blend.gif
+++ b/media/elementary_animations_blend.gif
--- a/media/elementary_animations_fade.gif
+++ b/media/elementary_animations_fade.gif
--- a/media/elementary_animations_flip.gif
+++ b/media/elementary_animations_flip.gif
--- a/media/elementary_animations_flipy.gif
+++ b/media/elementary_animations_flipy.gif
--- a/media/elementary_animations_resize.gif
+++ b/media/elementary_animations_resize.gif
--- a/media/elementary_animations_rotate.gif
+++ b/media/elementary_animations_rotate.gif
--- a/media/elementary_animations_wipe.gif
+++ b/media/elementary_animations_wipe.gif
--- a/media/elementary_animations_zoom.gif
+++ b/media/elementary_animations_zoom.gif
--- a/media/transit_color.gif
+++ b/media/transit_color.gif
--- a/media/transit_fade.gif
+++ b/media/transit_fade.gif
--- a/media/transit_flip.gif
+++ b/media/transit_flip.gif
--- a/media/transit_resizeflip.gif
+++ b/media/transit_resizeflip.gif
--- a/media/transit_rotate.gif
+++ b/media/transit_rotate.gif
--- a/media/transit_translation.gif
+++ b/media/transit_translation.gif
--- a/media/transit_wipe.gif
+++ b/media/transit_wipe.gif
--- a/media/transit_zoom.gif
+++ b/media/transit_zoom.gif
--- a/pages/docs.txt
+++ b/pages/docs.txt
@ -50,6 +50,7 @@ Go check the current available version of EFL on each distro/platform:
  * [[tutorial/popup_tutorial|Popup Tutorial]]
  * [[tutorial/gl_2d_tutorial|GL 2D Tutorial]]
  * [[tutorial/preference_tutorial|Preference Tutorial]]
+  * [[tutorial/effects_tutorial|Effects Tutorial]]

 ----

--- a/pages/tutorial/effects/ecore_animator/3d_rotation.txt
+++ b/pages/tutorial/effects/ecore_animator/3d_rotation.txt
@ -0,0 +1,75 @@
+~~Title: 3D Rotation Effect - Ecore Animator~~
+//**__previous page__: **//[[/tutorial/effects/ecore_animator/zoom|Creating a zoom effect]]
+==== Creating a 3D Rotation Effect ====
+
+The last animation is a 3D rotation. For this one, we are going to rotate the
+Evas object on all three axes (X, Y, Z).
+
+{{ :ecore_animator_3D.gif }}
+
+First, create the button and its callback function:
+
+<code c>
+// Button 3 : 3D Rotation Effect
+bt3 = elm_button_add(win);
+elm_object_text_set(bt3, "3D");
+evas_object_size_hint_weight_set(bt3, EVAS_HINT_FILL, EVAS_HINT_FILL);
+evas_object_move(bt3, 170, 0);
+evas_object_resize(bt3, 90, 70);
+evas_object_smart_callback_add(bt3, "clicked", _btn_3d_cb, target);
+evas_object_show(bt3);
+
+
+static void _btn_3d_cb(void *data, Evas_Object *btn, void *ev)
+{
+   Evas_Object *target = data;
+   ecore_animator_timeline_add(1, _do_3d, target);
+}
+</code>
+
+Next, we create the ''_do_3d()'' animation callback function, which is very
+similar to the rotate and zoom callback functions. To create the animation, we
+use the ''evas_map_util_3d_rotate()'' function, which allows you to rotate any
+Evas object on all three axes.
+
+<code c>
+static Eina_Bool
+_do_3d(void *data, double pos)
+{
+   Evas_Object *obj = data;
+   Evas_Map *m;
+   int x, y, w, h;
+
+   evas_object_geometry_get(obj, &x, &y, &w, &h);
+   m = evas_map_new(4);
+   evas_map_util_points_populate_from_object(m, obj);
+   evas_map_util_3d_rotate(m, pos * 360, pos * 360, pos * 360, x + (w / 3), y + 60, 0);
+   evas_object_map_set(obj, m);
+   evas_object_map_enable_set(obj, EINA_TRUE);
+   evas_map_free(m);
+
+   return EINA_TRUE;
+}
+</code>
+
+The ''evas_map_util_3d_rotate()'' function takes the following arguments:
+
+  * The map to change
+  * The angle (0-360°) to rotate around the X axis
+  * The angle (0-360°) to rotate around the Y axis
+  * The angle (0-360°) to rotate around the Z axis
+  * The X coordinate of the rotation center
+  * The Y coordinate of the rotation center
+  * The Z coordinate of the rotation center
+
+Here, we rotate 360 degrees around each axis. The horizontal (X) rotation
+center is the X position of the target plus its width divided by 2. The
+vertical (Y) rotation center is the Y position of the target plus 60. The Z
+rotation center is 0.
+
+As with the rotation and zoom animations, we multiply the angles by the
+timeline position to gently rotate the target on each call to the ''_do_3d()''
+callback function along the timeline.
+
+\\
+//**__next page__: **//[[/tutorial/effects/ecore_animator/drop_bounce|Creating drop and bounce effects]]
--- a/pages/tutorial/effects/ecore_animator/drop_bounce.txt
+++ b/pages/tutorial/effects/ecore_animator/drop_bounce.txt
@ -0,0 +1,62 @@
+~~Title: Drop and Bounce Effects - Ecore Animator~~
+//**__previous page__: **//[[/tutorial/effects/ecore_animator/zoom|Creating a zoom effect]]
+==== Creating Drop and Bounce Effects ====
+
+To finish, we add drop and bounce effects to our buttons at application start.
+
+{{ :ecore_animator_start.gif }}
+
+To do this, we create one timeline per button after creating the buttons in
+''elm_main()'':
+
+<code c>
+//drop and bounce effects
+ecore_animator_timeline_add(2, _do_drop, bt1);
+ecore_animator_timeline_add(2.3, _do_drop, bt2);
+ecore_animator_timeline_add(2.5, _do_drop, bt3);
+</code>
+
+We call the same ''_do_drop()'' animation callback function for each timeline.
+In this callback, instead of using an Evas Map, we simply change the position
+of the target using the ''evas_object_move()'' function:
+
+<code c>
+static Eina_Bool
+_do_drop(void *data, double pos)
+{
+   Evas_Object *obj = data;
+   int x, y, w, h;
+   double frame = pos;
+   frame = ecore_animator_pos_map(pos, ECORE_POS_MAP_BOUNCE, 2, 4);
+
+   evas_object_geometry_get(obj, &x, &y, &w, &h);
+   evas_object_move(obj, x, 600 * frame);
+
+   return EINA_TRUE;
+}
+</code>
+
+To get the bounce effect, we use the ''ecore_animator_pos_map()'' function,
+which maps an input position from 0.0 to 1.0 along the timeline to a position
+on a different curve. The curve can be of different types, such as ''LINEAR'',
+''SINUSOIDAL'', and ''BOUNCE''. This function takes the following arguments:
+
+  * The input position to map
+  * The mapping to use (''LINEAR'', ''SINUSOIDAL'', and so on)
+  * v1, which is the first parameter used by the mapping
+  * v2, which is the second parameter used by the mapping
+
+The ''ECORE_POS_MAP_BOUNCE'' map we use starts at 0.0, then drops like a ball
+bouncing to the ground at 1.0, bouncing v2 times with a decay factor of v1.
+Here, we bounce 4 times with a decay factor of 2:
+
+<code c>
+frame = ecore_animator_pos_map(pos, ECORE_POS_MAP_BOUNCE, 2, 4);
+</code>
+This frame is used in the move function to create the animation. The value
+increases on each ''_do_drop()'' call along the timeline, which produces a
+nice drop of the buttons from their initial position to 600 pixels on the
+vertical axis.
+
+\\
+//**__The whole code__: **//{{code_c/tutorial/effects/ecore_animator.c}}
--- a/pages/tutorial/effects/ecore_animator/rotation.txt
+++ b/pages/tutorial/effects/ecore_animator/rotation.txt
@ -0,0 +1,125 @@
+~~Title: Rotation Effect - Ecore Animator~~
+//**__previous page__: **//[[/tutorial/effects/ecore_animator/setting_up|Setting up the application]]
+==== Creating a Rotation Effect ====
+
+{{ :ecore_animator_rotate.gif }}
+
+After the animation target is created, the first button and associated
+rotation can be created:
+
+<code c>
+// Button 1 : Rotation effect
+bt1 = elm_button_add(win);
+elm_object_text_set(bt1, "Rotate");
+evas_object_size_hint_weight_set(bt1, EVAS_HINT_FILL, EVAS_HINT_FILL);
+evas_object_move(bt1, 25, 0);
+evas_object_resize(bt1, 90, 70);
+evas_object_smart_callback_add(bt1, "clicked", _btn_rotate_cb, target);
+evas_object_show(bt1);
+</code>
+
+The button is used for triggering the rotation effect. The button is placed
+and resized, and associated with the ''_btn_rotate_cb()'' callback function.
+This callback function calls the animation on the animation target.
+
+<code c>
+static void
+_btn_rotate_cb(void *data, Evas_Object *btn, void *ev)
+{
+   Evas_Object *target = data;
+   ecore_animator_timeline_add(1, _do_rotate, target);
+}
+</code>
+
+In this callback function, an Ecore animator timeline is created using the
+''ecore_animator_timeline_add()'' function. This function adds an animator that
+runs for a limited time the ''_do_rotate()'' animation callback function
+for 1 second on the ''target'' Evas object.
+
+Next, we write the animation callback function that actually runs the
+animation. This callback is an ''Ecore_Timeline_Cb'' function, meaning it returns
+an ''Eina_Bool'' value and takes as arguments some ''data'' and the current position
+along the animation timeline (''pos'').
+
+To create the rotation animation, an Evas Map is used. The map handles the
+necessary map points and allows you to manipulate the target Evas object on
+the X, Y, and Z axes.
+
+<code c>
+static Eina_Bool
+_do_rotate(void *data, double pos)
+{
+   // Get the animation target
+   Evas_Object *obj = data;
+   // Declaration of an `Evas_Map`
+   Evas_Map *m;
+   // Variables to store the target size and position
+   int x, y, w, h;
+
+   // Getting the size and position of the target
+   evas_object_geometry_get(obj, &x, &y, &w, &h);
+   // Creation of an `Evas_Map` of 4 points
+   m = evas_map_new(4);
+   // Populate source and destination map points to match exactly object.
+   evas_map_util_points_populate_from_object(m, obj);
+   // Create a rotation of 360° with x+(w/2) "x" center and y +(h/2) "y" center.
+   evas_map_util_rotate(m, 360.0 * pos, x + (w / 2), y + (h / 2));
+   // Setting the object to "animate" in the `Evas_Map`
+   evas_object_map_set(obj, m);
+   // Starting the Animation
+   evas_object_map_enable_set(obj, EINA_TRUE);
+   // Free used memory
+   evas_map_free(m);
+
+   return EINA_TRUE;
+}
+</code>
+
+In the animation callback function, we first declare the ''Evas Map''. To
+implement the rotation, an X and Y center needs to be set, so we create 4
+integer variables to store the size and position of the target. This
+information is provided by the ''evas_object_geometry_get()'' function, which
+returns the X and Y coordinates and the weight and height of the target Evas
+object. Now we have all the required data to build the animation.
+
+An Evas Map is consisted of four points, and these points are populated with
+the animation target:
+
+<code c>
+// Creation of an `Evas_Map` of 4 points
+m = evas_map_new(4);
+// Populate source and destination map points to match exactly object.
+evas_map_util_points_populate_from_object(m, obj);
+</code>
+
+Now the ''evas_map_util_rotate()'' function defines the rotation:
+
+<code c>
+// Create a rotation of 360° with x+(w/2) "x" center and y +(h/2) "y" center.
+evas_map_util_rotate(m, 360.0 * pos, x + (w / 2), y + (h / 2));
+</code>
+
+The animation callback function will be called at several points along the
+timeline, which is why the rotation angle (360°) is multiplied by the timeline
+position (pos) to get the actual animation angle. If we do not do this, we
+will never see the animation take place. Then the target objet is joined to
+the map and we start the animation.
+
+<code c>
+// Setting the object to "animate" in the `Evas_Map`
+evas_object_map_set(obj, m);
+// Starting the Animation
+evas_object_map_enable_set(obj, EINA_TRUE);
+</code>
+
+Each call to the animation callback function will rotate the object (360 *
+timeline position) degrees.
+
+Finally, the memory allocated to the Evas Map is freed up:
+<code c>
+// Free used memory
+evas_map_free(m);
+</code>
+
+\\
+//**__next page__: **//[[/tutorial/effects/ecore_animator/zoom|Creating a zoom effect]]
--- a/pages/tutorial/effects/ecore_animator/setting_up.txt
+++ b/pages/tutorial/effects/ecore_animator/setting_up.txt
@ -0,0 +1,81 @@
+~~Title: Setting Up - Ecore Animator~~
+==== Setting up the application ====
+
+In this part of the tutorial, we create a simple application that manipulates
+and animates an Evas object. We use a "Basic UI Application" as the basis for
+the application.
+
+First, we set up the widgets we are going to use in the application:
+
+<code c>
+EAPI_MAIN int
+elm_main(int argc, char **argv)
+{
+   //Main window
+   Evas_Object *win;
+   //Application Title
+   Evas_Object *label;
+
+   //buttons
+   Evas_Object *bt1, *bt2, *bt3;
+   //Animation target
+   Evas_Object *target;
+
+   elm_run();
+   elm_shutdown();
+   return EXIT_SUCCESS;
+}
+ELM_MAIN()
+</code>
+
+Then the actual widgets are created, starting with the main window and
+application title:
+
+<code c>
+//Main window
+win = elm_win_util_standard_add("Ecore Animator", "Ecore Animator Tutorial");
+elm_policy_set(ELM_POLICY_QUIT, ELM_POLICY_QUIT_LAST_WINDOW_CLOSED);
+elm_win_autodel_set(win, EINA_TRUE);
+
+if (elm_win_wm_rotation_supported_get(win))
+  {
+     int rots[4] = { 0, 90, 180, 270 };
+     elm_win_wm_rotation_available_rotations_set(win, (const int *)(&rots), 4);
+  }
+
+// Application title
+label = elm_label_add(win);
+elm_object_text_set(label, "Ecore Animator Tutorial");
+evas_object_size_hint_weight_set(label, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+elm_win_resize_object_add(win, label);
+evas_object_show(label);
+</code>
+
+Next, we create the animation target, which is an Evas object of type
+Elm_Image.
+
+<code c>
+// Animation target
+// Setting the image path
+char buf[PATH_MAX];
+snprintf(buf, sizeof(buf), "icon.png");
+// Adding the image
+target = elm_image_add(win);
+// Setting the image path
+if (!elm_image_file_set(target, buf, NULL))
+       printf("error: could not load image \"%s\"\n", buf);
+evas_object_size_hint_weight_set(target, EVAS_HINT_FILL, EVAS_HINT_FILL);
+//Moving the image
+evas_object_move(target, 130, 100);
+//Resizing the image
+evas_object_resize(target, 200, 100);
+//Showing the image
+evas_object_show(target);
+</code>
+
+The image path is set by calling the ''elm_image_file_set()'' function. This
+function takes as arguments the ''target'' Evas object and the path of the
+image file, built with the ''snprintf()'' function and stored in a buffer.
+
+\\
+//**__next page__: **//[[/tutorial/effects/ecore_animator/rotation|Creating a rotation effect]]
--- a/pages/tutorial/effects/ecore_animator/zoom.txt
+++ b/pages/tutorial/effects/ecore_animator/zoom.txt
@ -0,0 +1,72 @@
+~~Title: Zoom Effect - Ecore Animator~~
+//**__previous page__: **//[[/tutorial/effects/ecore_animator/rotation|Creating a rotation effect]]
+==== Creating a Zoom Effect ====
+
+The next animation is a zoom, for which an Evas Map is also used.
+
+{{ :ecore_animator_zoom.gif }}
+
+First, the button is created in ''elm_main()'':
+
+<code c>
+// Button 2 : Zoom Effect
+bt2 = elm_button_add(win);
+elm_object_text_set(bt2, "Zoom");
+evas_object_size_hint_weight_set(bt2, EVAS_HINT_FILL, EVAS_HINT_FILL);
+evas_object_move(bt2, 315, 0);
+evas_object_resize(bt2, 90, 70);
+evas_object_smart_callback_add(bt2, "clicked", _btn_zoom_cb, target);
+evas_object_show(bt2);
+</code>
+
+Then, the button callback function is created with a new timeline:
+
+<code c>
+static void _btn_zoom_cb(void *data, Evas_Object *btn, void *ev)
+{
+   Evas_Object *target = data;
+   ecore_animator_timeline_add(1, _do_zoom, target);
+}
+</code>
+
+Next, we write the ''_do_zoom()'' animation callback function, which is almost
+identical to the ''_do_rotate()'' callback function, except that we use the
+''evas_map_util_zoom()'' function to create the animation:
+
+<code c>
+static Eina_Bool
+_do_zoom(void *data, double pos)
+{
+   Evas_Object *obj = data;
+   Evas_Map *m;
+   int x, y, w, h;
+
+   evas_object_geometry_get(obj, &x, &y, &w, &h);
+   m = evas_map_new(4);
+   evas_map_util_points_populate_from_object(m, obj);
+   evas_map_util_zoom(m, 2 * pos, 2 * pos, x , y);
+   evas_object_map_set(obj, m);
+   evas_object_map_enable_set(obj, EINA_TRUE);
+   evas_map_free(m);
+
+   return EINA_TRUE;
+}
+</code>
+The ''evas_map_util_zoom()'' function takes the following arguments:
+
+  * The map to change
+  * The horizontal zoom factor
+  * The vertical zoom factor
+  * The horizontal position (X coordinate) of the zooming center
+  * The vertical position (Y coordinate) of the zooming center
+
+Here, a horizontal and vertical zoom factor of 2 is used, and the X and Y
+coordinates of the target as the horizontal and vertical center coordinates.
+
+The ''_do_zoom()'' callback function is called at several points along the
+animation timeline, which is why we multiply the horizontal and vertical zoom
+factor values by the timeline position. Each call will zoom more than the
+previous one, thereby creating the animation effect.
+
+\\
+//**__next page__: **//[[/tutorial/effects/ecore_animator/3d_rotation|Creating a 3D rotation effect]]
--- a/pages/tutorial/effects/edje_animation/on_click.txt
+++ b/pages/tutorial/effects/edje_animation/on_click.txt
@ -0,0 +1,312 @@
+~~Title: On Click - Edje Animation~~
+//**__previous page__: **//[[/tutorial/effects/edje_animation/start_up|Animating on Application Start-up]]
+==== Animating Object on Click ====
+
+All the previous animations are automatic and do not have any relation with
+the user's actions.
+
+=== Title go back ===
+
+Next animate a part by clicking on another one. Make the
+title restore its default aspect when clicking on the small image.
+
+{{ :edje_animation_reset.gif }}
+
+The parts and the states are already defined. The animation goes back to the
+default state, there is no need to add any parts or states: only add a program
+which makes the transition when clicking on logo part.
+
+<code c>
+// Make the title go back to normal
+program
+{
+   name: "animation,normaltitle";
+   source: "image";
+   signal: "mouse,clicked,*";
+   action: STATE_SET "default" 1.0;
+   target: "txt_title";
+   transition: LINEAR 0.5;
+}
+</code>
+
+This program starts when the application receives the signal
+''mouse,clicked,*'' (any button of the mouse is clicked) from the part called
+image, (''source''). It performs the ''STATE_SET'' action and sets the default
+state on the target ''txt_file'' part with a ''LINEAR'' transition.
+
+When clicking any mouse button on the small logo, the title goes back to its
+original state.
+
+=== Rotating Parts ===
+
+Next add two more buttons to the application and create programs to animate a
+target.
+
+It is possible to create a button with Edje from scratch, but to save time,
+the ''SWALLOW'' part is used in this example to store Elementary widgets.
+
+First create the ''SWALLOW'' parts, and then the ''Elementary'' widgets in the
+''.c'' file.
+
+<code c>
+// Container for the rotate button
+part
+{
+   type: SWALLOW;
+   name: "btn/rotate";
+   description
+   {
+      state: "default" 0.0;
+      rel1.relative: 0.30 0.9;
+      rel2.relative: 0.50 0.99;
+   }
+}
+</code>
+
+This part is called ''btn/rotate'', it only has a ''SWALLOW'' type and a
+default state with its position being on the bottom left of the screen.
+
+<code c>
+// Container for the grow button
+part
+{
+   type: SWALLOW;
+   name: "btn/grow";
+   description
+   {
+      state: "default" 0.0;
+      rel1.relative: 1.02 0;
+      rel1.to: "btn/rotate";
+      rel2.relative: 2.02 1;
+      rel2.to: "btn/rotate";
+   }
+}
+</code>
+
+This second ''SWALLOW'' part is very similar to the first one. It is placed
+relatively to ''btn/rotate'', in order to remain next to it.
+
+Next create the actual widgets. This is done in the ''.c'' file and is very
+similar to what is done for the buttons in the first chapter.
+
+This code is added in ''elm_main()''.
+
+<code c>
+// Creation button in the app window
+button = elm_button_add(win);
+elm_object_text_set(button, "Rotate");
+// Add the button to the edje layout container called "btn/rotate"
+elm_object_part_content_set(layout, "btn/rotate", button);
+evas_object_show(button);
+
+// Creation a up button in the app window
+btn_up = elm_button_add(win);
+// Add the button to the edje layout container called "btn/grow"
+elm_object_text_set(btn_up, "Grow");
+elm_object_part_content_set(layout, "btn/grow", btn_up);
+evas_object_show(btn_up);
+</code>
+
+In the default Basic EDC UI Application, the Edje layout is loaded by default.
+Create two Elementary buttons and add them to the ''SWALLOW'' containers,
+without having to setup sizes or positions as this is done in the ''SWALLOW''
+container.
+
+Note that the part name is very important because it is used to be merged the
+Elementary widget and the ''SWALLOW'' part.
+
+When the buttons placed and set, create the animation target. It is done in
+the EDC file.
+
+Add the animation target part.
+
+The part initialization and the default ''state'':
+
+<code c>
+// The animation target
+part
+{
+   name: "atarget";
+   type: IMAGE;
+
+   // Default state
+   description
+   {
+      state: "default" 0.0;
+      image { normal: "image2.png"; }
+      color: 255 0 0 255; /* red */
+      rel1 { relative: 0.3 0.3; }
+      rel2 { relative: 0.7 0.7; }
+   }
+}
+</code>
+
+This ''part'' is an image displaying a big logo, centered on the top of the
+screen.
+
+Create a state to change the color and add the ''map'' statement.
+
+<code c>
+// The rotate state
+description
+{
+   state: "rotate" 0.0;
+   inherit: "default" 0.0;
+
+   map
+   {
+      //Enable Map on the part
+      on: 1;
+      //Enable smooth rendering
+      smooth: 1;
+      //Enable perspective
+      perspective_on: 1;
+
+      //Apply rotations on the part
+      rotation.x: 0;
+      rotation.y: 0;
+      rotation.z: 0;
+   }
+   color: 0 255 0 255; /* green */
+}
+</code>
+
+This part changes the color to green and defines the ''map''. This statement
+makes rotations possible on an Edje ''part''. Rotations are done around the x,
+y or z axes. In this example, the map is enabled and a 0° rotation is applied
+around each axis.
+
+Add a state with a rotation around the z axis of 360°.
+
+<code c>
+description
+{
+   state: "rotate" 1.0;
+   inherit: "rotate" 0.0;
+   map.rotation.z: 360;
+}
+</code>
+
+This ''state'' inherits from the default state parameters and add a rotation
+around the z axis.
+
+Finally add a state to the other button animation grow. Change the size of the
+animation target and add an offset.
+
+
+<code c>
+// The grow state
+description {
+   state: "grow" 0.0;
+   inherit: "default" 0.0;
+   color: 0 0 255 255; /* blue */
+   rel1
+   {
+      relative: 0.2 0.2;
+      offset: 0.3 0.3;
+   }
+   rel2
+   {
+      relative: 0.7 0.4;
+      offset: 0.3 0.3;
+   }
+}
+</code>
+
+The last step is to create the programs to make all these states animate.
+
+{{ :edje_animation_rotate.gif }}
+
+To make the rotation animation smoother, create and chain several ''programs''
+with different durations.
+
+First create the main one: it goes from the default state to the rotate 0.0
+state in 0.2 seconds.
+
+Note that the states are all named the same way (rotate) but not with the same
+version. This version allows you to have more than one state with the same
+name, in fact the actual name of the state is the name plus the version.
+
+<code c>
+// Change the color of target to green
+program
+{
+   name: "rotate,target";
+   source: "btn/rotate";
+   signal: "mouse,clicked,*";
+   action: STATE_SET "rotate" 0.0;
+   target: "atarget";
+   transition: SIN 0.2;
+   after: "rotate,target,2";
+}
+</code>
+
+The program starts when the ''btn/rotate'' part is clicked with any mouse
+button.  When the animation ends, it calls the next one called
+''rotate,target,2''.
+
+<code c>
+// Rotate 360°
+program
+{
+   name: "rotate,target,2";
+   action: STATE_SET "rotate" 1.0;
+   target: "atarget";
+   transition: SIN 0.7;
+   after: "rotate,end";
+}
+</code>
+
+This program sets the part state to ''rotate 1.0'' in 0.7 seconds, and when done
+calls the next one ''rotate,end''.
+
+<code c>
+// Go back to the normal.
+program
+{
+   name: "rotate,end";
+   action: STATE_SET "rotate" 0.0;
+   target: "atarget";
+   transition: LINEAR 0.2;
+}
+</code>
+
+''rotate,end'' is the last program of the rotation effect: it sets the state
+to ''rotate 0.0'' very fast.
+
+The last program of this example is the grow effect, it switches from one
+state to another.
+
+{{ :edje_animation_grow.gif }}
+
+<code c>
+// Grow the target and go back to normal state
+program
+{
+   name: "grow,target";
+   source: "btn/grow";
+   signal: "mouse,clicked,*";
+   action: STATE_SET "grow" 1.0;
+   after: "go,default";
+   target: "atarget";
+   transition: SINUSOIDAL 1.0;
+}
+</code>
+
+It starts when the ''btn/grow'' part is clicked, it goes from the current
+state to ''grow 1.0'' in one second. It then calls the go,default program. In
+this program, both size and color change during the transition.
+
+The ''go,default'' program sets the status back default for the animation
+target.
+
+<code c>
+// Go back to normal (default) state
+program
+{
+   name: "go,default";
+   action: STATE_SET "default" 1.0;
+   target: "atarget";
+   transition: SIN 1.0;
+}
+</code>
--- a/pages/tutorial/effects/edje_animation/start_up.txt
+++ b/pages/tutorial/effects/edje_animation/start_up.txt
@ -0,0 +1,187 @@
+~~Title: Start Up - Edje Animation~~
+==== Animating on Application Start-up ====
+
+The goal of this tutorial is to create an animation target and buttons to
+start animations, all of this is in an EDC (Edje Data Collection) file.
+
+{{ :edje_animation_start.gif }}
+
+First create an application using Basic EDC UI Application:
+
+<code c>
+#include <Elementary.h>
+
+EAPI_MAIN int
+elm_main(int argc, char **argv)
+{
+   Evas_Object *win, *layout;
+   win = elm_win_util_standard_add("Edje Animation", "Edje Animation Tutorial");
+   elm_policy_set(ELM_POLICY_QUIT, ELM_POLICY_QUIT_LAST_WINDOW_CLOSED);
+   elm_win_autodel_set(win, EINA_TRUE);
+
+   layout = elm_layout_add(win);
+
+   elm_layout_file_set(layout, "edje_animation.edj", "my_layout");
+
+   evas_object_resize(layout, 300, 300);
+   evas_object_show(layout);
+   evas_object_resize(win, 400, 400);
+   evas_object_show(win);
+   elm_run();
+   elm_shutdown();
+   return 0;
+}
+ELM_MAIN()
+</code>
+
+Animations can be run at application startup. By default the Basic EDC UI
+Application model produces an empty window with a title.
+
+In this example an image is added to the window and the behavior of the window title is
+changed.
+
+Add the image to the Edje images collection.
+<code c>
+images
+{
+   image: "image1.png" COMP;
+   image: "image2.png" COMP;
+}
+</code>
+
+Then add an Edje part using the small image: this part has two states. This is
+the first important notion for animations. The ''STATE'' describes the
+appearance of a part: size, position, color, etc.
+
+In this example, the part has two states, default and down-state:
+
+<code c>
+part
+{
+   name: "image1";
+   type: IMAGE;
+   description
+   {
+      state: "default" 0.0;
+      max: 63 63;
+      min: 63 63;
+      image { normal: "image1.png"; }
+      rel1.relative: 0.2 0.0;
+      rel2.relative: 0.0 0.0;
+   }
+
+   description
+   {
+      state: "down-state" 1.0;
+      inherit: "default" 0.0;
+      rel1.relative: 0.2 0.92;
+      rel2.relative: 0.05 1.0;
+   }
+}
+</code>
+
+The logo part has the IMAGE type. The default state contains in the first
+description of the part sets:
+
+  * the maximum and minimum size using the min and max statements
+  * the image to use in this part
+  * the default position.
+
+The second state, ''"down-state"'', inherits all of the default's attributes, and
+only changes the position to put the image at the bottom of the application
+window.
+
+These two states are the start and end states of the animation. To actually
+create the animation, add a program to the Edge ''programs'' collection.
+
+<code c>
+// Icon drop animation
+program
+{
+   name: "animation,state1";
+   source: "";
+   signal: "load";
+   action: STATE_SET "down-state" 1.0;
+   target: "logo";
+   transition: BOUNCE 2.5 0.0 5.0;
+}
+</code>
+
+This program is named ''animation,state1'' and is started when the application
+receives the ''load'' signal immediately on startup. It runs the ''STATE_SET''
+action so it changes the object state from ''"default"'' to ''"down-state"''. The target
+of the program is the image ''part''.
+
+In order to switch from one state to another, it uses a ''transition'' of the
+''BOUNCE'' type with three parameters, the first one is saying how much time
+the transition will last, the second one is the factor of curviness and the
+last one is saying how many times and object will bounce.
+
+This produces an falling and bouncing effect.
+
+Also add an animation for the window title to make it move from the right to
+the left with a bounce effect while growing the font size.
+
+Create a new state on the part called "txt_title" inside which both the font
+size and position are changed.
+
+<code c>
+part
+{
+   name: "txt_title";
+   type: TEXT;
+   mouse_events: 0;
+
+   // The default State
+   description
+   {
+      state: "default" 0.0;
+      align: 0.0 0.0;
+      rel1 { relative: 0.5 0.0; }
+      rel2 { relative: 1.0 0.5; }
+      text
+      {
+        font: "Sans";
+         size: 22;
+          text: "edje animation";
+      }
+      color: 0 0 0 255;
+   }
+
+   // The "Bigger" state
+   description
+   {
+      state: "Bigger" 0.0;
+      align: 0.0 0.0;
+      rel1 { relative: 0.0 0.0; }
+      rel2 { relative: 1.0 0.2; }
+      text
+      {
+         size: 26;
+          text: "animation terminated";
+      }
+      color: 0 0 0 255;
+   }
+}
+</code>
+
+Create a program to animate this part on startup, just like the small image.
+
+<code c>
+// Make the title bigger
+program
+{
+   name: "animation,bigtitle";
+   source: "";
+   signal: "load";
+   action: STATE_SET "Bigger" 1.0;
+   target: "txt_title";
+   transition: LINEAR 5.0;
+}
+</code>
+This program goes from the default state to the bigger state in five seconds
+with a ''LINEAR'' effect, automatically running on the application startup.
+
+\\
+//**__next page__: **//[[/tutorial/effects/edje_animation/on_click|Animating Object on Click]]
+
--- a/pages/tutorial/effects/elementary_animations/blend.txt
+++ b/pages/tutorial/effects/elementary_animations/blend.txt
@ -0,0 +1,53 @@
+~~Title: Elementary Animations - Creating a Blend Transition~~
+//**__previous page__: **//[[/tutorial/effects/elementary_animations/flip|Creating a Flip Effect]]
+=== Elementary Animations ===
+==== Creating a Blend Transition ====
+
+The blend effect also works the same way as the flip, but without the axes or
+direction information.
+
+{{ :elementary_animations_blend.gif }}
+
+Use the back button here as well. To create the blend
+effect button:
+
+<code c>
+// The blend button
+Evas_Object *btn_blend = elm_button_add(win);
+elm_object_text_set(btn_blend, "Blend");
+evas_object_size_hint_weight_set(btn_blend, EVAS_HINT_FILL, EVAS_HINT_FILL);
+evas_object_show(btn_blend);
+evas_object_smart_callback_add(btn_blend, "clicked", _btn_blend_cb, &anim);
+elm_box_pack_end(center_vbox, btn_blend);
+</code>
+
+The blend transition callback is:
+<code c>
+static void _btn_blend_cb(void *data, Evas_Object *btn, void *ev)
+{
+   Animations *anim = (Animations *)data;
+
+   // Setting the button text
+   elm_object_text_set(anim->button, "Blend");
+   _blend_effect(anim->button, anim->buttonbck);
+}
+</code>
+
+Create and start the blend animation. This animation is created by adding it
+to and ''Elm_Transit'' with ''elm_transit_effect_blend_add''. Add two objects,
+as for the flip.
+<code c>
+static void _blend_effect(Evas_Object *obj, Evas_Object *obj2)
+{
+   Elm_Transit *trans;
+
+   trans = elm_transit_add();
+   elm_transit_object_add(trans, obj);
+   elm_transit_object_add(trans, obj2);
+   elm_transit_effect_blend_add(trans);
+   elm_transit_duration_set(trans, 3.0);
+   elm_transit_go(trans);
+}
+</code>
+\\
+//**__next page__: **// [[/tutorial/effects/elementary_animations/fade|Creating a Fade Effect]]
--- a/pages/tutorial/effects/elementary_animations/fade.txt
+++ b/pages/tutorial/effects/elementary_animations/fade.txt
@ -0,0 +1,53 @@
+~~Title: Elementary Animations - Creating a Fade Effect~~
+//**__previous page__: **//[[/tutorial/effects/elementary_animations/blend|Creating a Blend Transition]]
+=== Elementary Animations ===
+==== Creating a Fade Effect ====
+
+The fade effect works exactly the same way as the blend effect.
+
+{{ :elementary_animations_fade.gif }}
+
+First create the button:
+
+<code c>
+   // The fade button
+   Evas_Object *btn_fade = elm_button_add(win);
+   elm_object_text_set(btn_fade, "Fade");
+   evas_object_size_hint_weight_set(btn_fade, EVAS_HINT_FILL, EVAS_HINT_FILL);
+   evas_object_show(btn_fade);
+   evas_object_smart_callback_add(btn_fade, "clicked", _btn_fade_cb, &anim);
+   elm_box_pack_end(right_vbox, btn_fade);
+</code>
+
+Then add the button's callback:
+
+<code c>
+static void _btn_fade_cb(void *data, Evas_Object *btn, void *ev)
+{
+   Animations *anim = (Animations *)data;
+
+
+   // Setting the button text
+   elm_object_text_set(anim->button, "Fade");
+   _fade_effect(anim->button, anim->buttonbck);
+}
+</code>
+
+The animation function calls ''elm_transit_effect_fade_add'' instead of
+''elm_transit_effect_blend_add''.
+
+<code c>
+static void _fade_effect(Evas_Object *obj, Evas_Object *obj2)
+{
+   Elm_Transit *trans;
+
+   trans = elm_transit_add();
+   elm_transit_object_add(trans, obj);
+   elm_transit_object_add(trans, obj2);
+   elm_transit_effect_fade_add(trans);
+   elm_transit_duration_set(trans, 3.0);
+   elm_transit_go(trans);
+}
+</code>
+\\
+//**__next page__: **//[[/tutorial/effects/elementary_animations/flipy|Creating a Flip on y Axis]]
--- a/pages/tutorial/effects/elementary_animations/flip.txt
+++ b/pages/tutorial/effects/elementary_animations/flip.txt
@ -0,0 +1,61 @@
+~~Title: Elementary Animations - Creating a Zoom Effect~~
+//**__previous page__: **//[[/tutorial/effects/elementary_animations/zoom|Creating a Zoom Effect]]
+=== Elementary Animations ===
+==== Creating a Flip Effect ====
+
+This effect is applied to a pair of objects, in the order they are added, to
+the ''Elm_Transit'' transition. In this example, add the animation target
+button and the button called ''buttonbck'' which represents the back of the target
+button.
+
+{{ :elementary_animations_flip.gif }}
+
+Create the action button for the flip effect:
+
+<code c>
+// The flip button
+Evas_Object *btn_flip = elm_button_add(win);
+elm_object_text_set(btn_flip, "Flip x");
+evas_object_size_hint_weight_set(btn_flip, EVAS_HINT_FILL, EVAS_HINT_FILL);
+evas_object_show(btn_flip);
+evas_object_smart_callback_add(btn_flip, "clicked", _btn_flip_cb, &anim);
+elm_box_pack_end(left_vbox, btn_flip);
+</code>
+
+The corresponding callback to create and start the animation with the two
+objects (target button and back button) to animate is like follows.
+
+<code c>
+static void
+_btn_flip_cb(void *data, Evas_Object *btn, void *ev)
+{
+   Animations *anim = (Animations *)data;
+
+   // Setting the button text
+   elm_object_text_set(anim->button, "Flip");
+   _flip_effect(anim->button, anim->buttonbck);
+}
+</code>
+
+Create the function which runs the animation. This flip animation is created
+using ''elm_transit_effect_flip_add''. The second parameter is the axis of the
+flip: in this example it is the X axis, so the button flips down to top to
+show the back button. The last parameter is the flip direction: ''EINA_TRUE''
+means clockwise.
+
+<code c>
+_flip_effect(Evas_Object *obj, Evas_Object *obj2)
+{
+   Elm_Transit *trans;
+
+   trans = elm_transit_add();
+   elm_transit_object_add(trans, obj);
+   elm_transit_object_add(trans, obj2);
+   elm_transit_effect_flip_add(trans, ELM_TRANSIT_EFFECT_FLIP_AXIS_X, EINA_TRUE);
+
+   elm_transit_duration_set(trans, 3.0);
+   elm_transit_go(trans);
+}
+</code>
+\\
+//**__next page__: **//[[/tutorial/effects/elementary_animations/blend|Creating a Blend Transition]]
--- a/pages/tutorial/effects/elementary_animations/flipy.txt
+++ b/pages/tutorial/effects/elementary_animations/flipy.txt
@ -0,0 +1,52 @@
+~~Title: Elementary Animations - Creating a Flip on y Axis~~
+//**__previous page__: **//[[/tutorial/effects/elementary_animations/fade|Creating a Fade Effect]]
+=== Elementary Animations ===
+==== Creating a Flip on y Axis ====
+
+This is same as the flip transition, but on y axis.
+
+{{ :elementary_animations_flipy.gif }}
+
+To create a flip on y axis:
+
+<code c>
+// The flip y button
+Evas_Object *btn_flip_y = elm_button_add(win);
+elm_object_text_set(btn_flip_y, "Flip y");
+evas_object_size_hint_weight_set(btn_flip_y, EVAS_HINT_FILL, EVAS_HINT_FILL);
+evas_object_show(btn_flip_y);
+evas_object_smart_callback_add(btn_flip_y, "clicked", _btn_flip_y_cb, &anim);
+elm_box_pack_end(left_vbox, btn_flip_y);
+</code>
+
+The flip on y button callback looks like:
+<code c>
+static void
+_btn_flip_y_cb(void *data, Evas_Object *btn, void *ev)
+{
+   Animations *anim = (Animations *)data;
+
+
+   // Setting the button text
+   elm_object_text_set(anim->button, "Flip 2");
+   _flip_y_effect(anim->button, anim->buttonbck);
+}
+</code>
+
+The animation function:
+<code c>
+static void
+_flip_y_effect(Evas_Object *obj, Evas_Object *obj2)
+{
+  Elm_Transit *trans;
+
+   trans = elm_transit_add();
+   elm_transit_object_add(trans, obj);
+   elm_transit_object_add(trans, obj2);
+   elm_transit_effect_flip_add(trans, ELM_TRANSIT_EFFECT_FLIP_AXIS_Y, EINA_TRUE);
+   elm_transit_duration_set(trans, 3.0);
+   elm_transit_go(trans);
+}
+</code>
+\\
+//**__next page__: **//[[/tutorial/effects/elementary_animations/wipe|Creating a Wipe Effect]]
--- a/pages/tutorial/effects/elementary_animations/rotation.txt
+++ b/pages/tutorial/effects/elementary_animations/rotation.txt
@ -0,0 +1,62 @@
+~~Title: Elementary Animations - Creating a Rotation Effect~~
+//**__previous page__: **//[[/tutorial/effects/elementary_animations/setting_up|Setting Up the Application]]
+=== Elementary Animations ===
+==== Creating a Rotation Effect ====
+
+This effect rotates the animation target button with an angle of 360°. A
+pointer to this angle is stored in the application data as ''anim->rt_angle''.
+
+{{ :elementary_animations_rotate.gif }}
+
+Create the button and add it to the center column.
+
+<code c>
+// The rotation button
+Evas_Object *btn_rotate = elm_button_add(win);
+elm_object_text_set(btn_rotate, "Rotate");
+evas_object_size_hint_weight_set(btn_rotate, EVAS_HINT_FILL, EVAS_HINT_FILL);
+evas_object_show(btn_rotate);
+evas_object_smart_callback_add(btn_rotate, "clicked", _btn_rotate_cb, &anim);
+elm_box_pack_end(center_vbox, btn_rotate);
+</code>
+
+In the rotate button callback, call the effect function with the target button
+as first parameter and the rotation angle as the second one.
+
+<code c>
+static void
+_btn_rotate_cb(void *data, Evas_Object *btn, void *ev)
+{
+   Animations *anim = (Animations *)data;
+
+   // Setting the button text
+   elm_object_text_set(anim->button, "Rotate");
+   _rotation_effect(anim->button, *(anim->rt_angle));
+}
+</code>
+
+The animation function rotates the animation target by adding a rotation
+effect with ''elm_transit_effect_rotation_add''. This function takes three
+parameters:
+
+    * ''Elm_Transit''
+    * the rotation position at which the effect begins
+    * the rotation position at which the effect ends
+
+Rotation starts at 0° to finish at 360°. The animation lasts two seconds.
+
+<code c>
+static void
+_rotation_effect(Evas_Object *obj, float angle)
+{
+   Elm_Transit *trans = elm_transit_add();
+   elm_transit_object_add(trans, obj);
+
+   // rotates the object from its original angle to given degrees to the right
+   elm_transit_effect_rotation_add(trans, 0.0, angle);
+   elm_transit_duration_set(trans, 2.0);
+   elm_transit_go(trans);
+}
+</code>
+\\
+//**__next page__: **//[[/tutorial/effects/elementary_animations/zoom|Creating a Zoom Effect]]
--- a/pages/tutorial/effects/elementary_animations/setting_up.txt
+++ b/pages/tutorial/effects/elementary_animations/setting_up.txt
@ -0,0 +1,255 @@
+~~Title: Elementary Animations - Setting Up the Application~~
+=== Elementary Animations ===
+==== Setting Up the Application ====
+
+ In this example, one single object is animated with different type of
+animations.
+
+Create the structure of our animation represented by a struct named
+''Animations''.
+
+<code c>
+typedef struct _Animations{
+    Evas_Object *button;
+    Evas_Object *buttonbck;
+    float *rt_angle;
+    float *zto;
+    float *zfrom;
+} Animations;
+</code>
+
+Then create a basic application with the widgets we need:
+<code c>
+EAPI_MAIN int
+elm_main(int argc, char **argv)
+{
+   Evas_Object *win, *label, *hbox, *left_vbox, *center_vbox, *right_vbox;
+   Evas_Object *button, *buttonbck;
+   float rt_angle, zto, zfrom;
+
+   win = elm_win_util_standard_add("Elementary Animations", "Elementary Animations Tutorial");
+   elm_policy_set(ELM_POLICY_QUIT, ELM_POLICY_QUIT_LAST_WINDOW_CLOSED);
+   elm_win_autodel_set(win, EINA_TRUE);
+   if (elm_win_wm_rotation_supported_get(win))
+     {
+        int rots[4] = { 0, 90, 180, 270 };
+        elm_win_wm_rotation_available_rotations_set(win, (const int *)(&rots), 4);
+     }
+
+   //here will come the animation code
+
+   evas_object_resize(win, 400, 400);
+   evas_object_show(win);
+   elm_run();
+   elm_shutdown();
+   return 0;
+}
+ELM_MAIN()
+
+</code>
+
+Here the main widgets of the application:
+
+    * ''win'': the main window
+    * ''label'': the title label
+    * ''button'': a button object, the target of the animations
+    * ''buttonbck'': a button representing the back of the target button
+    * ''left_vbox'': a vertical box to place the first buttons column
+    * ''center_vbox'': a vertical box to store the second buttons column
+    * ''right_vbox'': a vertical box to store the last buttons column
+    * ''hbox'': a horizontal box to store the vertical boxes
+    * ''rt_angle'', ''zto'', ''zfrom'': these variables are used to store values for animations
+
+Place the widgets on the application's canvas, first create widgets on the
+main window:
+
+Set up the needed values like the rotation angle, the original zoom value
+(''zfrom''), and the destination zoom value (''zto'').
+
+<code c>
+//set the values for animations
+rt_angle = 360.0;
+zfrom = 1.0;
+zto = 2.0;
+</code>
+
+Add a label title to the main window, then create the animation target button
+and the back button.
+
+<code c>
+/* Label*/
+label = elm_label_add(win);
+elm_object_text_set(label, "Effects Tutorial");
+evas_object_size_hint_weight_set(label, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+evas_object_move(label, 100, 0);
+evas_object_resize(label, 200, 50);
+evas_object_show(label);
+
+/* Creation a button in the app window*/
+button = elm_button_add(win);
+evas_object_move(button, 100, 100);      // Moving the button to x=50 y=100
+evas_object_resize(button, 200, 50);    // Resizing the button 100x50
+evas_object_show(button);               // Showing the button
+/* Creation a back button in the app window*/
+buttonbck = elm_button_add(win);
+elm_object_text_set(buttonbck, "Button back");
+evas_object_move(buttonbck, 100, 100);
+evas_object_resize(buttonbck, 200, 50);
+
+/*set the structure of pointeurs*/
+Animations anim = { button, buttonbck, &rt_angle, &zto, &zfrom };
+</code>
+
+Now you can create boxes to add a set of buttons to them that starts
+animations on the target.
+
+Create the structure of the box of buttons with three columns (vertical boxes)
+and one horizontal for the main container.
+
+<code c>
+// Creation of the main container box
+hbox = elm_box_add(win);
+elm_box_horizontal_set(hbox, EINA_TRUE);
+elm_box_homogeneous_set(hbox, EINA_TRUE);
+evas_object_move(hbox, 130, 200);
+evas_object_show(hbox);
+
+// Creation of the first column
+left_vbox = elm_box_add(hbox);
+elm_box_horizontal_set(left_vbox, EINA_FALSE);
+elm_box_homogeneous_set(left_vbox, EINA_TRUE);
+evas_object_show(left_vbox);
+elm_box_pack_start(hbox, left_vbox);
+
+// Creation of the second column
+center_vbox = elm_box_add(hbox);
+elm_box_horizontal_set(center_vbox, EINA_FALSE);
+elm_box_homogeneous_set(center_vbox, EINA_TRUE);
+evas_object_show(center_vbox);
+elm_box_pack_end(hbox, center_vbox);
+
+// Creation of the last column
+right_vbox = elm_box_add(hbox);
+elm_box_horizontal_set(right_vbox, EINA_FALSE);
+elm_box_homogeneous_set(right_vbox, EINA_TRUE);
+evas_object_show(right_vbox);
+elm_box_pack_end(hbox, right_vbox);
+</code>
+
+Then create the first action button for the resize effect.
+
+<code c>
+// The resize button
+Evas_Object *btn_resize = elm_button_add(win);
+elm_object_text_set(btn_resize, "Resize");                                      // Setting the button text
+evas_object_size_hint_weight_set(btn_resize, EVAS_HINT_FILL, EVAS_HINT_FILL);   // Setting the hint weight policy
+evas_object_show(btn_resize);                                                   // Showing the button
+evas_object_smart_callback_add(btn_resize, "clicked", _btn_resize_cb, &anim);   // Setting the "clicked" callback
+elm_box_pack_end(left_vbox, btn_resize);                                        // Adding the button to the first column
+</code>
+
+''evas_object_smart_callback_add'' defines the callback function that is to be
+called when the button is clicked. In this example, set a ''_btn_resize_cb''
+function and pass the application data ''anim'' to this callback function.
+
+The callback by itself only sets a new text for the animation target button,
+and calls a function which will actually animate the button.
+
+<code c>
+static void
+_btn_resize_cb(void *data, Evas_Object *btn, void *ev)
+{
+   Animations *anim = (Animations *)data;
+
+   // Starting the rotation effect 360 degrees
+   //evas_object_resize(button, 100, 50);
+   elm_object_text_set(anim->button, "Resize");
+   _resize_effect(anim->button);
+}
+</code>
+
+This function is an ''evas_object_smart_callback'' and thus needs to have its
+specific prototype: it does not return anything and receives three parameters:
+
+    * ''data'': data to be passed
+    * ''btn'': the object the callback is being called about
+    * ''ev'': the actual event, seldom used
+
+In this case, use ''data'' to pass the application data to the callback. However,
+the parameter's type is ''void *'' and not ''Animation *''. Initialize a variable of
+the correct type with the pointer.
+
+<code c>
+Animation * anim = (Animation *)data;
+</code>
+
+Then use the application data in the callback function. At this point create
+the animation directly in the callback function, but it is more
+straightforward to encapsulate the animation process into a dedicated
+function. ''_resize_effect'' implements the animation code:
+
+<code c>
+static void
+_resize_effect(Evas_Object *obj)
+{
+   // Elementary Transition declaration and creation
+   Elm_Transit *trans = elm_transit_add();
+
+   // Adding the transition target object
+   elm_transit_object_add(trans, obj);
+
+   // Setting the resize effect
+   elm_transit_effect_resizing_add(trans, 100, 50, 300, 150);
+
+   // Setting the transition duration
+   elm_transit_duration_set(trans, 3.0);
+
+   // Starting the transition
+   elm_transit_go(trans);
+}
+</code>
+
+Create an ''Elm_Transit *'' object representing the transition.
+
+<code c>
+Elm_Transit *trans = elm_transit_add();
+</code>
+
+Then add the target object to the transition
+
+<code c>
+elm_transit_object_add(trans, obj);
+</code>
+
+Add a resizing transition to the object with the origin and destination width
+and height in pixels.
+
+<code c>
+elm_transit_effect_resizing_add(trans, 100, 50, 300, 150);
+</code>
+
+100 and 50 are respectively the object's width and height when the effect
+begins, whereas 300 and 150 are respectively the object's width and height
+when the effect ends: the object grows from 100×50 to 300×150.
+
+After that set the transition duration with ''elm_transit_duration_set''.
+
+<code c>
+elm_transit_duration_set(trans, 3.0);
+</code>
+
+The animation lasts three seconds. The duration parameter is a double.
+
+Now start the animation by calling ''elm_transit_go'' with the ''Elm_Transit'' object.
+
+<code c>
+elm_transit_go(trans);
+</code>
+
+When the resize button is clicked, the animation target button grows.
+
+All the action buttons are created exactly the same way as the resize button,
+with a callback and an animation function.
+
+\\
+//**__next page__: **//[[/tutorial/effects/elementary_animations/rotation|Creating a Rotation Effect]]
--- a/pages/tutorial/effects/elementary_animations/transit.txt
+++ b/pages/tutorial/effects/elementary_animations/transit.txt
@ -0,0 +1,362 @@
+~~Title: Elementary Animations - Transit~~
+//**__previous page__: **//[[/tutorial/effects/elementary_animations/wipe|Creating a Wipe Effect]]
+=== Elementary Animations ===
+==== Transit: Implementing Elementary Transit Effects ====
+
+This tutorial demonstrates how you can implement a variety of EFL animation effects using
+the Transit API available in the Elementary library.
+
+=== Initializing the Application Layout ===
+
+The application uses widgets, such as elm_naviframe for
+view management, layout classes, such as elm_list for the composition of the
+screen.
+
+The transit is designed to apply various animated transition effects to the
+Evas_Object. The following transition effects are supported in EFL and
+Elementary applications.
+
+  * Blend
+  * Color
+  * Fade
+  * Flip
+  * Rotation
+  * Transition
+  * Wipe
+  * Zoom
+
+The application layout is created by adding two naviframes in order to switch
+from one to another in transitions. Two lists are respectively added to the
+two naviframes.
+
+<code c>
+EAPI_MAIN int
+elm_main(int argc, char **argv)
+{
+   Evas_Object *navi, *navi2, *list, *list2;
+
+   win = elm_win_util_standard_add("Elementary Animations", "Elementary Animations Tutorial");
+   elm_policy_set(ELM_POLICY_QUIT, ELM_POLICY_QUIT_LAST_WINDOW_CLOSED);
+   elm_win_autodel_set(win, EINA_TRUE);
+   if (elm_win_wm_rotation_supported_get(win))
+     {
+        int rots[4] = { 0, 90, 180, 270 };
+        elm_win_wm_rotation_available_rotations_set(win, (const int *)(&rots), 4);
+     }
+
+   Elm_Object_Item *nf_it, *nf_it2;
+
+   /* add two naviframes and two lists to switch
+    * from one to another in some transitions */
+   navi2 = elm_naviframe_add(win);
+   navi = elm_naviframe_add(win);
+   list = elm_list_add(navi);
+   list2 = elm_list_add(navi2);
+   elm_list_mode_set(list, ELM_LIST_COMPRESS);
+   elm_list_mode_set(list2, ELM_LIST_COMPRESS);
+
+   /* store naviframe pointeurs to pass them
+    * in data pointeur parameter */
+   Navi navis = {navi, navi2};
+   Navi navis2 = {navi2, navi};
+
+   /* first list items */
+   elm_list_item_append(list, "Blend", NULL, NULL, blend_cb, &navis);
+   elm_list_item_append(list, "Color", NULL, NULL, color_cb, &navis);
+   elm_list_item_append(list, "Fade", NULL, NULL, fade_cb, &navis);
+   elm_list_item_append(list, "Flip", NULL, NULL, flip_cb, &navis);
+   elm_list_item_append(list, "Rotation", NULL, NULL, rotation_cb, &navis);
+   elm_list_item_append(list, "ResizableFlip", NULL, NULL, resizable_flip_cb, &navis);
+   elm_list_item_append(list, "Translation", NULL, NULL, translation_cb, &navis);
+   elm_list_item_append(list, "Wipe", NULL, NULL, wipe_cb, &navis);
+   elm_list_item_append(list, "Zoom", NULL, NULL, zoom_cb, &navis);
+   elm_list_item_append(list, "Custom", NULL, NULL, custom_cb, &navis);
+   elm_list_go(list);
+
+   /* second list items*/
+   elm_list_item_append(list2, "Blend2", NULL, NULL, blend_cb, &navis2);
+   elm_list_item_append(list2, "Color2", NULL, NULL, color_cb, &navis2);
+   elm_list_item_append(list2, "Fade2", NULL, NULL, fade_cb, &navis2);
+   elm_list_item_append(list2, "Flip2", NULL, NULL, flip_cb, &navis2);
+   elm_list_item_append(list2, "Rotation2", NULL, NULL, rotation_cb, &navis2);
+   elm_list_item_append(list2, "ResizableFlip2", NULL, NULL, resizable_flip_cb, &navis2);
+   elm_list_item_append(list2, "Translation2", NULL, NULL, translation_cb, &navis2);
+   elm_list_item_append(list2, "Wipe2", NULL, NULL, wipe_cb, &navis2);
+   elm_list_item_append(list2, "Zoom2", NULL, NULL, zoom_cb, &navis2);
+   elm_list_item_append(list2, "Custom2", NULL, NULL, custom_cb, &navis2);
+   elm_list_go(list2);
+
+   nf_it = elm_naviframe_item_push(navi, "Transit", NULL, NULL, list, NULL);
+   nf_it2 = elm_naviframe_item_push(navi2, "Transit2", NULL, NULL, list2, NULL);
+
+   evas_object_show(navi);
+   evas_object_show(navi2);
+   evas_object_show(list);
+   evas_object_show(list2);
+   evas_object_resize(navi2, 400, 400);
+   evas_object_resize(navi, 400, 400);
+   evas_object_resize(win, 400, 400);
+   evas_object_show(win);
+   elm_run();
+   elm_shutdown();
+   return 0;
+}
+ELM_MAIN()
+</code>
+
+The Navi structure is used to store the naviframe pointeurs in order to pass
+them in data pointeur as a parameter in callback functions.
+
+<code c>
+/* store naviframe pointeurs */
+typedef struct _Navi
+{
+   Evas_Object *navi;
+   Evas_Object *navi2;
+} Navi;
+</code>
+
+Next the transition effects will be described, there are two kind of transit
+effects, one when the effect applies on one object, the other one when the
+effect is a transition between two objects.
+
+=== Implementing the Rotation Effect ===
+
+{{ :transit_rotate.gif }}
+
+To implement the rotation effect:
+  - Use the ''elm_transit'' object with the ''elm_transit_add()'' function to add the transit effect.
+  - Set the target object with ''elm_transit_object_add()'' function.
+  - Set the effect rotation indication the rotation amount with ''elm_transit_effect_rotation_add()'' function.
+  - Set the transit duration with ''elm_transit_duration_set()''
+  - To start the transit animation, use the ''elm_transit_go()'' function.
+
+<code c>
+static void
+rotation_cb(void *data, Evas_Object *obj, void *event_info)
+{
+   Navi *navis = data;
+   Evas_Object *navi=navis->navi;
+   Elm_Transit *transit = elm_transit_add();
+
+   // 360 degree rotation effect in the clock-wise direction
+   elm_transit_object_add(transit, navi);
+   elm_transit_effect_rotation_add(transit, 0, 360);
+   elm_transit_duration_set(transit, 1);
+   elm_transit_go(transit);
+}
+</code>
+
+For the transition with one effect, it will be very similar to this one so it
+will be not detailed excepted particular callbacks as the next one for the
+zoom effect.
+
+=== Implementing the Zoom Effect ===
+
+{{ :transit_zoom.gif }}
+
+For the zoom effect, two transitions are set, one for zooming in the other one
+for zooming out.
+
+The ''elm_transit_chain_transit_add()'' function allows to chain the
+transitions:
+
+<code c>
+static void
+zoom_cb(void *data, Evas_Object *obj, void *event_info)
+{
+   Navi *navis = data;
+   Evas_Object *navi=navis->navi;
+   // Zoom out to scale 0.6
+   Elm_Transit *transit = elm_transit_add();
+   elm_transit_smooth_set(transit, EINA_FALSE);
+   elm_transit_object_add(transit, navi);
+   elm_transit_effect_zoom_add(transit, 1.0, 0.4);
+   elm_transit_duration_set(transit, 0.5);
+
+   // Zoom in to the original size
+   Elm_Transit *transit2 = elm_transit_add();
+   elm_transit_smooth_set(transit2, EINA_FALSE);
+   elm_transit_object_add(transit2, navi);
+   elm_transit_effect_zoom_add(transit2, 0.4, 1.0);
+   elm_transit_duration_set(transit2, 0.5);
+
+   elm_transit_chain_transit_add(transit, transit2);
+   elm_transit_go(transit);
+}
+</code>
+
+=== Implementing the Wipe Effect ===
+
+{{ :transit_wipe.gif }}
+
+Similarly to the rotation effect but with the ''elm_transit_effect_wipe_add()''
+function by indicating the wipe type and the wiping direction.
+
+<code c>
+static void
+wipe_cb(void *data, Evas_Object *obj, void *event_info)
+{
+   Navi *navis = data;
+   Evas_Object *navi=navis->navi;
+   Elm_Transit *transit = elm_transit_add();
+
+   elm_transit_object_add(transit, navi);
+   elm_transit_effect_wipe_add(transit, ELM_TRANSIT_EFFECT_WIPE_TYPE_HIDE, ELM_TRANSIT_EFFECT_WIPE_DIR_RIGHT);
+   elm_transit_duration_set(transit, 3.0);
+   elm_transit_go(transit);
+}
+</code>
+
+=== Implementing the Translation Effect ===
+
+{{ :transit_translation.gif }}
+
+Similarly to the rotation effect but with the ''elm_transit_effect_translation_add()''
+function by indicating the position when effect begins and end.
+
+<code c>
+static void
+translation_cb(void *data, Evas_Object *obj, void *event_info)
+{
+   Navi *navis = data;
+   Evas_Object *navi=navis->navi;
+   Elm_Transit *transit = elm_transit_add();
+
+   elm_transit_object_add(transit, navi);
+   elm_transit_effect_translation_add(transit, 0, 0, 50, 100);
+   elm_transit_duration_set(transit, 3.0);
+   elm_transit_go(transit);
+}
+</code>
+
+=== Implementing the Color Effect ===
+
+{{ :transit_color.gif }}
+
+Similarly to the rotation effect but with the ''elm_transit_effect_color_add()''
+function by indicating the RGBA color when effect begins and end.
+
+<code c>
+static void
+color_cb(void *data, Evas_Object *obj, void *event_info)
+{
+   Navi *navis = data;
+   Evas_Object *navi=navis->navi;
+   Elm_Transit *transit = elm_transit_add();
+
+   elm_transit_object_add(transit, navi);
+   elm_transit_effect_color_add(transit,0,0,0,0,255,255,0,255);
+   elm_transit_duration_set(transit, 3.0);
+   elm_transit_go(transit);
+}
+</code>
+
+=== Implementing the Blend Effect ===
+
+{{ :blend.gif }}
+
+This time, the blend effect is a transition between the two naviframes. So,
+the two naviframes are added to the ''Elm_transit''. Moreover, the
+''elm_transit_objects_final_state_keep_set()'' function allows to set the
+state of the final state of the transition (it could be used for the precedent
+effects too):
+
+<code c>
+static void
+blend_cb(void *data, Evas_Object *obj, void *event_info)
+{
+   Navi *navis = data;
+   Evas_Object *navi=navis->navi;
+   Evas_Object *navi2=navis->navi2;
+   Elm_Transit *transit = elm_transit_add();
+
+   elm_transit_object_add(transit, navi);
+   elm_transit_object_add(transit, navi2);
+   elm_transit_effect_blend_add(transit);
+   elm_transit_duration_set(transit, 3.0);
+   elm_transit_objects_final_state_keep_set(transit, EINA_TRUE);
+   elm_transit_go(transit);
+
+}
+</code>
+
+
+=== Implementing the Fade Effect ===
+
+{{ :transit_fade.gif }}
+
+Similarly to the blend effect but with the ''elm_transit_effect_fade_add()'':
+
+<code c>
+static void
+fade_cb(void *data, Evas_Object *obj, void *event_info)
+{
+   Navi *navis = data;
+   Evas_Object *navi=navis->navi;
+   Evas_Object *navi2=navis->navi2;
+   Elm_Transit *transit = elm_transit_add();
+
+   elm_transit_object_add(transit, navi);
+   elm_transit_object_add(transit, navi2);
+   elm_transit_effect_fade_add(transit);
+   elm_transit_duration_set(transit, 3.0);
+   elm_transit_objects_final_state_keep_set(transit, EINA_TRUE);
+   elm_transit_go(transit);
+
+}
+</code>
+
+=== Implementing the Flip Effect ===
+
+{{ :transit_flip.gif }}
+
+Similarly to the blend effect but with the ''elm_transit_effect_flip_add()''
+by indicating the flipping axis and the flipping direction (''EINA_TRUE'' is
+clock-wise):
+
+<code c>
+static void
+flip_cb(void *data, Evas_Object *obj, void *event_info)
+{
+   Navi *navis = data;
+   Evas_Object *navi=navis->navi;
+   Evas_Object *navi2=navis->navi2;
+   Elm_Transit *transit = elm_transit_add();
+
+   elm_transit_object_add(transit, navi);
+   elm_transit_object_add(transit, navi2);
+   elm_transit_effect_flip_add(transit, ELM_TRANSIT_EFFECT_FLIP_AXIS_X, EINA_TRUE);
+   elm_transit_duration_set(transit, 3.0);
+   elm_transit_objects_final_state_keep_set(transit, EINA_TRUE);
+   elm_transit_go(transit);
+}
+</code>
+
+=== Implementing the Resizable Flip Effect ===
+
+{{ :transit_resizeflip.gif }}
+
+Similarly to the blend effect but with the ''elm_transit_effect_flip_add()''
+by indicating the flipping axis and the flipping direction (''EINA_TRUE'' is
+clock-wise):
+
+<code c>
+static void
+resizable_flip_cb(void *data, Evas_Object *obj, void *event_info)
+{
+   Navi *navis = data;
+   Evas_Object *navi=navis->navi;
+   Evas_Object *navi2=navis->navi2;
+   Elm_Transit *transit = elm_transit_add();
+
+   elm_transit_object_add(transit, navi);
+   elm_transit_object_add(transit, navi2);
+   elm_transit_effect_resizable_flip_add(transit, ELM_TRANSIT_EFFECT_FLIP_AXIS_Y, EINA_TRUE);
+   elm_transit_duration_set(transit, 3.0);
+   elm_transit_objects_final_state_keep_set(transit, EINA_TRUE);
+   elm_transit_go(transit);
+}
+</code>
+\\
+//**__The whole code__: **//{{code_c/tutorial/effects/transit.c}}
--- a/pages/tutorial/effects/elementary_animations/wipe.txt
+++ b/pages/tutorial/effects/elementary_animations/wipe.txt
@ -0,0 +1,61 @@
+~~Title: Elementary Animations - Creating a Wipe Effect~~
+//**__previous page__: **//[[/tutorial/effects/elementary_animations/flipy|Creating a Flip on y Axis]]
+=== Elementary Animations ===
+==== Creating a Wipe Effect ====
+
+The wipe transition is applied on an Evas object considering the wipe type and
+the direction. Use ''ELM_TRANSIT_EFFECT_WIPE_TYPE_HIDE'' to hide the button,
+and ''ELM_TRANSIT_EFFECT_WIPE_DIR_RIGHT'' to do it from left to right.
+
+{{ :elementary_animations_wipe.gif }}
+
+The wipe animation button is as follows:
+
+<code c>
+// The wipe button
+Evas_Object *btn_wipe = elm_button_add(win);
+elm_object_text_set(btn_wipe, "Wipe");
+evas_object_size_hint_weight_set(btn_wipe, EVAS_HINT_FILL, EVAS_HINT_FILL);
+evas_object_show(btn_wipe);
+evas_object_smart_callback_add(btn_wipe, "clicked", _btn_wipe_cb, &anim);
+elm_box_pack_end(right_vbox, btn_wipe);
+</code>
+
+The wipe button callback looks like:
+
+<code c>
+static void
+_btn_wipe_cb(void *data, Evas_Object *btn, void *ev)
+{
+   Animations *anim = (Animations *)data;
+
+   // Starting the rotation effect 360 degrees
+   //evas_object_resize(anim->button, 100, 50);
+   // Setting the button text
+   elm_object_text_set(anim->button, "Wipe");
+   _wipe_effect(anim->button);
+}
+</code>
+
+The animation function calls ''elm_transit_effect_wipe_add'' with
+''ELM_TRANSIT_EFFECT_WIPE_TYPE_HIDE'' as the second parameter to hide the button
+and ''ELM_TRANSIT_EFFECT_WIPE_DIR_RIGHT'' as last parameter to set the direction
+(left to right).
+
+<code c>
+static void
+_wipe_effect(Evas_Object *obj)
+{
+   Elm_Transit *trans;
+
+   trans = elm_transit_add();
+   elm_transit_object_add(trans, obj);
+   elm_transit_effect_wipe_add(trans, ELM_TRANSIT_EFFECT_WIPE_TYPE_HIDE, ELM_TRANSIT_EFFECT_WIPE_DIR_RIGHT);
+   elm_transit_duration_set(trans, 3.0);
+   elm_transit_go(trans);
+}
+</code>
+\\
+//**__The whole code__: **//{{code_c/tutorial/effects/elementary_animations.c}}
+\\
+//**__next page__: **//[[/tutorial/effects/elementary_animations/transit|Implementing Elementary Transit Effects]]
--- a/pages/tutorial/effects/elementary_animations/zoom.txt
+++ b/pages/tutorial/effects/elementary_animations/zoom.txt
@ -0,0 +1,54 @@
+~~Title: Elementary Animations - Creating a Zoom Effect~~
+//**__previous page__: **//[[/tutorial/effects/elementary_animations/rotation|Creating a Rotation Effect]]
+=== Elementary Animations ===
+==== Creating a Zoom Effect ====
+
+The zoom effect zooms on the animation target to make it twice bigger. Store
+the source rate and the destination rate in the application data using
+''anim->zfrom'' and ''anim->zto''.
+
+{{ :elementary_animations_zoom.gif }}
+
+Create the button and add it to the center column.
+
+<code c>
+// The zoom button
+Evas_Object *btn_zoom = elm_button_add(win);
+elm_object_text_set(btn_zoom, "Zoom");
+evas_object_size_hint_weight_set(btn_zoom, EVAS_HINT_FILL, EVAS_HINT_FILL);
+evas_object_show(btn_zoom);
+evas_object_smart_callback_add(btn_zoom, "clicked", _btn_zoom_cb, &anim);
+elm_box_pack_end(right_vbox, btn_zoom);
+</code>
+
+Then add a callback function in order to perform the animation.
+<code c>
+static void _btn_zoom_cb(void *data, Evas_Object *btn, void *ev)
+{
+   Animations *anim = (Animations *)data;
+
+   // Starting the rotation effect 360 degrees
+   //evas_object_resize(anim->button, 100, 50);
+   elm_object_text_set(anim->button, "Zoom");
+   _zoom_effect(anim->button, *(anim->zfrom), *(anim->zto));
+}
+</code>
+
+To create the zoom effect, use ''elm_transit_effect_zoom_add'' with the start
+rate and the destination rate stored in application data (''anim->zfrom'' and
+''anim->zto'')
+
+<code c>
+static void
+_zoom_effect(Evas_Object *obj, float from, float to)
+{
+   Elm_Transit *trans = elm_transit_add();
+   elm_transit_object_add(trans, obj);
+
+   elm_transit_effect_zoom_add(trans, from, to);
+   elm_transit_duration_set(trans, 2.0);
+   elm_transit_go(trans);
+}
+</code>
+\\
+//**__next page__: **//[[/tutorial/effects/elementary_animations/flip|Creating a Flip Effect]]
--- a/pages/tutorial/effects_tutorial.txt
+++ b/pages/tutorial/effects_tutorial.txt
@ -0,0 +1,68 @@
+~~Title: Animation and Effect Types~~
+==== Animation and Effect Types: Using Various Effect and Effect Types ====
+
+The animation and effect tutorials demonstrate how to create and implement a
+variety of animation effects with EFL and Elementary.
+
+----
+==== Ecore Animator: Creating Ecore Animations ====
+
+This tutorial demonstrates how you can use Ecore animators to simplify the
+creation of animations. Using Ecore animators, you can manually create your
+own animations by changing and manipulating Evas object attributes. Ecore
+animators work like timers, running callback functions over a given duration
+(an animation timeline).
+
+=== Table of Contents ===
+
+  * [[/tutorial/effects/ecore_animator/setting_up|Setting up the application]]
+  * [[/tutorial/effects/ecore_animator/rotation|Creating a rotation effect]]
+  * [[/tutorial/effects/ecore_animator/zoom|Creating a zoom effect]]
+  * [[/tutorial/effects/ecore_animator/3d_rotation|Creating a 3D rotation effect]]
+  * [[/tutorial/effects/ecore_animator/drop_bounce|Creating drop and bounce effects]]
+
+Ecore Animator Example : {{ :ecore_animator.gif }}
+\\
+//**__The Whole Code__: **//{{code_c/tutorial/effects/ecore_animator.c}}
+
+----
+==== Edje Animation: Using the Edje Library to Create Animations ====
+
+One of the greatest strengths of EFL and Edje is the ability to create
+animations. This tutorial demonstrates how to use the Edje library to create
+your own animations.
+
+=== Table of Contents ===
+
+  * [[/tutorial/effects/edje_animation/start_up|Animating on Application Start-up]]
+  * [[/tutorial/effects/edje_animation/on_click|Animating Object on Click]]
+
+{{ :edje_animation_rotate.gif }}
+\\
+//**__The Whole Code__:
+**//{{code_c/tutorial/effects/edje_animation.c}} {{code_c/tutorial/effects/edje_animation.edc}}
+
+
+----
+==== Elementary Animations: Applying Transition Effects to an Evas Object ====
+
+This tutorial demonstrates how you can use Elm Transit to create animated
+transitions effects, such as rotation, wiping, zooming, resizing, and fading,
+to an ''Evas_Object''.
+
+=== Table of Contents ===
+
+  * [[/tutorial/effects/elementary_animations/setting_up|Setting Up the Application]]
+  * [[/tutorial/effects/elementary_animations/rotation|Creating a Rotation Effect]]
+  * [[/tutorial/effects/elementary_animations/zoom|Creating a Zoom Effect]]
+  * [[/tutorial/effects/elementary_animations/flip|Creating a Flip Effect]]
+  * [[/tutorial/effects/elementary_animations/blend|Creating a Blend Transition]]
+  * [[/tutorial/effects/elementary_animations/fade|Creating a Fade Effect]]
+  * [[/tutorial/effects/elementary_animations/flipy|Creating a Flip on y Axis]]
+  * [[/tutorial/effects/elementary_animations/wipe|Creating a Wipe Effect]]
+  * [[/tutorial/effects/elementary_animations/transit|Implementing Elementary Transit Effects]]
+
+
+Elementary Animations example: {{ :transit_rotate.gif }}
+\\
+//**__The Whole Codes__: **//{{code_c/tutorial/effects/elementary_animations.c}} {{code_c/tutorial/effects/transit.c}}