Use animated images where appropriate.

4 files changed, 3 insertions, 4 deletions

diff --git a/doc/src/images/declarative-removebutton.gif b/doc/src/images/declarative-removebutton.gif
new file mode 100644
index 0000000..ca4d7e6
--- /dev/null
+++ b/doc/src/images/declarative-removebutton.gif
diff --git a/doc/src/images/declarative-tutorial-list-open.gif b/doc/src/images/declarative-tutorial-list-open.gif
new file mode 100644
index 0000000..5b93597
--- /dev/null
+++ b/doc/src/images/declarative-tutorial-list-open.gif
diff --git a/doc/src/images/declarative-tutorial-list.gif b/doc/src/images/declarative-tutorial-list.gif
new file mode 100644
index 0000000..24db426
--- /dev/null
+++ b/doc/src/images/declarative-tutorial-list.gif
diff --git a/doc/src/tutorials/declarative.qdoc b/doc/src/tutorials/declarative.qdoc
index 543f274..75d0c06 100644
--- a/doc/src/tutorials/declarative.qdoc
+++ b/doc/src/tutorials/declarative.qdoc
@@ -106,7 +106,7 @@
     confirm icon on the left, the text "Remove" in the middle, and a
     cancel icon on the right.
 
-    \image declarative-removebutton.png
+    \image declarative-removebutton.gif
 
     Because Declarative UI is declarative, you don't pass instructions on
     what to paint in a sequential manner as you may be used to.  Instead
@@ -559,7 +559,7 @@
     data displayed, a delegate to indicate how elements are drawn and
     a view to arrange the elements.
 
-    \image declarative-tutorial-list.png
+    \image declarative-tutorial-list.gif
 
     For the purposes of this tutorial we will be using an SQL query as our
     data model.  This can be declared in the resources section of
@@ -604,8 +604,7 @@
     similar to how the contents of the FieldText and RemoveButton components
     are swapped in and out.
 
-    \image declarative-tutorial-list-closed.png
-    \image declarative-tutorial-list-open.png
+    \image declarative-tutorial-list-open.gif
 
     \snippet declarative/tutorials/contacts/3_Collections/2/ContactView.qml components