[Interest] Animating a gradient

[Jason H]

I want to animate a gradient, but onPositionChanged gives an error, even though I can animate it. What am I doing wrong?


Item {
	property alias color: container.color
	Component.onCompleted: anim.start()
	Rectangle {
		id: container
		width: parent.width * .9
		height : parent.height / 2
		anchors.centerIn: parent
		Rectangle {
			anchors.centerIn: parent
			width: container.height /2
			height: container.width
			rotation: -90
			gradient:Gradient {
					GradientStop { id: gs0; position: 0.00; color: "dodgerblue" }
					GradientStop {
						id: gs1;
						position: 0.98;
						color: "white";
						onPositionChanged: { // Cannot assign to non-existent property "onPositionChanged"
							gs2.position = position +.01
						}
					}
					GradientStop { id: gs2; position: 0.99; color: "dodgerblue" }
					GradientStop { id: gs3; position: 1.00; color: "dodgerblue" }
			}
		}
	}

	NumberAnimation {
		id: anim
		target: gs1
		property: "position"
		duration: 2000
		easing.type: Easing.InOutQuad
		loops: Animation.Infinite
		from: .98
		to: 0
	}
}