diff --git a/doc/images/qmldesigner-transitions.png b/doc/images/qmldesigner-transitions.png
index 66624e93d26..f3599b7ca66 100644
Binary files a/doc/images/qmldesigner-transitions.png and b/doc/images/qmldesigner-transitions.png differ
diff --git a/doc/src/qtquick/qtquick-designer.qdoc b/doc/src/qtquick/qtquick-designer.qdoc
index 7a143d24c4a..81d7ebcfa24 100644
--- a/doc/src/qtquick/qtquick-designer.qdoc
+++ b/doc/src/qtquick/qtquick-designer.qdoc
@@ -428,6 +428,10 @@
     you can change the position of an object on the canvas and then add animation
     to the change between the states.
 
+    To determine when the state should be applied, select
+    \uicontrol {Set when Condition} in the context menu and specify a
+    \l [QtQuick]{State::when}{when} property for the state.
+
     You can preview the states in the \uicontrol State pane and click them to switch
     between states on the canvas.