Update mobile onboarding flow (#2689)

* Enable lottie again * Extra logs * chore: Add lottie animation files * fix: Flickable mobile onboarding scroll overflow * feat: Add lottie animations to panels * chore: Apply a dark themed color scheme * feat: Add radial gradient * chore: Layout for VPN logo drop animation * chore: Clean up * fix: Mobile onboarding test * chore: Replace localised panel strings * fix: Mobile onboarding QML test Co-authored-by: Andrea Marchesini <[email protected]>
mozilla-mobile · Feb 9, 2022 · b7076c6 · b7076c6
1 parent 53e88db
commit b7076c6
Show file tree

Hide file tree

Showing 17 changed files with 135 additions and 47 deletions.
diff --git a/nebula/ui/compat/qt5/VPNRadialGradient.qml b/nebula/ui/compat/qt5/VPNRadialGradient.qml
@@ -0,0 +1,9 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import QtQuick 2.0
+import QtGraphicalEffects 1.0
+
+RadialGradient {
+}
diff --git a/nebula/ui/compat/qt5/qmldir b/nebula/ui/compat/qt5/qmldir
@@ -3,4 +3,5 @@ VPNColorOverlay 0.1 VPNColorOverlay.qml
 VPNDropShadow 0.1 VPNDropShadow.qml
 VPNLinearGradient 0.1 VPNLinearGradient.qml
 VPNOpacityMask 0.1 VPNOpacityMask.qml
+VPNRadialGradient 0.1 VPNRadialGradient.qml
 VPNRectangularGlow 0.1 VPNRectangularGlow.qml
diff --git a/nebula/ui/compat/qt6/VPNRadialGradient.qml b/nebula/ui/compat/qt6/VPNRadialGradient.qml
@@ -0,0 +1,9 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import QtQuick 2.0
+import Qt5Compat.GraphicalEffects
+
+RadialGradient {
+}
diff --git a/nebula/ui/compat/qt6/qmldir b/nebula/ui/compat/qt6/qmldir
@@ -3,4 +3,5 @@ VPNColorOverlay 0.1 VPNColorOverlay.qml
 VPNDropShadow 0.1 VPNDropShadow.qml
 VPNLinearGradient 0.1 VPNLinearGradient.qml
 VPNOpacityMask 0.1 VPNOpacityMask.qml
+VPNRadialGradient 0.1 VPNRadialGradient.qml
 VPNRectangularGlow 0.1 VPNRectangularGlow.qml
diff --git a/nebula/ui/compatQt5.qrc b/nebula/ui/compatQt5.qrc
@@ -6,6 +6,7 @@
         <file alias="compat/VPNDropShadow.qml">compat/qt5/VPNDropShadow.qml</file>
         <file alias="compat/VPNLinearGradient.qml">compat/qt5/VPNLinearGradient.qml</file>
         <file alias="compat/VPNOpacityMask.qml">compat/qt5/VPNOpacityMask.qml</file>
+        <file alias="compat/VPNRadialGradient.qml">compat/qt5/VPNRadialGradient.qml</file>
         <file alias="compat/VPNRectangularGlow.qml">compat/qt5/VPNRectangularGlow.qml</file>
     </qresource>
 </RCC>
diff --git a/nebula/ui/compatQt6.qrc b/nebula/ui/compatQt6.qrc
@@ -6,6 +6,7 @@
         <file alias="compat/VPNDropShadow.qml">compat/qt6/VPNDropShadow.qml</file>
         <file alias="compat/VPNLinearGradient.qml">compat/qt6/VPNLinearGradient.qml</file>
         <file alias="compat/VPNOpacityMask.qml">compat/qt6/VPNOpacityMask.qml</file>
+        <file alias="compat/VPNRadialGradient.qml">compat/qt6/VPNRadialGradient.qml</file>
         <file alias="compat/VPNRectangularGlow.qml">compat/qt6/VPNRectangularGlow.qml</file>
     </qresource>
 </RCC>
diff --git a/nebula/ui/components/VPNHeaderLink.qml b/nebula/ui/components/VPNHeaderLink.qml
@@ -4,11 +4,16 @@
 
 import QtQuick 2.5
 
+import Mozilla.VPN 1.0
+
 //VPNHeaderLink
 VPNLinkButton {
+    property bool isLightTheme: true
+
     anchors.top: parent.top
     anchors.right: parent.right
     anchors.topMargin: 12
     anchors.rightMargin: 12
     horizontalPadding: 4
+    linkColor: isLightTheme ? VPNTheme.theme.blueButton : VPNTheme.theme.whiteButton
 }
diff --git a/nebula/ui/components/VPNLottieAnimation.qml b/nebula/ui/components/VPNLottieAnimation.qml
@@ -8,10 +8,11 @@ import Mozilla.VPN 1.0
 import lottie 0.1
 
 LottieAnimation {
+    property bool loop: true
     id: lottieAnimation
 
     anchors.fill: parent
-    loops: true
+    loops: loop
     fillMode: "preserveAspectFit"
 
     Connections {

diff --git a/nebula/ui/nebula_resources.qrc b/nebula/ui/nebula_resources.qrc
@@ -28,6 +28,8 @@
         <file>resources/animations/lock_animation.json</file>
         <file>resources/animations/speedometer_animation.json</file>
         <file>resources/animations/vpnactive_animation.json</file>
+        <file>resources/animations/vpnlogo-drop_animation.json</file>
+        <file>resources/animations/vpnlogo-kinetic_animation.json</file>
         <file>resources/flags/AC.png</file>
         <file>resources/flags/AD.png</file>
         <file>resources/flags/AE.png</file>

diff --git a/nebula/ui/resources/animations/vpnlogo-drop_animation.json b/nebula/ui/resources/animations/vpnlogo-drop_animation.json
@@ -0,0 +1 @@
+{"v":"5.7.4","fr":60,"ip":0,"op":180,"w":1240,"h":1240,"nm":"Intro 2","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Circle Right","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.58],"y":[1]},"o":{"x":[0.42],"y":[0]},"t":5,"s":[0]},{"t":35,"s":[100]}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"s":true,"x":{"a":1,"k":[{"i":{"x":[0.32],"y":[1]},"o":{"x":[0.17],"y":[0]},"t":10,"s":[771.58]},{"t":40,"s":[771.58]}],"ix":3},"y":{"a":1,"k":[{"i":{"x":[0.32],"y":[1.27]},"o":{"x":[0.17],"y":[0.89]},"t":10,"s":[89.716]},{"t":40,"s":[890.7]}],"ix":4}},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,19.93],[-20.119,0],[0,-19.93],[20.119,0]],"o":[[0,-19.93],[20.119,0],[0,19.93],[-20.119,0]],"v":[[-36.43,0],[0,-36.087],[36.43,0],[0,36.087]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ind":1,"ty":"sh","ix":2,"ks":{"a":0,"k":{"i":[[46.946,0],[0,-46.504],[-46.946,0],[0,46.504]],"o":[[-46.946,0],[0,46.504],[46.946,0],[0,-46.504]],"v":[[0,-84.203],[-85.003,0],[0,84.203],[85.003,0]],"c":true},"ix":2},"nm":"Path 2","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"mm","mm":1,"nm":"Merge Paths 1","mn":"ADBE Vector Filter - Merge","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Circle Right","np":4,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":188,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"Circle Left","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.58],"y":[1]},"o":{"x":[0.42],"y":[0]},"t":5,"s":[0]},{"t":35,"s":[100]}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"s":true,"x":{"a":1,"k":[{"i":{"x":[0.32],"y":[1]},"o":{"x":[0.17],"y":[0]},"t":7,"s":[468.002]},{"t":37,"s":[468.002]}],"ix":3},"y":{"a":1,"k":[{"i":{"x":[0.32],"y":[1.27]},"o":{"x":[0.17],"y":[0.89]},"t":7,"s":[157.716]},{"t":37,"s":[890.7]}],"ix":4}},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,19.93],[-20.12,0],[0,-19.93],[20.119,0]],"o":[[0,-19.93],[20.119,0],[0,19.93],[-20.12,0]],"v":[[-36.43,0],[0,-36.087],[36.43,0],[0,36.087]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ind":1,"ty":"sh","ix":2,"ks":{"a":0,"k":{"i":[[46.946,0],[0,-46.504],[-46.946,0],[0,46.504]],"o":[[-46.946,0],[0,46.504],[46.946,0],[0,-46.504]],"v":[[0,-84.203],[-85.003,0],[0,84.203],[85.003,0]],"c":true},"ix":2},"nm":"Path 2","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"mm","mm":1,"nm":"Merge Paths 1","mn":"ADBE Vector Filter - Merge","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Circle Left","np":4,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":185,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"Cirlce Bottom","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.58],"y":[1]},"o":{"x":[0.42],"y":[0]},"t":5,"s":[0]},{"t":35,"s":[100]}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"s":true,"x":{"a":1,"k":[{"i":{"x":[0.32],"y":[1]},"o":{"x":[0.17],"y":[0]},"t":5,"s":[619.796]},{"t":35,"s":[619.796]}],"ix":3},"y":{"a":1,"k":[{"i":{"x":[0.32],"y":[1.27]},"o":{"x":[0.17],"y":[0.89]},"t":5,"s":[276.082]},{"t":35,"s":[1041.1]}],"ix":4}},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,19.93],[-20.119,0],[0,-19.93],[20.119,0]],"o":[[0,-19.93],[20.119,0],[0,19.93],[-20.119,0]],"v":[[-36.43,0],[0,-36.087],[36.43,0],[0,36.087]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ind":1,"ty":"sh","ix":2,"ks":{"a":0,"k":{"i":[[46.946,0],[0,-46.504],[-46.945,0],[0,46.504]],"o":[[-46.945,0],[0,46.504],[46.946,0],[0,-46.504]],"v":[[0,-84.203],[-85.003,0],[0,84.203],[85.003,0]],"c":true},"ix":2},"nm":"Path 2","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"mm","mm":1,"nm":"Merge Paths 1","mn":"ADBE Vector Filter - Merge","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Cirlce Bottom","np":4,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":187,"st":0,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"Circle Top","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.58],"y":[1]},"o":{"x":[0.42],"y":[0]},"t":5,"s":[0]},{"t":35,"s":[100]}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"s":true,"x":{"a":1,"k":[{"i":{"x":[0.32],"y":[1]},"o":{"x":[0.17],"y":[0]},"t":15,"s":[619.796]},{"t":45,"s":[619.796]}],"ix":3},"y":{"a":1,"k":[{"i":{"x":[0.32],"y":[1.27]},"o":{"x":[0.17],"y":[0.89]},"t":15,"s":[209.355]},{"t":45,"s":[740.4]}],"ix":4}},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,19.93],[-20.12,0],[0,-19.931],[20.119,0]],"o":[[0,-19.931],[20.119,0],[0,19.93],[-20.12,0]],"v":[[-36.429,0],[0,-36.087],[36.429,0],[0,36.087]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ind":1,"ty":"sh","ix":2,"ks":{"a":0,"k":{"i":[[46.945,0],[0,-46.504],[-46.946,0],[0,46.504]],"o":[[-46.946,0],[0,46.504],[46.945,0],[0,-46.504]],"v":[[0,-84.203],[-85.003,0],[0,84.203],[85.003,0]],"c":true},"ix":2},"nm":"Path 2","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"mm","mm":1,"nm":"Merge Paths 1","mn":"ADBE Vector Filter - Merge","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Circle Top","np":4,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":186,"st":0,"bm":0},{"ddd":0,"ind":5,"ty":4,"nm":"Connector","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.58],"y":[1]},"o":{"x":[0.42],"y":[0]},"t":0,"s":[0]},{"i":{"x":[0.58],"y":[1]},"o":{"x":[0.42],"y":[0]},"t":60,"s":[0]},{"t":90,"s":[100]}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[619.795,890.713,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[22.56,8.777],[0,0],[-15.685,-6.103],[0,0],[0,0],[0,-8.556],[-22.557,-8.777],[0,0],[15.686,6.102],[0,0],[0,0],[0,8.554]],"o":[[0,0],[6.161,15.539],[0,0],[0,0],[-3.25,7.368],[0,25.459],[0,0],[-6.162,-15.538],[0,0],[0,0],[3.25,-7.367],[0,-25.461]],"v":[[-129.602,-56.003],[-56.534,-128.384],[-22.188,-94.36],[-93.158,-24.057],[96.129,-24.057],[91.075,0.004],[129.6,56.005],[56.535,128.384],[22.186,94.363],[93.158,24.059],[-96.124,24.059],[-91.072,0]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ind":1,"ty":"sh","ix":2,"ks":{"a":0,"k":{"i":[[-0.277,-0.7],[0,0],[0,0]],"o":[[0,0],[0,0],[0.303,0.686]],"v":[[208.324,-21.978],[210.424,-24.057],[207.454,-24.057]],"c":true},"ix":2},"nm":"Path 2","mn":"ADBE Vector Shape - Group","hd":false},{"ind":2,"ty":"sh","ix":3,"ks":{"a":0,"k":{"i":[[0,0],[0.278,0.7],[0,0]],"o":[[-0.303,-0.687],[0,0],[0,0]],"v":[[-207.452,24.059],[-208.323,21.979],[-210.424,24.059]],"c":true},"ix":2},"nm":"Path 3","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"mm","mm":1,"nm":"Merge Paths 1","mn":"ADBE Vector Filter - Merge","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Connector","np":5,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":185,"st":0,"bm":0}],"markers":[]}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		{"v":"5.7.4","fr":60,"ip":0,"op":180,"w":1240,"h":1240,"nm":"Intro 2","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Circle Right","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.58],"y":[1]},"o":{"x":[0.42],"y":[0]},"t":5,"s":[0]},{"t":35,"s":[100]}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"s":true,"x":{"a":1,"k":[{"i":{"x":[0.32],"y":[1]},"o":{"x":[0.17],"y":[0]},"t":10,"s":[771.58]},{"t":40,"s":[771.58]}],"ix":3},"y":{"a":1,"k":[{"i":{"x":[0.32],"y":[1.27]},"o":{"x":[0.17],"y":[0.89]},"t":10,"s":[89.716]},{"t":40,"s":[890.7]}],"ix":4}},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,19.93],[-20.119,0],[0,-19.93],[20.119,0]],"o":[[0,-19.93],[20.119,0],[0,19.93],[-20.119,0]],"v":[[-36.43,0],[0,-36.087],[36.43,0],[0,36.087]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ind":1,"ty":"sh","ix":2,"ks":{"a":0,"k":{"i":[[46.946,0],[0,-46.504],[-46.946,0],[0,46.504]],"o":[[-46.946,0],[0,46.504],[46.946,0],[0,-46.504]],"v":[[0,-84.203],[-85.003,0],[0,84.203],[85.003,0]],"c":true},"ix":2},"nm":"Path 2","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"mm","mm":1,"nm":"Merge Paths 1","mn":"ADBE Vector Filter - Merge","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Circle Right","np":4,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":188,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"Circle Left","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.58],"y":[1]},"o":{"x":[0.42],"y":[0]},"t":5,"s":[0]},{"t":35,"s":[100]}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"s":true,"x":{"a":1,"k":[{"i":{"x":[0.32],"y":[1]},"o":{"x":[0.17],"y":[0]},"t":7,"s":[468.002]},{"t":37,"s":[468.002]}],"ix":3},"y":{"a":1,"k":[{"i":{"x":[0.32],"y":[1.27]},"o":{"x":[0.17],"y":[0.89]},"t":7,"s":[157.716]},{"t":37,"s":[890.7]}],"ix":4}},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,19.93],[-20.12,0],[0,-19.93],[20.119,0]],"o":[[0,-19.93],[20.119,0],[0,19.93],[-20.12,0]],"v":[[-36.43,0],[0,-36.087],[36.43,0],[0,36.087]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ind":1,"ty":"sh","ix":2,"ks":{"a":0,"k":{"i":[[46.946,0],[0,-46.504],[-46.946,0],[0,46.504]],"o":[[-46.946,0],[0,46.504],[46.946,0],[0,-46.504]],"v":[[0,-84.203],[-85.003,0],[0,84.203],[85.003,0]],"c":true},"ix":2},"nm":"Path 2","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"mm","mm":1,"nm":"Merge Paths 1","mn":"ADBE Vector Filter - Merge","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Circle Left","np":4,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":185,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"Cirlce Bottom","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.58],"y":[1]},"o":{"x":[0.42],"y":[0]},"t":5,"s":[0]},{"t":35,"s":[100]}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"s":true,"x":{"a":1,"k":[{"i":{"x":[0.32],"y":[1]},"o":{"x":[0.17],"y":[0]},"t":5,"s":[619.796]},{"t":35,"s":[619.796]}],"ix":3},"y":{"a":1,"k":[{"i":{"x":[0.32],"y":[1.27]},"o":{"x":[0.17],"y":[0.89]},"t":5,"s":[276.082]},{"t":35,"s":[1041.1]}],"ix":4}},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,19.93],[-20.119,0],[0,-19.93],[20.119,0]],"o":[[0,-19.93],[20.119,0],[0,19.93],[-20.119,0]],"v":[[-36.43,0],[0,-36.087],[36.43,0],[0,36.087]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ind":1,"ty":"sh","ix":2,"ks":{"a":0,"k":{"i":[[46.946,0],[0,-46.504],[-46.945,0],[0,46.504]],"o":[[-46.945,0],[0,46.504],[46.946,0],[0,-46.504]],"v":[[0,-84.203],[-85.003,0],[0,84.203],[85.003,0]],"c":true},"ix":2},"nm":"Path 2","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"mm","mm":1,"nm":"Merge Paths 1","mn":"ADBE Vector Filter - Merge","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Cirlce Bottom","np":4,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":187,"st":0,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"Circle Top","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.58],"y":[1]},"o":{"x":[0.42],"y":[0]},"t":5,"s":[0]},{"t":35,"s":[100]}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"s":true,"x":{"a":1,"k":[{"i":{"x":[0.32],"y":[1]},"o":{"x":[0.17],"y":[0]},"t":15,"s":[619.796]},{"t":45,"s":[619.796]}],"ix":3},"y":{"a":1,"k":[{"i":{"x":[0.32],"y":[1.27]},"o":{"x":[0.17],"y":[0.89]},"t":15,"s":[209.355]},{"t":45,"s":[740.4]}],"ix":4}},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,19.93],[-20.12,0],[0,-19.931],[20.119,0]],"o":[[0,-19.931],[20.119,0],[0,19.93],[-20.12,0]],"v":[[-36.429,0],[0,-36.087],[36.429,0],[0,36.087]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ind":1,"ty":"sh","ix":2,"ks":{"a":0,"k":{"i":[[46.945,0],[0,-46.504],[-46.946,0],[0,46.504]],"o":[[-46.946,0],[0,46.504],[46.945,0],[0,-46.504]],"v":[[0,-84.203],[-85.003,0],[0,84.203],[85.003,0]],"c":true},"ix":2},"nm":"Path 2","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"mm","mm":1,"nm":"Merge Paths 1","mn":"ADBE Vector Filter - Merge","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Circle Top","np":4,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":186,"st":0,"bm":0},{"ddd":0,"ind":5,"ty":4,"nm":"Connector","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.58],"y":[1]},"o":{"x":[0.42],"y":[0]},"t":0,"s":[0]},{"i":{"x":[0.58],"y":[1]},"o":{"x":[0.42],"y":[0]},"t":60,"s":[0]},{"t":90,"s":[100]}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[619.795,890.713,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[22.56,8.777],[0,0],[-15.685,-6.103],[0,0],[0,0],[0,-8.556],[-22.557,-8.777],[0,0],[15.686,6.102],[0,0],[0,0],[0,8.554]],"o":[[0,0],[6.161,15.539],[0,0],[0,0],[-3.25,7.368],[0,25.459],[0,0],[-6.162,-15.538],[0,0],[0,0],[3.25,-7.367],[0,-25.461]],"v":[[-129.602,-56.003],[-56.534,-128.384],[-22.188,-94.36],[-93.158,-24.057],[96.129,-24.057],[91.075,0.004],[129.6,56.005],[56.535,128.384],[22.186,94.363],[93.158,24.059],[-96.124,24.059],[-91.072,0]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ind":1,"ty":"sh","ix":2,"ks":{"a":0,"k":{"i":[[-0.277,-0.7],[0,0],[0,0]],"o":[[0,0],[0,0],[0.303,0.686]],"v":[[208.324,-21.978],[210.424,-24.057],[207.454,-24.057]],"c":true},"ix":2},"nm":"Path 2","mn":"ADBE Vector Shape - Group","hd":false},{"ind":2,"ty":"sh","ix":3,"ks":{"a":0,"k":{"i":[[0,0],[0.278,0.7],[0,0]],"o":[[-0.303,-0.687],[0,0],[0,0]],"v":[[-207.452,24.059],[-208.323,21.979],[-210.424,24.059]],"c":true},"ix":2},"nm":"Path 3","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"mm","mm":1,"nm":"Merge Paths 1","mn":"ADBE Vector Filter - Merge","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Connector","np":5,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":185,"st":0,"bm":0}],"markers":[]}