From ea6944edd2c8f361d791999c824f22d6bbea6a0d Mon Sep 17 00:00:00 2001
From: fratzinger <22286818+fratzinger@users.noreply.github.com>
Date: Mon, 16 Mar 2020 08:03:26 +0100
Subject: [PATCH] docs(transition-state): update to gsap@3

see https://greensock.com/3-migration
---
 src/v2/guide/transitioning-state.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/v2/guide/transitioning-state.md b/src/v2/guide/transitioning-state.md
index 8e485c6dab..a9a4e117b0 100644
--- a/src/v2/guide/transitioning-state.md
+++ b/src/v2/guide/transitioning-state.md
@@ -18,7 +18,7 @@ All of these are either already stored as raw numbers or can be converted into n
 Watchers allow us to animate changes of any numerical property into another property. That may sound complicated in the abstract, so let's dive into an example using [GreenSock](https://greensock.com/):
 
 ``` html
-<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.4/gsap.min.js"></script>
 
 <div id="animated-number-demo">
   <input v-model.number="number" type="number" step="20">
@@ -40,14 +40,14 @@ new Vue({
   },
   watch: {
     number: function(newValue) {
-      TweenLite.to(this.$data, 0.5, { tweenedNumber: newValue });
+      gsap.to(this.$data, { duration: 0.5, tweenedNumber: newValue });
     }
   }
 })
 ```
 
 {% raw %}
-<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.4/gsap.min.js"></script>
 <div id="animated-number-demo" class="demo">
   <input v-model.number="number" type="number" step="20">
   <p>{{ animatedNumber }}</p>
@@ -66,7 +66,7 @@ new Vue({
   },
   watch: {
     number: function(newValue) {
-      TweenLite.to(this.$data, 0.5, { tweenedNumber: newValue });
+      gsap.to(this.$data, { duration: 0.5, tweenedNumber: newValue });
     }
   }
 })