1 files changed, 45 insertions, 0 deletions
diff --git a/doc/src/declarative/tutorial3.qdoc b/doc/src/declarative/tutorial3.qdoc
new file mode 100644
index 0000000..290b535
--- /dev/null
+++ b/doc/src/declarative/tutorial3.qdoc
@@ -0,0 +1,45 @@
+/*!
+\page tutorial3.html
+\title Tutorial 3 - States and Transitions
+
+In this chapter, we make this example a little bit more dynamic by introducing states and transitions.
+
+We want our text to move to the bottom of the screen, rotate and become red when clicked.
+
+\image declarative-tutorial3_animation.gif
+
+Here is the QML code:
+
+\snippet examples/declarative/tutorials/helloworld/tutorial3.qml 0
+
+\section1 Walkthrough
+
+\snippet examples/declarative/tutorials/helloworld/tutorial3.qml 2
+
+First, we create a new \e down state for our text element.
+This state will be activated when the \l MouseRegion is pressed, and deactivated when it is released.
+
+The \e down state includes a set of property changes from our implicit \e {default state}
+(the items as they were initially defined in the QML).
+Specifically, we set the \c y property of the text to \c 160, the rotation to \c 180 and the \c color to red.
+
+\snippet examples/declarative/tutorials/helloworld/tutorial3.qml 3
+
+Because we don't want the text to appear at the bottom instantly but rather move smoothly,
+we add a transition between our two states.
+
+\c from and \c to define the states between which the transition will run.
+In this case, we want a transition from the default state to our \e down state.
+
+Because we want the same transition to be run in reverse when changing back from the \e down state to the default state,
+we set \c reversible to \c true.
+This is equivalent to writing the two transitions separately.
+
+The \l ParallelAnimation element makes sure that the two types of animations (number and color) start at the same time.
+We could also run them one after the other by using \l SequentialAnimation instead.
+
+For more details on states and transitions, see \l {QML States}.
+
+[Previous: \l {Tutorial 2 - QML Component}] [\l {Tutorial}]
+
+*/