diff --git a/.idea/appInsightsSettings.xml b/.idea/appInsightsSettings.xml
index eaca56f2..fb25d121 100644
--- a/.idea/appInsightsSettings.xml
+++ b/.idea/appInsightsSettings.xml
@@ -1,6 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
   <component name="AppInsightsSettings">
+    <option name="selectedTabId" value="Android Vitals" />
     <option name="tabSettings">
       <map>
         <entry key="Android Vitals">
@@ -27,12 +28,17 @@
             <InsightsFilterSettings>
               <option name="connection">
                 <ConnectionSetting>
-                  <option name="appId" value="com.kafka.user.debug" />
-                  <option name="mobileSdkAppId" value="1:577294117898:android:1da10a3ca24c29a60d83f3" />
+                  <option name="appId" value="com.kafka.user" />
+                  <option name="mobileSdkAppId" value="1:577294117898:android:6964f76f6d1535f8" />
                   <option name="projectId" value="kafka-books" />
                   <option name="projectNumber" value="577294117898" />
                 </ConnectionSetting>
               </option>
+              <option name="failureTypes">
+                <list>
+                  <option value="FATAL" />
+                </list>
+              </option>
               <option name="signal" value="SIGNAL_UNSPECIFIED" />
               <option name="timeIntervalDays" value="THIRTY_DAYS" />
               <option name="visibilityType" value="ALL" />
diff --git a/.idea/codeStyles/Project.xml b/.idea/codeStyles/Project.xml
new file mode 100644
index 00000000..7643783a
--- /dev/null
+++ b/.idea/codeStyles/Project.xml
@@ -0,0 +1,123 @@
+<component name="ProjectCodeStyleConfiguration">
+  <code_scheme name="Project" version="173">
+    <JetCodeStyleSettings>
+      <option name="CODE_STYLE_DEFAULTS" value="KOTLIN_OFFICIAL" />
+    </JetCodeStyleSettings>
+    <codeStyleSettings language="XML">
+      <option name="FORCE_REARRANGE_MODE" value="1" />
+      <indentOptions>
+        <option name="CONTINUATION_INDENT_SIZE" value="4" />
+      </indentOptions>
+      <arrangement>
+        <rules>
+          <section>
+            <rule>
+              <match>
+                <AND>
+                  <NAME>xmlns:android</NAME>
+                  <XML_ATTRIBUTE />
+                  <XML_NAMESPACE>^$</XML_NAMESPACE>
+                </AND>
+              </match>
+            </rule>
+          </section>
+          <section>
+            <rule>
+              <match>
+                <AND>
+                  <NAME>xmlns:.*</NAME>
+                  <XML_ATTRIBUTE />
+                  <XML_NAMESPACE>^$</XML_NAMESPACE>
+                </AND>
+              </match>
+              <order>BY_NAME</order>
+            </rule>
+          </section>
+          <section>
+            <rule>
+              <match>
+                <AND>
+                  <NAME>.*:id</NAME>
+                  <XML_ATTRIBUTE />
+                  <XML_NAMESPACE>http://schemas.android.com/apk/res/android</XML_NAMESPACE>
+                </AND>
+              </match>
+            </rule>
+          </section>
+          <section>
+            <rule>
+              <match>
+                <AND>
+                  <NAME>.*:name</NAME>
+                  <XML_ATTRIBUTE />
+                  <XML_NAMESPACE>http://schemas.android.com/apk/res/android</XML_NAMESPACE>
+                </AND>
+              </match>
+            </rule>
+          </section>
+          <section>
+            <rule>
+              <match>
+                <AND>
+                  <NAME>name</NAME>
+                  <XML_ATTRIBUTE />
+                  <XML_NAMESPACE>^$</XML_NAMESPACE>
+                </AND>
+              </match>
+            </rule>
+          </section>
+          <section>
+            <rule>
+              <match>
+                <AND>
+                  <NAME>style</NAME>
+                  <XML_ATTRIBUTE />
+                  <XML_NAMESPACE>^$</XML_NAMESPACE>
+                </AND>
+              </match>
+            </rule>
+          </section>
+          <section>
+            <rule>
+              <match>
+                <AND>
+                  <NAME>.*</NAME>
+                  <XML_ATTRIBUTE />
+                  <XML_NAMESPACE>^$</XML_NAMESPACE>
+                </AND>
+              </match>
+              <order>BY_NAME</order>
+            </rule>
+          </section>
+          <section>
+            <rule>
+              <match>
+                <AND>
+                  <NAME>.*</NAME>
+                  <XML_ATTRIBUTE />
+                  <XML_NAMESPACE>http://schemas.android.com/apk/res/android</XML_NAMESPACE>
+                </AND>
+              </match>
+              <order>ANDROID_ATTRIBUTE_ORDER</order>
+            </rule>
+          </section>
+          <section>
+            <rule>
+              <match>
+                <AND>
+                  <NAME>.*</NAME>
+                  <XML_ATTRIBUTE />
+                  <XML_NAMESPACE>.*</XML_NAMESPACE>
+                </AND>
+              </match>
+              <order>BY_NAME</order>
+            </rule>
+          </section>
+        </rules>
+      </arrangement>
+    </codeStyleSettings>
+    <codeStyleSettings language="kotlin">
+      <option name="CODE_STYLE_DEFAULTS" value="KOTLIN_OFFICIAL" />
+    </codeStyleSettings>
+  </code_scheme>
+</component>
\ No newline at end of file
diff --git a/.idea/codeStyles/codeStyleConfig.xml b/.idea/codeStyles/codeStyleConfig.xml
new file mode 100644
index 00000000..79ee123c
--- /dev/null
+++ b/.idea/codeStyles/codeStyleConfig.xml
@@ -0,0 +1,5 @@
+<component name="ProjectCodeStyleConfiguration">
+  <state>
+    <option name="USE_PER_PROJECT_SETTINGS" value="true" />
+  </state>
+</component>
\ No newline at end of file
diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml
new file mode 100644
index 00000000..44ca2d9b
--- /dev/null
+++ b/.idea/inspectionProfiles/Project_Default.xml
@@ -0,0 +1,41 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="PreviewAnnotationInFunctionWithParameters" enabled="true" level="ERROR" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
+    </inspection_tool>
+    <inspection_tool class="PreviewApiLevelMustBeValid" enabled="true" level="ERROR" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
+    </inspection_tool>
+    <inspection_tool class="PreviewDimensionRespectsLimit" enabled="true" level="WARNING" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
+    </inspection_tool>
+    <inspection_tool class="PreviewFontScaleMustBeGreaterThanZero" enabled="true" level="ERROR" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
+    </inspection_tool>
+    <inspection_tool class="PreviewMultipleParameterProviders" enabled="true" level="ERROR" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
+    </inspection_tool>
+    <inspection_tool class="PreviewMustBeTopLevelFunction" enabled="true" level="ERROR" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
+    </inspection_tool>
+    <inspection_tool class="PreviewNeedsComposableAnnotation" enabled="true" level="ERROR" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
+    </inspection_tool>
+    <inspection_tool class="PreviewNotSupportedInUnitTestFiles" enabled="true" level="ERROR" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
+    </inspection_tool>
+    <inspection_tool class="PreviewPickerAnnotation" enabled="true" level="ERROR" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
+    </inspection_tool>
+  </profile>
+</component>
\ No newline at end of file
diff --git a/.idea/kotlinc.xml b/.idea/kotlinc.xml
index f8467b45..e805548a 100644
--- a/.idea/kotlinc.xml
+++ b/.idea/kotlinc.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
   <component name="KotlinJpsPluginSettings">
-    <option name="version" value="1.9.10" />
+    <option name="version" value="1.9.20" />
   </component>
 </project>
\ No newline at end of file
diff --git a/.idea/migrations.xml b/.idea/migrations.xml
new file mode 100644
index 00000000..f8051a6f
--- /dev/null
+++ b/.idea/migrations.xml
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectMigrations">
+    <option name="MigrateToGradleLocalJavaHome">
+      <set>
+        <option value="$PROJECT_DIR$" />
+      </set>
+    </option>
+  </component>
+</project>
\ No newline at end of file
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
index 35eb1ddf..49d13d9e 100644
--- a/.idea/vcs.xml
+++ b/.idea/vcs.xml
@@ -2,5 +2,6 @@
 <project version="4">
   <component name="VcsDirectoryMappings">
     <mapping directory="" vcs="Git" />
+    <mapping directory="$PROJECT_DIR$/../Sarahang" vcs="Git" />
   </component>
 </project>
\ No newline at end of file
diff --git a/README.md b/README.md
index fb088560..0a4e1014 100644
--- a/README.md
+++ b/README.md
@@ -2,6 +2,14 @@
 
 [Kafka](https://www.kafkaarchives.com) uses www.archive.org to serve millions of audiobooks and pdf books available across a multitude of genres and languages, all free and in the public domain.
 
+- 41 million books and text; 14.5 million audio recordings - tagged and searchable with filters
+- New content added continuously by the community as well as Kafka Archives
+- Audio player for seamless background playback, sleep timer and playback speed controls
+- Text reader for reading PDFs with features like continue-reading
+- Mark content as favorite and build your own library
+- Download content on your device and share it freely - or share within the app with convenient deep linking
+- Dark theme with MaterialYou colors
+
 
 ## Download
 
@@ -9,6 +17,8 @@
 <img src="https://play.google.com/intl/en_gb/badges/static/images/badges/en_badge_web_generic.png" width=240 />
 </a>
 
+Or [Download APK](https://github.com/vipulyaara/Kafka/raw/develop/app/release/app-release.apk)
+
 ## Demo
 
 ### [Video](https://vimeo.com/user68598793/review/472788300/8256f4487c)
@@ -25,6 +35,7 @@
 ## How to run
  - Clone the repo
  - Clone [Sarahang](https://github.com/vipulyaara/Sarahang) in the same parent folder as Kafka.<br/>Sarahang is the audio player being used in Kafka and not yet provided through maven.
+ - Add `google_server_client_id=xxx` and `pipeless_auth_token=xxx` in your `local.properties` file. You can use arbitrary values, these tokens only provide additional functionalities.
  - Run project
 
 `google-services.json` for debug flavour is added to the repository.
diff --git a/app/build.gradle.kts b/app/build.gradle.kts
index d9f1238e..f008d9d5 100644
--- a/app/build.gradle.kts
+++ b/app/build.gradle.kts
@@ -1,3 +1,5 @@
+import com.android.build.gradle.internal.cxx.configure.gradleLocalProperties
+
 plugins {
     alias(libs.plugins.android.application)
     alias(libs.plugins.androidx.baselineprofile)
@@ -6,15 +8,21 @@ plugins {
     alias(libs.plugins.gms.googleServices)
     alias(libs.plugins.hilt)
     alias(libs.plugins.kotlin.android)
-    id("kotlin-kapt")
-    id("kotlinx-serialization")
+    alias(libs.plugins.kotlin.kapt)
+    alias(libs.plugins.kotlin.serialization)
 }
 
 android {
     defaultConfig {
         applicationId = "com.kafka.user"
-        versionCode = 42
-        versionName = "0.3.0"
+        versionCode = 52
+        versionName = "0.12.0"
+
+        val googleServerClientId: String = gradleLocalProperties(rootDir).getProperty("google_server_client_id")
+        val pipelessAuthToken: String = gradleLocalProperties(rootDir).getProperty("pipeless_auth_token")
+
+        buildConfigField("String", "GOOGLE_SERVER_CLIENT_ID", googleServerClientId)
+        buildConfigField("String", "PIPELESS_AUTH_TOKEN", pipelessAuthToken)
     }
 
     compileOptions {
@@ -86,9 +94,15 @@ android {
         checkDependencies =  true
         warning += "AutoboxingStateCreation"
     }
+
+    buildFeatures.buildConfig = true
+
 }
 
 dependencies {
+    implementation(platform(libs.compose.bom))
+    implementation(platform(libs.google.bom))
+
     implementation(projects.base.domain)
     implementation(projects.core.analytics)
     implementation(projects.core.downloader)
@@ -112,7 +126,6 @@ dependencies {
     implementation(projects.ui.theme)
     implementation(projects.ui.webview)
 
-    implementation(libs.accompanist.navigation.animation)
     implementation(libs.accompanist.navigation.material)
     implementation(libs.accompanist.permissions)
     implementation(libs.androidx.activity.compose)
@@ -131,6 +144,7 @@ dependencies {
     implementation(libs.compose.ui.util)
     implementation(libs.dataStore)
     implementation(libs.fetch)
+    implementation(libs.fetch.okhttp)
     implementation(libs.firestore.ktx)
     implementation(libs.google.analytics)
     implementation(libs.google.auth)
diff --git a/app/release/app-release.apk b/app/release/app-release.apk
new file mode 100644
index 00000000..b9b0be15
Binary files /dev/null and b/app/release/app-release.apk differ
diff --git a/app/src/debug/google-services.json b/app/src/debug/google-services.json
index 19be52bb..f818b115 100644
--- a/app/src/debug/google-services.json
+++ b/app/src/debug/google-services.json
@@ -14,6 +14,51 @@
         }
       },
       "oauth_client": [
+        {
+          "client_id": "577294117898-g1vm8lfab12a90elj1c9ima8bfnmkie0.apps.googleusercontent.com",
+          "client_type": 1,
+          "android_info": {
+            "package_name": "com.kafka.user.debug",
+            "certificate_hash": "8cc268d3d35cd0dc631ff5fc774d4cff3f9dedc9"
+          }
+        },
+        {
+          "client_id": "577294117898-gtt9m1mm85tomi5fdpnp2hqeevf4udtl.apps.googleusercontent.com",
+          "client_type": 3
+        }
+      ],
+      "api_key": [
+        {
+          "current_key": "AIzaSyD1lV11eH3UdewwBDfNX_AmGTCN2LU-9ko"
+        }
+      ],
+      "services": {
+        "appinvite_service": {
+          "other_platform_oauth_client": [
+            {
+              "client_id": "577294117898-gtt9m1mm85tomi5fdpnp2hqeevf4udtl.apps.googleusercontent.com",
+              "client_type": 3
+            }
+          ]
+        }
+      }
+    },
+    {
+      "client_info": {
+        "mobilesdk_app_id": "1:577294117898:android:48c125bdb091206f0d83f3",
+        "android_client_info": {
+          "package_name": "com.kafka.user.rc"
+        }
+      },
+      "oauth_client": [
+        {
+          "client_id": "577294117898-r6o83cao65al491ieg0mb7mbo3m7su49.apps.googleusercontent.com",
+          "client_type": 1,
+          "android_info": {
+            "package_name": "com.kafka.user.rc",
+            "certificate_hash": "8cc268d3d35cd0dc631ff5fc774d4cff3f9dedc9"
+          }
+        },
         {
           "client_id": "577294117898-gtt9m1mm85tomi5fdpnp2hqeevf4udtl.apps.googleusercontent.com",
           "client_type": 3
@@ -37,4 +82,4 @@
     }
   ],
   "configuration_version": "1"
-}
+}
\ No newline at end of file
diff --git a/app/src/main/AndroidManifest.xml b/app/src/main/AndroidManifest.xml
index f121829e..2b021318 100644
--- a/app/src/main/AndroidManifest.xml
+++ b/app/src/main/AndroidManifest.xml
@@ -55,7 +55,16 @@
                 <category android:name="android.intent.category.BROWSABLE" />
 
                 <data android:scheme="https" />
-                <data android:host="www.kafka-books.web.app" />
+                <data android:host="kafkaarchives.org" />
+            </intent-filter>
+            <intent-filter android:autoVerify="true">
+                <action android:name="android.intent.action.VIEW" />
+
+                <category android:name="android.intent.category.DEFAULT" />
+                <category android:name="android.intent.category.BROWSABLE" />
+
+                <data android:scheme="https" />
+                <data android:host="www.kafkaarchives.org" />
             </intent-filter>
         </activity>
 
diff --git a/app/src/main/java/com/kafka/user/MainActivity.kt b/app/src/main/java/com/kafka/user/MainActivity.kt
index 06287024..197a29d5 100644
--- a/app/src/main/java/com/kafka/user/MainActivity.kt
+++ b/app/src/main/java/com/kafka/user/MainActivity.kt
@@ -11,8 +11,10 @@ import com.kafka.data.prefs.PreferencesStore
 import com.kafka.user.home.MainScreen
 import dagger.hilt.android.AndroidEntryPoint
 import org.kafka.navigation.rememberBottomSheetNavigator
+import timber.log.Timber
 import ui.common.theme.theme.AppTheme
 import ui.common.theme.theme.shouldUseDarkColors
+import ui.common.theme.theme.shouldUseTrueContrast
 import javax.inject.Inject
 
 @AndroidEntryPoint
@@ -29,7 +31,10 @@ class MainActivity : ComponentActivity() {
         setContent {
             val bottomSheetNavigator = rememberBottomSheetNavigator()
             navController = rememberNavController(bottomSheetNavigator)
-            AppTheme(isDarkTheme = preferencesStore.shouldUseDarkColors()) {
+            AppTheme(
+                isDarkTheme = preferencesStore.shouldUseDarkColors(),
+                isTrueContrast = preferencesStore.shouldUseTrueContrast()
+            ) {
                 MainScreen(
                     navController = navController,
                     bottomSheetNavigator = bottomSheetNavigator
@@ -40,6 +45,10 @@ class MainActivity : ComponentActivity() {
 
     override fun onNewIntent(intent: Intent?) {
         super.onNewIntent(intent)
-        navController.handleDeepLink(intent)
+        if (::navController.isInitialized) {
+            navController.handleDeepLink(intent)
+        } else {
+            Timber.e(Error("navController is not initialized. isFinishing $isFinishing"))
+        }
     }
 }
diff --git a/app/src/main/java/com/kafka/user/fcm/FirebaseMessageService.kt b/app/src/main/java/com/kafka/user/fcm/FirebaseMessageService.kt
index d27bd8c4..788ef116 100644
--- a/app/src/main/java/com/kafka/user/fcm/FirebaseMessageService.kt
+++ b/app/src/main/java/com/kafka/user/fcm/FirebaseMessageService.kt
@@ -7,13 +7,13 @@ import android.content.Intent
 import androidx.datastore.preferences.core.stringPreferencesKey
 import com.google.firebase.messaging.FirebaseMessagingService
 import com.google.firebase.messaging.RemoteMessage
-import org.kafka.base.ProcessLifetime
 import com.kafka.data.prefs.PreferencesStore
 import com.kafka.user.MainActivity
 import dagger.hilt.android.AndroidEntryPoint
 import kotlinx.coroutines.CoroutineScope
 import kotlinx.coroutines.launch
 import org.kafka.base.CoroutineDispatchers
+import org.kafka.base.ProcessLifetime
 import org.kafka.base.debug
 import org.kafka.notifications.NotificationManager
 import javax.inject.Inject
@@ -62,7 +62,6 @@ class FirebaseMessageService : FirebaseMessagingService() {
         }
     }
 
-
     private fun Context.mainActivityIntent(): PendingIntent {
         val intent = Intent(this, MainActivity::class.java)
 
diff --git a/app/src/main/java/com/kafka/user/home/AppNavigation.kt b/app/src/main/java/com/kafka/user/home/AppNavigation.kt
index fc1c15e1..55a6632a 100644
--- a/app/src/main/java/com/kafka/user/home/AppNavigation.kt
+++ b/app/src/main/java/com/kafka/user/home/AppNavigation.kt
@@ -1,9 +1,5 @@
 package com.kafka.user.home
 
-import androidx.compose.animation.AnimatedContentTransitionScope
-import androidx.compose.animation.EnterTransition
-import androidx.compose.animation.ExitTransition
-import androidx.compose.animation.ExperimentalAnimationApi
 import androidx.compose.animation.core.tween
 import androidx.compose.animation.fadeIn
 import androidx.compose.animation.fadeOut
@@ -15,12 +11,13 @@ import androidx.compose.runtime.State
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalView
 import androidx.compose.ui.window.DialogProperties
-import androidx.navigation.NavBackStackEntry
+import androidx.hilt.navigation.compose.hiltViewModel
+import androidx.lifecycle.ViewModel
+import androidx.lifecycle.findViewTreeViewModelStoreOwner
 import androidx.navigation.NavController
-import androidx.navigation.NavDestination
 import androidx.navigation.NavDestination.Companion.hierarchy
-import androidx.navigation.NavGraph
 import androidx.navigation.NavGraphBuilder
 import androidx.navigation.NavHostController
 import androidx.navigation.NavType
@@ -32,13 +29,14 @@ import androidx.navigation.navArgument
 import androidx.navigation.navDeepLink
 import com.google.accompanist.navigation.material.bottomSheet
 import com.kafka.reader.ReaderScreen
+import com.kafka.reader.online.OnlineReader
 import com.kafka.search.SearchScreen
 import com.kafka.user.playback.PlaybackViewModel
-import com.sarahang.playback.ui.activityHiltViewModel
 import com.sarahang.playback.ui.sheet.PlaybackSheet
 import org.kafka.base.debug
 import org.kafka.common.extensions.collectEvent
 import org.kafka.homepage.Homepage
+import org.kafka.homepage.recent.RecentScreen
 import org.kafka.item.detail.ItemDetail
 import org.kafka.item.detail.description.DescriptionDialog
 import org.kafka.item.files.Files
@@ -64,17 +62,6 @@ internal fun AppNavigation(
     collectEvent(navigator.queue) { event ->
         when (event) {
             is NavigationEvent.Destination -> {
-                // switch tabs first because of a bug in navigation that doesn't allow
-                // changing tabs when destination is opened from a different tab
-//                event.root?.route?.let {
-//                    navController.navigate(it) {
-//                        popUpTo(navController.graph.findStartDestination().id) {
-//                            saveState = true
-//                        }
-//                        launchSingleTop = true
-//                        restoreState = true
-//                    }
-//                }
                 navController.navigate(event.route)
             }
 
@@ -119,6 +106,8 @@ private fun NavGraphBuilder.addHomeRoot() {
         addLogin(RootScreen.Home)
         addPlayer(RootScreen.Home)
         addWebView(RootScreen.Home)
+        addOnlineReader(RootScreen.Home)
+        addRecentItems(RootScreen.Home)
     }
 }
 
@@ -133,6 +122,8 @@ private fun NavGraphBuilder.addSearchRoot() {
         addFiles(RootScreen.Search)
         addReader(RootScreen.Search)
         addPlayer(RootScreen.Search)
+        addWebView(RootScreen.Search)
+        addOnlineReader(RootScreen.Search)
     }
 }
 
@@ -148,6 +139,8 @@ private fun NavGraphBuilder.addLibraryRoot() {
         addReader(RootScreen.Library)
         addSearch(RootScreen.Library)
         addPlayer(RootScreen.Library)
+        addWebView(RootScreen.Library)
+        addOnlineReader(RootScreen.Library)
     }
 }
 
@@ -187,7 +180,10 @@ private fun NavGraphBuilder.addItemDetail(root: RootScreen) {
     composable(
         Screen.ItemDetail.createRoute(root),
         arguments = listOf(navArgument("itemId") { type = NavType.StringType }),
-        deepLinks = listOf(navDeepLink { uriPattern = "${Config.BASE_URL}item/{itemId}" })
+        deepLinks = listOf(
+            navDeepLink { uriPattern = "${Config.BASE_URL}item/{itemId}" },
+            navDeepLink { uriPattern = "${Config.BASE_URL_ALT}item/{itemId}" },
+        )
     ) {
         ItemDetail()
     }
@@ -232,6 +228,12 @@ private fun NavGraphBuilder.addFeedback(root: RootScreen) {
     }
 }
 
+private fun NavGraphBuilder.addRecentItems(root: RootScreen) {
+    composable(route = Screen.RecentItems.createRoute(root)) {
+        RecentScreen()
+    }
+}
+
 private fun NavGraphBuilder.addWebView(root: RootScreen) {
     composable(
         route = Screen.Web.createRoute(root),
@@ -244,6 +246,15 @@ private fun NavGraphBuilder.addWebView(root: RootScreen) {
     }
 }
 
+private fun NavGraphBuilder.addOnlineReader(root: RootScreen) {
+    composable(
+        route = Screen.OnlineReader.createRoute(root),
+        arguments = listOf(navArgument("itemId") { type = NavType.StringType })
+    ) {
+        OnlineReader()
+    }
+}
+
 // todo: app closes on back from player
 
 @Stable
@@ -266,36 +277,6 @@ internal fun NavController.currentScreenAsState(): State<RootScreen> {
     return selectedItem
 }
 
-@ExperimentalAnimationApi
-private fun AnimatedContentTransitionScope<*>.defaultEnterTransition(
-    initial: NavBackStackEntry,
-    target: NavBackStackEntry,
-): EnterTransition {
-    val initialNavGraph = initial.destination.hostNavGraph
-    val targetNavGraph = target.destination.hostNavGraph
-    // If we're crossing nav graphs (bottom navigation graphs), we crossfade
-    if (initialNavGraph.id != targetNavGraph.id) {
-        return fadeIn()
-    }
-    // Otherwise we're in the same nav graph, we can imply a direction
-    return fadeIn() + slideIntoContainer(AnimatedContentTransitionScope.SlideDirection.Start)
-}
-
-@ExperimentalAnimationApi
-private fun AnimatedContentTransitionScope<*>.defaultExitTransition(
-    initial: NavBackStackEntry,
-    target: NavBackStackEntry,
-): ExitTransition {
-    val initialNavGraph = initial.destination.hostNavGraph
-    val targetNavGraph = target.destination.hostNavGraph
-    // If we're crossing nav graphs (bottom navigation graphs), we crossfade
-    if (initialNavGraph.id != targetNavGraph.id) {
-        return fadeOut()
-    }
-    // Otherwise we're in the same nav graph, we can imply a direction
-    return fadeOut() + slideOutOfContainer(AnimatedContentTransitionScope.SlideDirection.Start)
-}
-
-private val NavDestination.hostNavGraph: NavGraph
-    get() = hierarchy.first { it is NavGraph } as NavGraph
-
+@Composable
+inline fun <reified T : ViewModel> activityHiltViewModel() =
+    hiltViewModel<T>(LocalView.current.findViewTreeViewModelStoreOwner()!!)
diff --git a/app/src/main/java/com/kafka/user/home/Home.kt b/app/src/main/java/com/kafka/user/home/Home.kt
index da3d9459..7a00f6bc 100644
--- a/app/src/main/java/com/kafka/user/home/Home.kt
+++ b/app/src/main/java/com/kafka/user/home/Home.kt
@@ -140,5 +140,5 @@ private fun shouldShowBottomBar(navController: NavController): Boolean {
     val currentRoute by navController.currentBackStackEntryAsState()
     val destination = currentRoute?.destination?.route?.split("/")?.getOrNull(1)
 
-    return destination != "reader"
-}
\ No newline at end of file
+    return destination != "reader" && destination != "reader_online"
+}
diff --git a/app/src/main/java/com/kafka/user/home/bottombar/HomeNavigationBar.kt b/app/src/main/java/com/kafka/user/home/bottombar/HomeNavigationBar.kt
index 10525b31..d62d8812 100644
--- a/app/src/main/java/com/kafka/user/home/bottombar/HomeNavigationBar.kt
+++ b/app/src/main/java/com/kafka/user/home/bottombar/HomeNavigationBar.kt
@@ -3,7 +3,6 @@ package com.kafka.user.home.bottombar
 import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.navigationBars
 import androidx.compose.material3.Icon
-import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.NavigationBar
 import androidx.compose.material3.NavigationBarDefaults
 import androidx.compose.material3.NavigationBarItem
diff --git a/app/src/main/java/com/kafka/user/initializer/Initializers.kt b/app/src/main/java/com/kafka/user/initializer/Initializers.kt
index e6869963..f3591f3f 100644
--- a/app/src/main/java/com/kafka/user/initializer/Initializers.kt
+++ b/app/src/main/java/com/kafka/user/initializer/Initializers.kt
@@ -2,17 +2,16 @@ package com.kafka.user.initializer
 
 import android.app.Application
 import android.util.Log
-import com.google.firebase.FirebaseApp
+import com.google.firebase.Firebase
 import com.google.firebase.crashlytics.FirebaseCrashlytics
-import com.google.firebase.ktx.Firebase
-import com.google.firebase.ktx.initialize
+import com.google.firebase.initialize
 import com.jakewharton.threetenabp.AndroidThreeTen
-import org.kafka.base.AppInitializer
-import org.kafka.base.ProcessLifetime
 import com.kafka.remote.config.RemoteConfig
 import kotlinx.coroutines.CoroutineScope
 import kotlinx.coroutines.launch
+import org.kafka.base.AppInitializer
 import org.kafka.base.CoroutineDispatchers
+import org.kafka.base.ProcessLifetime
 import org.threeten.bp.zone.ZoneRulesProvider
 import timber.log.Timber
 import javax.inject.Inject
@@ -51,7 +50,6 @@ class FirebaseInitializer @Inject constructor(
     override fun init(application: Application) {
         coroutineScope.launch(dispatchers.io) {
             Firebase.initialize(application)
-            FirebaseApp.initializeApp(application)
         }
     }
 }
diff --git a/app/src/main/java/com/kafka/user/initializer/ReaderProgressInitializer.kt b/app/src/main/java/com/kafka/user/initializer/ReaderProgressInitializer.kt
index 3109e06c..50f931a4 100644
--- a/app/src/main/java/com/kafka/user/initializer/ReaderProgressInitializer.kt
+++ b/app/src/main/java/com/kafka/user/initializer/ReaderProgressInitializer.kt
@@ -57,8 +57,9 @@ class ReaderProgressInitializer @Inject constructor(
                 val pages = if (file.isTxt()) readTextFromUri(download.fileUri)
                     .getOrElse { emptyList() } else emptyList()
                 val textFile = recentTextItemMapper.map(download, pages, file)
+                val currentPage = recentTextDao.getOrNull(file.fileId)?.currentPage ?: 1
 
-                recentTextDao.insert(textFile)
+                recentTextDao.insert(textFile.copy(currentPage = currentPage))
             }
         }
     }
diff --git a/app/src/main/java/com/kafka/user/injection/AppModule.kt b/app/src/main/java/com/kafka/user/injection/AppModule.kt
index 55893177..355d052e 100644
--- a/app/src/main/java/com/kafka/user/injection/AppModule.kt
+++ b/app/src/main/java/com/kafka/user/injection/AppModule.kt
@@ -12,11 +12,10 @@ import com.google.firebase.analytics.FirebaseAnalytics
 import com.google.firebase.auth.FirebaseAuth
 import com.google.firebase.firestore.FirebaseFirestore
 import com.google.firebase.messaging.FirebaseMessaging
-import com.kafka.recommendations.FirebaseTopicsInitializer
-import org.kafka.base.AppInitializer
-import com.kafka.recommendations.FirebaseTopics
-import com.kafka.recommendations.FirebaseTopicsImpl
-import org.kafka.base.ProcessLifetime
+import com.kafka.recommendations.topic.FirebaseTopics
+import com.kafka.recommendations.topic.FirebaseTopicsImpl
+import com.kafka.recommendations.topic.FirebaseTopicsInitializer
+import com.kafka.user.BuildConfig
 import com.kafka.user.deeplink.FirebaseDynamicDeepLinkHandler
 import com.kafka.user.initializer.FirebaseInitializer
 import com.kafka.user.initializer.LoggerInitializer
@@ -33,10 +32,13 @@ import dagger.hilt.components.SingletonComponent
 import dagger.multibindings.IntoSet
 import kotlinx.coroutines.CoroutineScope
 import kotlinx.coroutines.Dispatchers
-import org.kafka.analytics.logger.Analytics
 import org.kafka.analytics.AppReviewManager
+import org.kafka.analytics.logger.Analytics
 import org.kafka.analytics.logger.AnalyticsImpl
+import org.kafka.base.AppInitializer
 import org.kafka.base.CoroutineDispatchers
+import org.kafka.base.ProcessLifetime
+import org.kafka.base.SecretsProvider
 import org.kafka.common.image.CoilAppInitializer
 import org.kafka.navigation.deeplink.DynamicDeepLinkHandler
 import org.kafka.notifications.NotificationManager
@@ -69,7 +71,7 @@ class AppModule {
 
     @Singleton
     @Provides
-    fun provideFirebaseMessaging(app: Application): FirebaseMessaging {
+    fun provideFirebaseMessaging(): FirebaseMessaging {
         return FirebaseMessaging.getInstance()
     }
 
@@ -105,6 +107,13 @@ class AppModule {
     @Provides
     fun provideFirestoreKt(firebaseFirestore: FirebaseFirestore) =
         dev.gitlive.firebase.firestore.FirebaseFirestore(firebaseFirestore)
+
+
+    @Provides
+    fun provideGoogleClientIdProvider() = object : SecretsProvider {
+        override val googleServerClientId: String = BuildConfig.GOOGLE_SERVER_CLIENT_ID
+        override val pipelessAuthToken: String = BuildConfig.PIPELESS_AUTH_TOKEN
+    }
 }
 
 @InstallIn(SingletonComponent::class)
diff --git a/app/src/main/java/com/kafka/user/playback/PlaybackViewModel.kt b/app/src/main/java/com/kafka/user/playback/PlaybackViewModel.kt
index 2dccab4a..9924c22e 100644
--- a/app/src/main/java/com/kafka/user/playback/PlaybackViewModel.kt
+++ b/app/src/main/java/com/kafka/user/playback/PlaybackViewModel.kt
@@ -3,6 +3,7 @@ package com.kafka.user.playback
 import androidx.lifecycle.ViewModel
 import androidx.lifecycle.viewModelScope
 import com.kafka.data.dao.FileDao
+import com.kafka.data.model.SearchFilter
 import com.kafka.remote.config.RemoteConfig
 import com.kafka.remote.config.getPlayerTheme
 import com.sarahang.playback.core.PlaybackConnection
@@ -14,6 +15,7 @@ import kotlinx.coroutines.Dispatchers
 import kotlinx.coroutines.launch
 import org.kafka.navigation.Navigator
 import org.kafka.navigation.Screen
+import org.kafka.navigation.Screen.Search.createRoute
 import javax.inject.Inject
 
 @HiltViewModel
@@ -44,7 +46,7 @@ class PlaybackViewModel @Inject constructor(
         viewModelScope.launch {
             val currentRoot = navigator.currentRoot.value
             val creator = playbackConnection.nowPlaying.value.artist
-            navigator.navigate(Screen.Search.createRoute(currentRoot, creator))
+            navigator.navigate(createRoute(currentRoot, creator, SearchFilter.Creator.name))
         }
     }
 }
diff --git a/app/src/main/java/com/kafka/user/playback/PlayerEventListener.kt b/app/src/main/java/com/kafka/user/playback/PlayerEventListener.kt
index 7fdc5eaa..ab74b2c0 100644
--- a/app/src/main/java/com/kafka/user/playback/PlayerEventListener.kt
+++ b/app/src/main/java/com/kafka/user/playback/PlayerEventListener.kt
@@ -1,3 +1,4 @@
+@file:Suppress("ktlint:standard:filename")
 package com.kafka.user.playback
 
 import com.sarahang.playback.core.apis.PlayerEventLogger
diff --git a/app/src/main/java/com/kafka/user/review/AppReviewManager.kt b/app/src/main/java/com/kafka/user/review/AppReviewManagerImpl.kt
similarity index 100%
rename from app/src/main/java/com/kafka/user/review/AppReviewManager.kt
rename to app/src/main/java/com/kafka/user/review/AppReviewManagerImpl.kt
index dd204113..5867fe73 100644
--- a/app/src/main/java/com/kafka/user/review/AppReviewManager.kt
+++ b/app/src/main/java/com/kafka/user/review/AppReviewManagerImpl.kt
@@ -4,11 +4,11 @@ import android.app.Activity
 import android.content.Context
 import androidx.datastore.preferences.core.intPreferencesKey
 import com.google.android.play.core.review.ReviewManagerFactory
-import org.kafka.base.ProcessLifetime
 import com.kafka.data.prefs.PreferencesStore
 import dagger.hilt.android.qualifiers.ApplicationContext
 import kotlinx.coroutines.CoroutineScope
 import org.kafka.analytics.AppReviewManager
+import org.kafka.base.ProcessLifetime
 import org.kafka.base.errorLog
 import javax.inject.Inject
 import javax.inject.Singleton
diff --git a/base/domain/src/main/java/org/kafka/base/Annotations.kt b/base/domain/src/main/java/org/kafka/base/Annotations.kt
index 877f932d..016e1d7e 100644
--- a/base/domain/src/main/java/org/kafka/base/Annotations.kt
+++ b/base/domain/src/main/java/org/kafka/base/Annotations.kt
@@ -1,3 +1,4 @@
+@file:Suppress("ktlint:standard:filename")
 package org.kafka.base
 
 import javax.inject.Qualifier
diff --git a/base/domain/src/main/java/org/kafka/base/SecretsProvider.kt b/base/domain/src/main/java/org/kafka/base/SecretsProvider.kt
new file mode 100644
index 00000000..1d66bbdc
--- /dev/null
+++ b/base/domain/src/main/java/org/kafka/base/SecretsProvider.kt
@@ -0,0 +1,6 @@
+package org.kafka.base
+
+interface SecretsProvider {
+    val googleServerClientId: String?
+    val pipelessAuthToken: String?
+}
diff --git a/base/domain/src/main/java/org/kafka/base/domain/Interactor.kt b/base/domain/src/main/java/org/kafka/base/domain/Interactor.kt
index 41e11252..b97c5a8f 100644
--- a/base/domain/src/main/java/org/kafka/base/domain/Interactor.kt
+++ b/base/domain/src/main/java/org/kafka/base/domain/Interactor.kt
@@ -5,6 +5,7 @@ import kotlinx.coroutines.TimeoutCancellationException
 import kotlinx.coroutines.channels.BufferOverflow
 import kotlinx.coroutines.flow.Flow
 import kotlinx.coroutines.flow.MutableSharedFlow
+import kotlinx.coroutines.flow.MutableStateFlow
 import kotlinx.coroutines.flow.asSharedFlow
 import kotlinx.coroutines.flow.catch
 import kotlinx.coroutines.flow.distinctUntilChanged
@@ -12,9 +13,14 @@ import kotlinx.coroutines.flow.first
 import kotlinx.coroutines.flow.firstOrNull
 import kotlinx.coroutines.flow.flatMapLatest
 import kotlinx.coroutines.flow.flow
+import kotlinx.coroutines.flow.map
 import kotlinx.coroutines.withTimeout
 import timber.log.Timber
 import java.util.concurrent.TimeUnit
+import java.util.concurrent.atomic.AtomicInteger
+import kotlin.coroutines.cancellation.CancellationException
+import kotlin.time.Duration
+import kotlin.time.Duration.Companion.minutes
 
 abstract class Interactor<in P> {
     suspend operator fun invoke(params: P, timeoutMs: Long = defaultTimeoutMs): Flow<InvokeStatus> {
@@ -85,12 +91,49 @@ abstract class SubjectInteractor<P, T> {
     fun errors(): Flow<Throwable> = errorState.asSharedFlow()
 }
 
-abstract class SuspendingWorkInteractor<P : Any, T> : SubjectInteractor<P, T>() {
-    override fun createObservable(params: P): Flow<T> = flow {
-        emit(doWork(params))
+abstract class ResultInteractor<in P, R> {
+    private val count = AtomicInteger(0)
+    private val loadingState = MutableStateFlow(count.get())
+
+    val inProgress: Flow<Boolean> = loadingState.map { it > 0 }.distinctUntilChanged()
+
+    private fun addLoader() {
+        loadingState.value = count.incrementAndGet()
+    }
+
+    private fun removeLoader() {
+        loadingState.value = count.decrementAndGet()
+    }
+
+    suspend operator fun invoke(
+        params: P,
+        timeout: Duration = DefaultTimeout,
+    ): Result<R> = try {
+        addLoader()
+        runCatching {
+            withTimeout(timeout) {
+                doWork(params)
+            }
+        }
+    } finally {
+        removeLoader()
     }
 
-    abstract suspend fun doWork(params: P): T
+    protected abstract suspend fun doWork(params: P): R
+
+    companion object {
+        internal val DefaultTimeout = 5.minutes
+    }
+}
+
+inline fun Result<*>.onException(
+    block: (Throwable) -> Unit,
+) {
+    val e = exceptionOrNull()
+    when {
+        e is CancellationException -> throw e
+        e != null -> block(e)
+    }
 }
 
 operator fun <T> SubjectInteractor<Unit, T>.invoke() = invoke(Unit)
diff --git a/base/domain/src/main/java/org/kafka/base/extensions/StringExtensions.kt b/base/domain/src/main/java/org/kafka/base/extensions/StringExtensions.kt
new file mode 100644
index 00000000..5fc777ca
--- /dev/null
+++ b/base/domain/src/main/java/org/kafka/base/extensions/StringExtensions.kt
@@ -0,0 +1,8 @@
+package org.kafka.base.extensions
+
+import java.net.URLEncoder
+import java.nio.charset.StandardCharsets
+
+fun String.encodeUrl(): String = URLEncoder.encode(this, StandardCharsets.UTF_8.toString())
+
+fun String.encodeUri(): String = android.net.Uri.encode(this)
diff --git a/base/network/src/main/java/org/kafka/base/network/RetrofitExtensions.kt b/base/network/src/main/java/org/kafka/base/network/RetrofitExtensions.kt
index 21a27c61..4bffba59 100644
--- a/base/network/src/main/java/org/kafka/base/network/RetrofitExtensions.kt
+++ b/base/network/src/main/java/org/kafka/base/network/RetrofitExtensions.kt
@@ -1,7 +1,8 @@
+@file:Suppress("ktlint:standard:filename")
+
 package org.kafka.base.network
 
 import android.accounts.NetworkErrorException
-import android.net.http.HttpException
 import kotlinx.coroutines.CoroutineDispatcher
 import kotlinx.coroutines.withContext
 import org.kafka.base.debug
diff --git a/baselineprofile/src/main/java/com/kafka/baseline/profile/StartupBenchmarks.kt b/baselineprofile/src/main/java/com/kafka/baseline/profile/StartupBenchmarks.kt
index 63dedd01..696d4e11 100644
--- a/baselineprofile/src/main/java/com/kafka/baseline/profile/StartupBenchmarks.kt
+++ b/baselineprofile/src/main/java/com/kafka/baseline/profile/StartupBenchmarks.kt
@@ -69,7 +69,7 @@ class StartupBenchmarks {
                 homepageFeed.fling(Direction.UP)
 
                 device.pressBack()
-            }
+            },
         )
     }
 }
diff --git a/build.gradle.kts b/build.gradle.kts
index 0944ff9c..5da8d82f 100644
--- a/build.gradle.kts
+++ b/build.gradle.kts
@@ -32,22 +32,8 @@ allprojects {
         maven(url = "https://androidx.dev/snapshots/latest/artifacts/repository")
     }
 
-    apply(plugin = rootProject.libs.plugins.spotless.get().pluginId)
-    configure<SpotlessExtension> {
-        kotlin {
-            target("**/*.kt")
-            targetExclude("$buildDir/**/*.kt")
-            targetExclude("bin/**/*.kt")
-            ktlint(libs.versions.ktlint.get())
-            licenseHeaderFile(rootProject.file("spotless/copyright.txt"))
-        }
-        kotlinGradle {
-            target("**/*.kts")
-            targetExclude("$buildDir/**/*.kts")
-            ktlint(libs.versions.ktlint.get())
-            licenseHeaderFile(rootProject.file("spotless/copyright.txt"), "(^(?![\\/ ]\\*).*$)")
-        }
-    }
+
+    apply(from = rootProject.file("spotless/spotless.gradle"))
 
     // Configure Java to use our chosen language level. Kotlin will automatically
     // pick this up
diff --git a/core/analytics/src/main/java/org/kafka/analytics/EventRepository.kt b/core/analytics/src/main/java/org/kafka/analytics/EventRepository.kt
index 48107317..7dd03bdd 100644
--- a/core/analytics/src/main/java/org/kafka/analytics/EventRepository.kt
+++ b/core/analytics/src/main/java/org/kafka/analytics/EventRepository.kt
@@ -7,7 +7,7 @@ class EventRepository @Inject constructor() {
     fun searchQuery(keyword: String, filters: List<String>? = null) =
         AnalyticsImpl.SEARCH to mapOf(
             "keyword" to keyword,
-            "filters" to filters?.joinToString()
+            "filters" to filters?.joinToString(),
         )
 
     fun removeRecentSearch(keyword: String) = "remove_recent_search" to mapOf("keyword" to keyword)
@@ -16,81 +16,88 @@ class EventRepository @Inject constructor() {
         "open_item_detail" to mapOf(
             "item_id" to itemId,
             "source" to source,
-            "name" to name
+            "name" to name,
         )
 
     fun playItem(itemId: String, source: String? = null) = "play_item" to mapOf(
         "item_id" to itemId,
-        "source" to source
+        "source" to source,
     )
 
-    fun readItem(itemId: String, source: String? = null) = "read_item" to mapOf(
-        "item_id" to itemId,
-        "source" to source
-    )
+    fun readItem(itemId: String, type: String = "offline", source: String? = null) =
+        "read_item" to mapOf(
+            "item_id" to itemId,
+            "type" to type,
+            "source" to source,
+        )
+
+    fun fileNotSupported(itemId: String) = "file_not_supported" to mapOf("item_id" to itemId)
 
     fun homeTabSwitched(tab: String, source: String? = null) = "home_tab_switched" to mapOf(
         "tab" to tab,
-        "source" to source
+        "source" to source,
     )
 
     fun addFavorite(itemId: String, source: String? = null) = "add_favorite" to mapOf(
         "item_id" to itemId,
-        "source" to source
+        "source" to source,
     )
 
     fun removeFavorite(itemId: String, source: String? = null) = "remove_favorite" to mapOf(
         "item_id" to itemId,
-        "source" to source
+        "source" to source,
     )
 
     fun openFiles(itemId: String) = "open_files" to mapOf(
-        "item_id" to itemId
+        "item_id" to itemId,
     )
 
     fun downloadFile(fileId: String, itemId: String) = "download_file" to mapOf(
         "item_id" to itemId,
-        "file_id" to fileId
+        "file_id" to fileId,
     )
 
     fun addRecentItem(itemId: String, title: String? = null) = "add_recent_item" to mapOf(
         "item_id" to itemId,
-        "title" to title
+        "title" to title,
     )
 
     fun openRecentItem(itemId: String, title: String? = null) = "open_recent_item" to mapOf(
         "item_id" to itemId,
-        "title" to title
+        "title" to title,
     )
 
     fun openSubject(subject: String, source: String? = null) = "open_subject" to mapOf(
         "subject" to subject,
-        "source" to source
+        "source" to source,
     )
 
     fun removeRecentItem(itemId: String, title: String? = null) = "remove_recent_item" to mapOf(
         "item_id" to itemId,
-        "title" to title
+        "title" to title,
     )
 
     fun openLogin() = "open_login" to mapOf<String, String>()
 
     fun signUp(name: String?) = AnalyticsImpl.SIGN_UP to mapOf(
-        "name" to name
+        "name" to name,
     )
 
     fun login(method: String = "email") = AnalyticsImpl.LOGIN to mapOf(
-        AnalyticsImpl.PARAM_METHOD to method
+        AnalyticsImpl.PARAM_METHOD to method,
     )
 
     fun logoutClicked() = "logout_clicked" to mapOf<String, String>()
 
-    fun shareItem(itemId: String) = "share_item" to mapOf("item_id" to itemId)
+    fun shareItem(itemId: String, source: String) = "share_item" to mapOf(
+        "item_id" to itemId,
+        "source" to source
+    )
 
     fun openArchiveItem(itemId: String) = "open_archive_item" to mapOf("item_id" to itemId)
 
     fun setDownloadLocation(location: String) = "set_download_location" to mapOf(
-        "location" to location
+        "location" to location,
     )
 
     fun resetDownloadLocation() = "reset_download_location" to mapOf<String, String>()
@@ -98,4 +105,14 @@ class EventRepository @Inject constructor() {
     fun forgotPasswordSuccess() = "forgot_password_success" to mapOf<String, String>()
 
     fun themeChanged(theme: String) = "theme_changed" to mapOf("theme" to theme)
+
+    fun trueContrastChanged(trueContrast: Boolean) = "true_contrast_changed" to mapOf(
+        "true_contrast" to trueContrast.toString()
+    )
+
+    fun safeModeChanged(enabled: Boolean) = "safe_mode_changed" to mapOf(
+        "safe_mode_content" to enabled.toString()
+    )
+
+    fun openRecentItems() = "open_recent_items" to mapOf<String, String>()
 }
diff --git a/core/analytics/src/main/java/org/kafka/analytics/data/UserDataRepository.kt b/core/analytics/src/main/java/org/kafka/analytics/data/UserDataRepository.kt
index a132f175..5c3b0762 100644
--- a/core/analytics/src/main/java/org/kafka/analytics/data/UserDataRepository.kt
+++ b/core/analytics/src/main/java/org/kafka/analytics/data/UserDataRepository.kt
@@ -9,7 +9,7 @@ import javax.inject.Inject
 
 class UserDataRepository @Inject constructor(
     @ApplicationContext private val context: Context,
-    private val firebaseAuth: FirebaseAuth
+    private val firebaseAuth: FirebaseAuth,
 ) {
     fun getUserData(): UserData =
         UserData(userId = firebaseAuth.currentUser?.uid, country = getUserCountry())
diff --git a/core/analytics/src/main/java/org/kafka/analytics/logger/AnalyticsImpl.kt b/core/analytics/src/main/java/org/kafka/analytics/logger/AnalyticsImpl.kt
index 0c381935..b6a9c146 100644
--- a/core/analytics/src/main/java/org/kafka/analytics/logger/AnalyticsImpl.kt
+++ b/core/analytics/src/main/java/org/kafka/analytics/logger/AnalyticsImpl.kt
@@ -79,25 +79,28 @@ class AnalyticsImpl @Inject constructor(
     }
 
     private fun trackMixpanelScreenView(label: String, route: String?, arguments: Any?) {
-        mixPanel.track("screen_view", JSONObject().apply {
-            put("screen_name", label)
-            if (route != null) put("screen_route", route)
-
-            // Expand out the rest of the parameters
-            when {
-                arguments is Bundle -> {
-                    for (key in arguments.keySet()) {
-                        val value = arguments.getString(key).toString()
-                        // We don't want to include the label or route twice
-                        if (value == label || value == route) continue
-
-                        put("screen_arg_$key", value)
+        mixPanel.track(
+            "screen_view",
+            JSONObject().apply {
+                put("screen_name", label)
+                if (route != null) put("screen_route", route)
+
+                // Expand out the rest of the parameters
+                when {
+                    arguments is Bundle -> {
+                        for (key in arguments.keySet()) {
+                            val value = arguments.getString(key).toString()
+                            // We don't want to include the label or route twice
+                            if (value == label || value == route) continue
+
+                            put("screen_arg_$key", value)
+                        }
                     }
-                }
 
-                arguments != null -> put("screen_arg", arguments.toString())
-            }
-        })
+                    arguments != null -> put("screen_arg", arguments.toString())
+                }
+            },
+        )
     }
 
     companion object {
diff --git a/core/downloader/build.gradle b/core/downloader/build.gradle
index 5a6f6580..1d84c985 100644
--- a/core/downloader/build.gradle
+++ b/core/downloader/build.gradle
@@ -18,9 +18,11 @@ dependencies {
 	implementation libs.hilt.android
 
 	implementation project(':core:analytics')
+	implementation project(':core:remote-config')
 	implementation project(':data:repo')
 	implementation project(':ui:common')
 	implementation libs.fetch
+	implementation libs.fetch.okhttp
 
 	kapt libs.hilt.compiler
 }
diff --git a/core/downloader/src/main/java/tm/alashow/datmusic/downloader/AudioExtensions.kt b/core/downloader/src/main/java/tm/alashow/datmusic/downloader/AudioExtensions.kt
index 735f6ed7..9d659410 100644
--- a/core/downloader/src/main/java/tm/alashow/datmusic/downloader/AudioExtensions.kt
+++ b/core/downloader/src/main/java/tm/alashow/datmusic/downloader/AudioExtensions.kt
@@ -35,8 +35,9 @@ fun File.createDocumentFile(parent: DocumentFile): DocumentFile {
 }
 
 fun File.documentFile(parent: DocumentFile): DocumentFile {
-    if (!parent.exists())
+    if (!parent.exists()) {
         throw FileNotFoundException("Parent folder doesn't exist")
+    }
 
     val mainArtist = creator ?: "Unknown"
     val artistFolder = parent.getOrCreateDir(mainArtist)
diff --git a/core/downloader/src/main/java/tm/alashow/datmusic/downloader/DownloadInitializer.kt b/core/downloader/src/main/java/tm/alashow/datmusic/downloader/DownloadInitializer.kt
index 8a4fa9d2..3498392c 100644
--- a/core/downloader/src/main/java/tm/alashow/datmusic/downloader/DownloadInitializer.kt
+++ b/core/downloader/src/main/java/tm/alashow/datmusic/downloader/DownloadInitializer.kt
@@ -28,7 +28,7 @@ class DownloadInitializer @Inject constructor(
     private val downloadsRepository: DownloadsRepository,
     private val fileDao: FileDao,
     private val itemDao: ItemDao,
-    private val downloadRequestsDao: DownloadRequestsDao
+    private val downloadRequestsDao: DownloadRequestsDao,
 ) : AppInitializer {
     override fun init(application: Application) {
         coroutineScope.launch(dispatchers.io) {
@@ -75,5 +75,5 @@ fun Download.asDownloadItem(file: File, item: Item) = DownloadItem(
     itemTitle = item.title.orEmpty(),
     creator = item.creator?.name.orEmpty(),
     mediaType = item.mediaType.orEmpty(),
-    coverImage = item.coverImage.orEmpty()
+    coverImage = item.coverImage.orEmpty(),
 )
diff --git a/core/downloader/src/main/java/tm/alashow/datmusic/downloader/DownloadItem.kt b/core/downloader/src/main/java/tm/alashow/datmusic/downloader/DownloadItem.kt
index b4ed3177..6dbe659a 100644
--- a/core/downloader/src/main/java/tm/alashow/datmusic/downloader/DownloadItem.kt
+++ b/core/downloader/src/main/java/tm/alashow/datmusic/downloader/DownloadItem.kt
@@ -10,12 +10,12 @@ import com.tonyodev.fetch2.database.DownloadInfo
 
 sealed class DownloadItem(
     open val downloadRequest: DownloadRequest,
-    open val downloadInfo: Download
+    open val downloadInfo: Download,
 )
 
 data class FileDownloadItem(
     override val downloadRequest: DownloadRequest,
-    override val downloadInfo: Download
+    override val downloadInfo: Download,
 ) : DownloadItem(downloadRequest, downloadInfo) {
     companion object {
         fun from(downloadRequest: DownloadRequest, downloadInfo: Download? = null) =
diff --git a/core/downloader/src/main/java/tm/alashow/datmusic/downloader/DownloadMessage.kt b/core/downloader/src/main/java/tm/alashow/datmusic/downloader/DownloadMessage.kt
index 68b4b73e..eb83b134 100644
--- a/core/downloader/src/main/java/tm/alashow/datmusic/downloader/DownloadMessage.kt
+++ b/core/downloader/src/main/java/tm/alashow/datmusic/downloader/DownloadMessage.kt
@@ -13,7 +13,7 @@ sealed class DownloadMessage<T : Any>(open val value: T) {
     data class Error(override val value: Throwable) : DownloadMessage<Throwable>(value)
 }
 
-fun <T: Any> DownloadMessage<T>.toUiMessage(): UiMessage = when (this) {
+fun <T : Any> DownloadMessage<T>.toUiMessage(): UiMessage = when (this) {
     is DownloadMessage.Plain -> UiMessage.Plain(this.value)
     is DownloadMessage.Resource -> UiMessage.Resource(this.value, this.formatArgs)
     is DownloadMessage.Error -> UiMessage.Error(this.value)
diff --git a/core/downloader/src/main/java/tm/alashow/datmusic/downloader/DownloaderImpl.kt b/core/downloader/src/main/java/tm/alashow/datmusic/downloader/DownloaderImpl.kt
index 18a21780..347251fd 100644
--- a/core/downloader/src/main/java/tm/alashow/datmusic/downloader/DownloaderImpl.kt
+++ b/core/downloader/src/main/java/tm/alashow/datmusic/downloader/DownloaderImpl.kt
@@ -46,7 +46,7 @@ internal class DownloaderImpl @Inject constructor(
     private val repo: DownloadRequestsDao,
     private val fileDao: FileDao,
     private val analytics: Analytics,
-    private val snackbarManager: SnackbarManager
+    private val snackbarManager: SnackbarManager,
 ) : Downloader {
 
     companion object {
@@ -91,8 +91,9 @@ internal class DownloaderImpl @Inject constructor(
     override suspend fun enqueueFile(file: FileEntity): Boolean {
         Timber.d("Enqueue audio: $file")
         val downloadRequest = DownloadRequest.fromAudio(file)
-        if (!validateNewAudioRequest(downloadRequest))
+        if (!validateNewAudioRequest(downloadRequest)) {
             return false
+        }
 
         // save audio to db so Downloads won't depend on given audios existence in audios table
         fileDao.insert(file)
@@ -186,6 +187,7 @@ internal class DownloaderImpl @Inject constructor(
     }
 
     private suspend fun enqueueDownloadRequest(downloadRequest: DownloadRequest, request: Request): DownloadEnqueueResult<Request> {
+        debug { "Enqueueing download request: $request" }
         val enqueueResult = fetcher.enqueue(request)
 
         if (enqueueResult is DownloadEnqueueSuccessful) {
@@ -236,14 +238,15 @@ internal class DownloaderImpl @Inject constructor(
      */
     override suspend fun getAudioDownload(
         audioId: String,
-        vararg allowedStatuses: Status
+        vararg allowedStatuses: Status,
     ): Optional<FileDownloadItem> {
         if (repo.exists(audioId) > 0) {
             val request = repo.entry(audioId).first()
             val downloadInfo = fetcher.getDownload(request.requestId)
             if (downloadInfo != null) {
-                if (downloadInfo.status in allowedStatuses)
+                if (downloadInfo.status in allowedStatuses) {
                     return Optional.of(FileDownloadItem.from(request, downloadInfo))
+                }
             }
         }
         return Optional.empty()
@@ -257,9 +260,11 @@ internal class DownloaderImpl @Inject constructor(
     }
 
     override val downloadLocation = downloadsLocationUri.map {
-        if (it.isPresent)
+        if (it.isPresent) {
             getPathFromUri(it.get())
-        else null
+        } else {
+            null
+        }
     }
 
     override val hasDownloadsLocation = downloadsLocationUri.map { it.isPresent }
@@ -306,7 +311,7 @@ internal class DownloaderImpl @Inject constructor(
         if (current.isPresent) {
             appContext.contentResolver.releasePersistableUriPermission(
                 current.get(),
-                INTENT_READ_WRITE_FLAG
+                INTENT_READ_WRITE_FLAG,
             )
         }
         preferences.save(DOWNLOADS_LOCATION, "")
@@ -323,7 +328,9 @@ internal class DownloaderImpl @Inject constructor(
                     .firstOrNull { it.uri == uri && it.isWritePermission && it.isReadPermission } != null
             if (!writeableAndReadable) {
                 requestNewDownloadsLocation()
-            } else return uri
+            } else {
+                return uri
+            }
         }
 
         return null
@@ -352,7 +359,7 @@ internal class DownloaderImpl @Inject constructor(
 
     private fun fileExistsFromPreviousSession(
         downloadLocationUri: Uri,
-        fileName: String
+        fileName: String,
     ): Boolean {
         val downloadsLocationFolder = downloadLocationUri.toDocumentFile(appContext)
         val file = downloadsLocationFolder.findFile(fileName)
diff --git a/core/downloader/src/main/java/tm/alashow/datmusic/downloader/DownloaderModule.kt b/core/downloader/src/main/java/tm/alashow/datmusic/downloader/DownloaderModule.kt
index 0eed9d9e..91f66637 100644
--- a/core/downloader/src/main/java/tm/alashow/datmusic/downloader/DownloaderModule.kt
+++ b/core/downloader/src/main/java/tm/alashow/datmusic/downloader/DownloaderModule.kt
@@ -5,6 +5,8 @@
 package tm.alashow.datmusic.downloader
 
 import android.content.Context
+import com.kafka.remote.config.RemoteConfig
+import com.kafka.remote.config.downloaderType
 import com.tonyodev.fetch2.Fetch
 import com.tonyodev.fetch2.FetchConfiguration
 import com.tonyodev.fetch2.FetchNotificationManager
@@ -29,7 +31,7 @@ class DownloaderModule {
     @Provides
     @Singleton
     fun fetchNotificationManager(
-        @ApplicationContext context: Context
+        @ApplicationContext context: Context,
     ): FetchNotificationManager = DownloaderNotificationManager(context)
 
     @Provides
@@ -37,8 +39,15 @@ class DownloaderModule {
     fun provideFetch(
         @ApplicationContext context: Context,
         @Named("downloader") okHttpClient: OkHttpClient,
-        notificationManager: FetchNotificationManager
+        notificationManager: FetchNotificationManager,
+        remoteConfig: RemoteConfig,
     ): Fetch {
+        val downloaderType = if (remoteConfig.downloaderType() == "parallel") {
+            FetchDownloader.FileDownloaderType.PARALLEL
+        } else {
+            FetchDownloader.FileDownloaderType.SEQUENTIAL
+        }
+
         val fetcherConfig = FetchConfiguration.Builder(context)
             .setNamespace("downloads")
             .setDownloadConcurrentLimit(1)
@@ -46,11 +55,9 @@ class DownloaderModule {
             .enableRetryOnNetworkGain(true)
             .enableAutoStart(true)
             .setNotificationManager(notificationManager)
-            .setHttpDownloader(OkHttpDownloader(okHttpClient, FetchDownloader.FileDownloaderType.SEQUENTIAL))
+            .setHttpDownloader(OkHttpDownloader(okHttpClient, downloaderType))
             .build()
         Fetch.Impl.setDefaultInstanceConfiguration(fetcherConfig)
         return Fetch.Impl.getInstance(fetcherConfig)
     }
-
-
 }
diff --git a/core/downloader/src/main/java/tm/alashow/datmusic/downloader/DownloaderNotificationManager.kt b/core/downloader/src/main/java/tm/alashow/datmusic/downloader/DownloaderNotificationManager.kt
index 82cc0c82..6a528987 100644
--- a/core/downloader/src/main/java/tm/alashow/datmusic/downloader/DownloaderNotificationManager.kt
+++ b/core/downloader/src/main/java/tm/alashow/datmusic/downloader/DownloaderNotificationManager.kt
@@ -32,7 +32,7 @@ class DownloaderNotificationManager(private val context: Context) :
 
     override fun getActionPendingIntent(
         downloadNotification: DownloadNotification,
-        actionType: DownloadNotification.ActionType
+        actionType: DownloadNotification.ActionType,
     ): PendingIntent {
         val intent = Intent(notificationManagerAction)
         intent.putExtra(EXTRA_NAMESPACE, downloadNotification.namespace)
@@ -53,7 +53,7 @@ class DownloaderNotificationManager(private val context: Context) :
             context,
             downloadNotification.notificationId + action,
             intent,
-            PendingIntent.FLAG_UPDATE_CURRENT or PendingIntent.FLAG_IMMUTABLE // all this overriding just to add this flag
+            PendingIntent.FLAG_UPDATE_CURRENT or PendingIntent.FLAG_IMMUTABLE, // all this overriding just to add this flag
         )
     }
 
@@ -67,7 +67,7 @@ class DownloaderNotificationManager(private val context: Context) :
                     title
                 }
             },
-            context
+            context,
         )
     }
 }
diff --git a/core/downloader/src/main/java/tm/alashow/datmusic/downloader/manager/FetchDownloadManager.kt b/core/downloader/src/main/java/tm/alashow/datmusic/downloader/manager/FetchDownloadManager.kt
index dec85419..a7e50e09 100644
--- a/core/downloader/src/main/java/tm/alashow/datmusic/downloader/manager/FetchDownloadManager.kt
+++ b/core/downloader/src/main/java/tm/alashow/datmusic/downloader/manager/FetchDownloadManager.kt
@@ -1,7 +1,3 @@
-/*
- * Copyright (C) 2022, Alashov Berkeli
- * All rights reserved.
- */
 package tm.alashow.datmusic.downloader.manager
 
 import com.tonyodev.fetch2.AbstractFetchListener
@@ -49,10 +45,10 @@ class FetchDownloadManager @Inject constructor(
                 continuation.resume(
                     DownloadEnqueueFailed(
                         error.throwable
-                            ?: IOException("Download error: ${error.name}, code=${error.value}")
-                    )
+                            ?: IOException("Download error: ${error.name}, code=${error.value}"),
+                    ),
                 )
-            }
+            },
         )
     }
 
@@ -126,58 +122,58 @@ class FetchDownloadManager @Inject constructor(
 }
 
 // Note: Currently not used
- sealed class Downloadable(
-    val download: Download
- )
+sealed class Downloadable(
+    val download: Download,
+)
 
- object DownloadUninitialized : Downloadable(DownloadInfo())
+object DownloadUninitialized : Downloadable(DownloadInfo())
 
- class DownloadCompleted(
-    download: Download
- ) : Downloadable(download)
+class DownloadCompleted(
+    download: Download,
+) : Downloadable(download)
 
- class DownloadAdded(
-    download: Download
- ) : Downloadable(download)
+class DownloadAdded(
+    download: Download,
+) : Downloadable(download)
 
- class DownloadResumed(
-    download: Download
- ) : Downloadable(download)
+class DownloadResumed(
+    download: Download,
+) : Downloadable(download)
 
- class DownloadPaused(
-    download: Download
- ) : Downloadable(download)
+class DownloadPaused(
+    download: Download,
+) : Downloadable(download)
 
- class DownloadCanceled(
-    download: Download
- ) : Downloadable(download)
+class DownloadCanceled(
+    download: Download,
+) : Downloadable(download)
 
- class DownloadRemoved(
-    download: Download
- ) : Downloadable(download)
+class DownloadRemoved(
+    download: Download,
+) : Downloadable(download)
 
- class DownloadDeleted(
-    download: Download
- ) : Downloadable(download)
+class DownloadDeleted(
+    download: Download,
+) : Downloadable(download)
 
- class DownloadQueued(
+class DownloadQueued(
     download: Download,
-    val waitingOnNetwork: Boolean
- ) : Downloadable(download)
+    val waitingOnNetwork: Boolean,
+) : Downloadable(download)
 
- class DownloadError(
+class DownloadError(
     download: Download,
     val error: Error,
-    val throwable: Throwable?
- ) : Downloadable(download)
+    val throwable: Throwable?,
+) : Downloadable(download)
 
- class DownloadProgress(
+class DownloadProgress(
     download: Download,
     val etaInMilliSeconds: Long,
-    val downloadedBytesPerSecond: Long
- ) : Downloadable(download)
+    val downloadedBytesPerSecond: Long,
+) : Downloadable(download)
 
- fun createFetchListener(fetch: Fetch): Flow<Downloadable?> = callbackFlow {
+fun createFetchListener(fetch: Fetch): Flow<Downloadable?> = callbackFlow {
     val fetchListener = object : AbstractFetchListener() {
         override fun onAdded(download: Download) {
             super.onAdded(download)
@@ -228,4 +224,4 @@ class FetchDownloadManager @Inject constructor(
     awaitClose {
         fetch.removeListener(fetchListener)
     }
- }
+}
diff --git a/core/downloader/src/main/java/tm/alashow/datmusic/downloader/mapper/DownloadInfoMapper.kt b/core/downloader/src/main/java/tm/alashow/datmusic/downloader/mapper/DownloadInfoMapper.kt
index 342b9137..90eca7aa 100644
--- a/core/downloader/src/main/java/tm/alashow/datmusic/downloader/mapper/DownloadInfoMapper.kt
+++ b/core/downloader/src/main/java/tm/alashow/datmusic/downloader/mapper/DownloadInfoMapper.kt
@@ -57,7 +57,7 @@ class DownloadInfoMapper @Inject constructor() {
             Locale.ENGLISH,
             "%.1f %sB",
             this / unit.toDouble().pow(exp.toDouble()),
-            pre
+            pre,
         )
     }
 }
diff --git a/core/downloader/src/main/java/tm/alashow/datmusic/downloader/observers/ObserveDownloads.kt b/core/downloader/src/main/java/tm/alashow/datmusic/downloader/observers/ObserveDownloads.kt
index a2d25844..4a7bc407 100644
--- a/core/downloader/src/main/java/tm/alashow/datmusic/downloader/observers/ObserveDownloads.kt
+++ b/core/downloader/src/main/java/tm/alashow/datmusic/downloader/observers/ObserveDownloads.kt
@@ -32,7 +32,7 @@ class ObserveDownloads @Inject constructor(
     }
 
     private fun fetcherDownloads(
-        downloadRequests: List<DownloadRequest> = emptyList()
+        downloadRequests: List<DownloadRequest> = emptyList(),
     ): Flow<List<Pair<DownloadRequest, Download>>> = flow {
         val requestsById = downloadRequests.associateBy { it.requestId }
         while (true) {
diff --git a/core/recommendation/src/main/java/com/kafka/recommendations/FirebaseTopics.kt b/core/recommendation/src/main/java/com/kafka/recommendations/topic/FirebaseTopics.kt
similarity index 95%
rename from core/recommendation/src/main/java/com/kafka/recommendations/FirebaseTopics.kt
rename to core/recommendation/src/main/java/com/kafka/recommendations/topic/FirebaseTopics.kt
index 69862221..62fa7633 100644
--- a/core/recommendation/src/main/java/com/kafka/recommendations/FirebaseTopics.kt
+++ b/core/recommendation/src/main/java/com/kafka/recommendations/topic/FirebaseTopics.kt
@@ -1,4 +1,4 @@
-package com.kafka.recommendations
+package com.kafka.recommendations.topic
 
 import androidx.datastore.preferences.core.stringSetPreferencesKey
 import com.google.firebase.messaging.FirebaseMessaging
@@ -23,7 +23,7 @@ interface FirebaseTopics {
 class FirebaseTopicsImpl @Inject constructor(
     @ProcessLifetime private val processScope: CoroutineScope,
     private val firebaseMessaging: FirebaseMessaging,
-    private val preferencesStore: PreferencesStore
+    private val preferencesStore: PreferencesStore,
 ) : FirebaseTopics {
     private val topicsFlow =
         preferencesStore.data.map { it[topicPreferenceKey] ?: emptySet() }
diff --git a/core/recommendation/src/main/java/com/kafka/recommendations/FirebaseTopicsInitializer.kt b/core/recommendation/src/main/java/com/kafka/recommendations/topic/FirebaseTopicsInitializer.kt
similarity index 81%
rename from core/recommendation/src/main/java/com/kafka/recommendations/FirebaseTopicsInitializer.kt
rename to core/recommendation/src/main/java/com/kafka/recommendations/topic/FirebaseTopicsInitializer.kt
index d971126c..b58019ca 100644
--- a/core/recommendation/src/main/java/com/kafka/recommendations/FirebaseTopicsInitializer.kt
+++ b/core/recommendation/src/main/java/com/kafka/recommendations/topic/FirebaseTopicsInitializer.kt
@@ -1,4 +1,4 @@
-package com.kafka.recommendations
+package com.kafka.recommendations.topic
 
 import android.app.Application
 import org.kafka.analytics.data.UserDataRepository
@@ -7,7 +7,7 @@ import javax.inject.Inject
 
 class FirebaseTopicsInitializer @Inject constructor(
     private val firebaseTopics: FirebaseTopics,
-    private val userDataRepository: UserDataRepository
+    private val userDataRepository: UserDataRepository,
 ) : AppInitializer {
     override fun init(application: Application) {
         userDataRepository.getUserCountry()?.let { firebaseTopics.subscribeToTopic(it) }
diff --git a/core/remote-config/src/main/java/com/kafka/remote/config/RemoteConfigExtensions.kt b/core/remote-config/src/main/java/com/kafka/remote/config/RemoteConfigExtensions.kt
index b413ae92..e5060d7b 100644
--- a/core/remote-config/src/main/java/com/kafka/remote/config/RemoteConfigExtensions.kt
+++ b/core/remote-config/src/main/java/com/kafka/remote/config/RemoteConfigExtensions.kt
@@ -2,8 +2,19 @@ package com.kafka.remote.config
 
 const val REMOTE_CONFIG_PLAYER_THEME_KEY = "player_theme"
 const val IS_SHARE_ENABLED = "is_share_enabled"
+const val DOWNLOADER_TYPE = "downloader_type"
+const val GOOGLE_LOGIN_ENABLED = "google_login_enabled"
+const val RECOMMENDATION_ENABLED = "recommendation_data_enabled"
+const val ONLINE_READER_ENABLED = "online_reader_enabled"
 
 fun RemoteConfig.getPlayerTheme() = get(REMOTE_CONFIG_PLAYER_THEME_KEY)
 
 fun RemoteConfig.isShareEnabled() = getBoolean(IS_SHARE_ENABLED)
 
+fun RemoteConfig.downloaderType() = get(DOWNLOADER_TYPE)
+
+fun RemoteConfig.isGoogleLoginEnabled() = getBoolean(GOOGLE_LOGIN_ENABLED)
+
+fun RemoteConfig.isRecommendationEnabled() = getBoolean(RECOMMENDATION_ENABLED)
+
+fun RemoteConfig.isOnlineReaderEnabled() = getBoolean(ONLINE_READER_ENABLED)
diff --git a/data/database/build.gradle b/data/database/build.gradle
index 5796a5fc..a5dcdca3 100644
--- a/data/database/build.gradle
+++ b/data/database/build.gradle
@@ -6,9 +6,8 @@ plugins {
     id 'kotlin-kapt'
     id 'kotlinx-serialization'
 }
-
-room {
-    schemaLocationDir.set(file("$projectDir/schemas"))
+ksp {
+    arg("room.schemaLocation", "$projectDir/schemas")
 }
 
 kapt {
diff --git a/data/database/src/main/java/com/kafka/data/dao/RecentTextDao.kt b/data/database/src/main/java/com/kafka/data/dao/RecentTextDao.kt
index fa90cee3..45e44612 100644
--- a/data/database/src/main/java/com/kafka/data/dao/RecentTextDao.kt
+++ b/data/database/src/main/java/com/kafka/data/dao/RecentTextDao.kt
@@ -11,6 +11,9 @@ abstract class RecentTextDao : EntityDao<RecentTextItem> {
     @Query("select * from recent_text where fileId = :fileId")
     abstract fun observe(fileId: String): Flow<RecentTextItem>
 
+    @Query("select * from recent_text where fileId = :fileId")
+    abstract fun getOrNull(fileId: String): RecentTextItem?
+
     @Query("update recent_text set currentPage = :currentPage where fileId = :fileId")
     abstract suspend fun updateCurrentPage(fileId: String, currentPage: Int)
 }
diff --git a/data/database/src/main/java/com/kafka/data/dao/SearchDao.kt b/data/database/src/main/java/com/kafka/data/dao/SearchDao.kt
deleted file mode 100644
index f20f3fd9..00000000
--- a/data/database/src/main/java/com/kafka/data/dao/SearchDao.kt
+++ /dev/null
@@ -1,16 +0,0 @@
-package com.kafka.data.dao
-
-import androidx.room.Dao
-import androidx.room.Query
-import com.kafka.data.entities.Item
-import kotlinx.coroutines.flow.Flow
-
-/**
- * @author Vipul Kumar; dated 29/11/18.
- */
-@Dao
-abstract class SearchDao : EntityDao<Item> {
-
-    @Query("select * from Item where creator_name = :creator order by title")
-    abstract fun searchItemsFlow(creator: String): Flow<List<Item>>
-}
diff --git a/data/database/src/main/java/com/kafka/data/db/FakeDatabase.kt b/data/database/src/main/java/com/kafka/data/db/FakeDatabase.kt
deleted file mode 100644
index ae184921..00000000
--- a/data/database/src/main/java/com/kafka/data/db/FakeDatabase.kt
+++ /dev/null
@@ -1,148 +0,0 @@
-package com.kafka.data.db
-
-val urduPoetry =
-    """ghazals_ghalib_0809_librivox, DeewanGalib, ghalibmujmuanasrur, divaneghalib-v3, divaneghalib-v4, 
-        ghazaliyatifarsi, gul-e-rana, KuliyatEMeerTaqi, KalaamEMirMirTaqiMir, 
-        PehliBarishNasirKazmi, 
-        MirzaGhalib-AHundredMoods, ShaidByJaunElia, YaniByJaunElia, LekinByJaunElia, FarnoodByJaunElia, Kulyat-e-Iqbal, 
-        dli.granth.78286, DeewaneKhwajaMirDard_201310, DeewaneKhwajaMirDard, in.ernet.dli.2015.409582, kulliyatizauq, 
-        Kulliyat-e-Dagh, KulyaatEMajeedAmjadRozERafta, 
-        in.ernet.dli.2015.398567, 
-        in.ernet.dli.2015.397992, 
-        naqshifaryadi00faizuoft, UrduKiAakhriKitab, 
-        KulliyatEIqbalFarsiWithUrduTranslation, 
-        balijibril00iqba, bangidara00iqbauoft, AksEKhushboo, Triveniyan-Hindi-Gulzar, 
-        in.ernet.dli.2015.450541, duniyamereaagenidafazli""".trimIndent()
-
-const val englishProse =
-    "shakespeare_sonnets_ch, romeo_and_juliet_librivox, macbeth_0810_librivox, " +
-            "crime_and_punishment_0902_librivox, notes_from_the_underground, idiot_mg_librivox, " +
-            "gambler_1011_librivox, dostoyevskyshortstories_1310_librivox, " +
-            "dostoevsky_short_stories_2001_librivox, " +
-            "metamorphosis_librivox, " +
-            "metamorphosis_1401_librivox, ACountryDoctor, annakarenina1_1011_librivox, " +
-            "whatibelieve_1101_librivox, war_and_peace_vol1_dole_mas_librivox, " +
-            "TheHobbitEnhancedEditionJ.R.R.Tolkien, TheHobbit_201810, fellowshipofringtol00tolk, Orwell1984preywo, " +
-            "poe_poems_stl_librivox"
-
-const val englishPoetry =
-    "john_keats_selected_poems_lw_librivox, " +
-            "poems_wm_blake_ss_librivox, wandered_lonely_as_a_cloud_librivox, " +
-            "poe_poems_stl_librivox, " +
-            "journalsofsylvia00plat_0, poems00ange, songflunguptohea00ange_0, " +
-            "shelleypoems_lw_librivox, " +
-            "music_0802_librivox"
-
-const val devnagri =
-    "masoomtopishuklahindiedition, neemkapedhindiedition, rahimasumrazaautobioh, mantokiutkrishtkahaniyan, " +
-            "ekpremkahanisaadathasanmanto_201907, mantomeenabazarhindiedition, mantothandaghoshtauranyakahaniyaanhindiedition_202002, " +
-            "tobateksinghetc, " +
-            "ibne-insha-OK_compressed, PanchParmeshwar-Hindi, " +
-            "COLLECTIONOFBESTSTORIESPREMCHAND, premchandshatranjkekhiladiauranyakahaniyaanhindi, premchandnirmalahindi, " +
-            "NAMAK, ankhondekhapakistanhindi, hindustanigazlenkamleshwar, " +
-            "srinkhalakikadiyanhindi, bachchandochattaneinhindiedition, harivanshmerishreshthakavitayenhindi, " +
-            "renu_compressed, khattarkaka, mohanrakeshmeripriyakahaniyaanhindi, ashadkaekdinhindi, nirmalvermameripriyakahaniyaanhindi, " +
-            "jaise-unke-din-phire, sobtimitromarjanihindi, in.ernet.dli.2015.342236, Kavyanjali, suryakaa"
-
-const val urduProse =
-    "lajwanti-l-l-l-rajinder-singh-bedi, Urdu-Ki-Aakhri-Kitab-By-Ibn-e-Insha, UrduKiAakhriKitab, Khomar-E-Gundom-By-Ibn-e-Insha, " +
-            "Chalte-Ho-To-Cheen-Ko-Chaliye-By-Ibn-E-Insha, Dunya-Goal-Hai-By-Ibn-e-Insha, App-Say-Kaya-Parda-By-Ibn-e-Insha, " +
-            "KhoyaPaani-Hindi-MushtaqAhmedYusufi, DhanYatra-Hindi-MushtaqAhmedYusufi, MereMunhMeKhaak-Hindi-MushtaqAhmedYusufi, " +
-            "Aab-e-hayatByMohammedHussainAzad, DarbarEAkbari, in.ernet.dli.2015.424733, in.ernet.dli.2015.450540, divanezauq-v1, " +
-            "TaleOfTheFourDarweshes, bagh-o-bahar, baghobehar00dihlgoog, zindaginaqaabchehre, purwaiyanbekalutsahi, " +
-            "aikchadarmailisibedi, hath-hamare-qalam-huye-bedi, PatrasKayMazameen, MureedpurKaPeer_473, AnjaamBakheirPatrasBukhari, " +
-            "Kuttaydogs, in.ernet.dli.2015.524777, TaeriLakeerByIsmatChughtai, AjeebAadmiByIsmatChughtai, TedhiLakeerByIsmatChughtai, " +
-            "lihafnotherstoriesismatchughtai, chuyimuyiismatchughtai, chandtasveerebutan, ekqatrakhoon, " +
-            "lughaterozmarrahshamsurrahmanfaruqi, shabkhoon271aug2003, shabkhoon-v1, ghalibkechandpehlu, in.ernet.dli.2015.415434, " +
-            "YaadgarEGhalibHali, DeewanHaliMuqadamaShearOShaeri, FarnoodByJaunElia, qabaisaaz"
-const val kafkaArchives =
-    "unmasking-a-confident-trickster, kafka-short-stories, poe-short-stories, " +
-            "poems-by-pb-shelly, existentialism_202302, dualism_202302, beauty_202302, " +
-            "enlightenment_202302, hegels-aesthetics, mysticism-in-arabic-and-islamic-philosophy"
-
-object OverallDatabase {
-    val urduPoetry =
-        """ghazals_ghalib_0809_librivox, DeewanGalib, ghalibmujmuanasrur, divaneghalib-v3, divaneghalib-v4, 
-        ghazaliyatifarsi, gul-e-rana, KuliyatEMeerTaqi, KalaamEMirMirTaqiMir, 
-//        KuliyatESauda, 
-        PehliBarishNasirKazmi, 
-        MirzaGhalib-AHundredMoods, ShaidByJaunElia, YaniByJaunElia, LekinByJaunElia, FarnoodByJaunElia, Kulyat-e-Iqbal, 
-        dli.granth.78286, DeewaneKhwajaMirDard_201310, DeewaneKhwajaMirDard, in.ernet.dli.2015.409582, kulliyatizauq, 
-        Kulliyat-e-Dagh, KulyaatEMajeedAmjadRozERafta, 
-//        Majeed-Amjad-Intekhaab-By-Saad-Ullah-Shah, in.ernet.dli.2015.435939, 
-        in.ernet.dli.2015.398567, 
-//        PoemsByFaiz-Trans_VictorGKiernan-1971, in.ernet.dli.2015.551660, 
-        in.ernet.dli.2015.397992, 
-        naqshifaryadi00faizuoft, UrduKiAakhriKitab, 
-//        kullytiinshallhk00inshuoft, 
-        KulliyatEIqbalFarsiWithUrduTranslation, 
-        balijibril00iqba, bangidara00iqbauoft, AksEKhushboo, Triveniyan-Hindi-Gulzar, 
-//        in.ernet.dli.2015.493486, 
-        in.ernet.dli.2015.450541, duniyamereaagenidafazli""".trimIndent()
-
-    //crime_punishment_3_1708_librivox, crimepunishment00dostuoft, what_men_live_by_librivox, slavery_times_1102_librivox,
-// tale_two_cities_librivox, great_expectations_mfs_0812_librivox, christmascarol_librivox, in.ernet.dli.2015.68292، goldenstoriesas00graygoog,
-    const val englishProse =
-        "shakespeare_sonnets_ch, romeo_and_juliet_librivox, macbeth_0810_librivox, " +
-                "crime_and_punishment_0902_librivox, notes_from_the_underground, idiot_mg_librivox, " +
-                "gambler_1011_librivox, dostoyevskyshortstories_1310_librivox, " +
-                "dostoevsky_short_stories_2001_librivox, " +
-//            "shortstories00dost, " +
-                "metamorphosis_librivox, " +
-                "metamorphosis_1401_librivox, ACountryDoctor, annakarenina1_1011_librivox, " +
-                "whatibelieve_1101_librivox, war_and_peace_vol1_dole_mas_librivox, " +
-//            "whatisart00tolsuoft, plays00tolsgoog, essaysletters03tols, " +
-                "TheHobbitEnhancedEditionJ.R.R.Tolkien, TheHobbit_201810, fellowshipofringtol00tolk, Orwell1984preywo, " +
-//            "12_creepytales_1206_librivox, twopoetales_ce_librivox, works_poe_raven_edition_2_1704_librivox, " +
-                "poe_poems_stl_librivox"
-
-    // poemsofjohnkeats00keat, toautumn_1012_librivox, paradiselost_1411_librivox, canterburytales_librivox,
-// bells_1102_librivox, waste_land_librivox, CanterburyTales,
-    const val englishPoetry =
-        "john_keats_selected_poems_lw_librivox, " +
-//            "poemsbyjohnkeats00keat, " +
-//            "songs_innocence_experience_librivox, " +
-                "poems_wm_blake_ss_librivox, wandered_lonely_as_a_cloud_librivox, " +
-//            "lines_written_spring_librivox, " +
-//            "poemsofwilliamwo01wordiala, " +
-                "poe_poems_stl_librivox, " +
-//            "dream_within_dream_librivox, " +
-                "journalsofsylvia00plat_0, poems00ange, songflunguptohea00ange_0, " +
-//            "cd_black-pearls-the-poems-of-maya-angelou_maya-angelou, " +
-                "shelleypoems_lw_librivox, " +
-//            "sisterrosa_0710_librivox, " +
-                "music_0802_librivox, " +
-//            "lines_0912_librivox, cihm_990530, " +
-                "leaves_of_grass_librivox"
-    const val devnagri =
-        "masoomtopishuklahindiedition, neemkapedhindiedition, rahimasumrazaautobioh, mantokiutkrishtkahaniyan, " +
-                "ekpremkahanisaadathasanmanto_201907, mantomeenabazarhindiedition, mantothandaghoshtauranyakahaniyaanhindiedition_202002, " +
-                "tobateksinghetc, " +
-//            "mantoboohindi, Bhola-Hindi, " +
-                "ibne-insha-OK_compressed, PanchParmeshwar-Hindi, " +
-                "COLLECTIONOFBESTSTORIESPREMCHAND, premchandshatranjkekhiladiauranyakahaniyaanhindi, premchandnirmalahindi, " +
-//            "premchandrangbhoomihindi, " +
-                "NAMAK, ankhondekhapakistanhindi, hindustanigazlenkamleshwar, " +
-                "podcast_stories-panchtantra-_1216066624, " +
-//            "podcast_stories-panchtantra-_panchtantra-story-dusht-sarp-_1000383807204, " +
-                "srinkhalakikadiyanhindi, bachchandochattaneinhindiedition, harivanshmerishreshthakavitayenhindi, dinkarurvashihindi, " +
-                "renu_compressed, khattarkaka, mohanrakeshmeripriyakahaniyaanhindi, ashadkaekdinhindi, nirmalvermameripriyakahaniyaanhindi, " +
-                "jaise-unke-din-phire, sobtimitromarjanihindi, in.ernet.dli.2015.342236, Kavyanjali, suryakaa"
-    const val urduProse =
-        "lajwanti-l-l-l-rajinder-singh-bedi, Urdu-Ki-Aakhri-Kitab-By-Ibn-e-Insha, UrduKiAakhriKitab, Khomar-E-Gundom-By-Ibn-e-Insha, " +
-                "Chalte-Ho-To-Cheen-Ko-Chaliye-By-Ibn-E-Insha, Dunya-Goal-Hai-By-Ibn-e-Insha, App-Say-Kaya-Parda-By-Ibn-e-Insha, " +
-                "KhoyaPaani-Hindi-MushtaqAhmedYusufi, DhanYatra-Hindi-MushtaqAhmedYusufi, MereMunhMeKhaak-Hindi-MushtaqAhmedYusufi, " +
-                "Aab-e-hayatByMohammedHussainAzad, DarbarEAkbari, in.ernet.dli.2015.424733, in.ernet.dli.2015.450540, divanezauq-v1, " +
-                "TaleOfTheFourDarweshes, bagh-o-bahar, baghobehar00dihlgoog, zindaginaqaabchehre, purwaiyanbekalutsahi, " +
-                "aikchadarmailisibedi, hath-hamare-qalam-huye-bedi, PatrasKayMazameen, MureedpurKaPeer_473, AnjaamBakheirPatrasBukhari, " +
-                "Kuttaydogs, in.ernet.dli.2015.524777, TaeriLakeerByIsmatChughtai, AjeebAadmiByIsmatChughtai, TedhiLakeerByIsmatChughtai, " +
-                "lihafnotherstoriesismatchughtai, chuyimuyiismatchughtai, chandtasveerebutan, ekqatrakhoon, " +
-                "lughaterozmarrahshamsurrahmanfaruqi, shabkhoon271aug2003, shabkhoon-v1, ghalibkechandpehlu, in.ernet.dli.2015.415434, " +
-                "YaadgarEGhalibHali, DeewanHaliMuqadamaShearOShaeri, FarnoodByJaunElia, qabaisaaz"
-    const val kafkaArchives =
-        "unmasking-a-confident-trickster, kafka-short-stories, poe-short-stories, poems-by-pb-shelly, existentialism_202302, dualism_202302, beauty_202302, enlightenment_202302"
-    const val notUsed =
-        "kafka-short-stories, poe-short-stories, the-tell-tale-heart_202301, the-black-cat_202301, the-premature-burial_202301, " +
-                "a-hunger-artist_202301, a-report-for-an-academy, a-country-doctor, lajwanti-l-l-l-rajinder-singh-bedi, the-raven_202301, " +
-                "poems-by-pb-shelly"
-}
diff --git a/data/database/src/main/java/com/kafka/data/db/KafkaDatabase.kt b/data/database/src/main/java/com/kafka/data/db/KafkaDatabase.kt
index ea7d5f69..cc6db2a3 100644
--- a/data/database/src/main/java/com/kafka/data/db/KafkaDatabase.kt
+++ b/data/database/src/main/java/com/kafka/data/db/KafkaDatabase.kt
@@ -13,7 +13,6 @@ import com.kafka.data.dao.ItemDetailDao
 import com.kafka.data.dao.RecentAudioDao
 import com.kafka.data.dao.RecentSearchDao
 import com.kafka.data.dao.RecentTextDao
-import com.kafka.data.dao.SearchDao
 import com.kafka.data.entities.DownloadRequest
 import com.kafka.data.entities.File
 import com.kafka.data.entities.Item
@@ -26,7 +25,6 @@ import com.kafka.data.entities.RecentTextItem
 interface KafkaDatabase {
     fun itemDetailDao(): ItemDetailDao
     fun fileDao(): FileDao
-    fun searchDao(): SearchDao
     fun itemDao(): ItemDao
     fun recentSearchDao(): RecentSearchDao
     fun recentTextDao(): RecentTextDao
@@ -43,13 +41,13 @@ interface KafkaDatabase {
         RecentSearch::class,
         RecentTextItem::class,
         RecentAudioItem::class,
-        DownloadRequest::class
+        DownloadRequest::class,
     ],
     version = 4,
     exportSchema = true,
     autoMigrations = [
-        AutoMigration(from = 3, to = 4, spec = KafkaRoomDatabase.UserRemovalMigration::class)
-    ]
+        AutoMigration(from = 3, to = 4, spec = KafkaRoomDatabase.UserRemovalMigration::class),
+    ],
 )
 @TypeConverters(AppTypeConverters::class)
 abstract class KafkaRoomDatabase : RoomDatabase(), KafkaDatabase {
diff --git a/data/database/src/main/java/com/kafka/data/entities/DownloadItem.kt b/data/database/src/main/java/com/kafka/data/entities/DownloadItem.kt
index a6f3c569..22f0060a 100644
--- a/data/database/src/main/java/com/kafka/data/entities/DownloadItem.kt
+++ b/data/database/src/main/java/com/kafka/data/entities/DownloadItem.kt
@@ -13,4 +13,4 @@ data class DownloadItem(
     val creator: String = "",
     val mediaType: String = "",
     val coverImage: String = "",
-) : BaseEntity
+)
diff --git a/data/database/src/main/java/com/kafka/data/entities/DownloadRequest.kt b/data/database/src/main/java/com/kafka/data/entities/DownloadRequest.kt
index 9d18e7ef..cdd617bf 100644
--- a/data/database/src/main/java/com/kafka/data/entities/DownloadRequest.kt
+++ b/data/database/src/main/java/com/kafka/data/entities/DownloadRequest.kt
@@ -1,7 +1,3 @@
-/*
- * Copyright (C) 2021, Alashov Berkeli
- * All rights reserved.
- */
 package com.kafka.data.entities
 
 import androidx.room.ColumnInfo
@@ -40,7 +36,7 @@ data class DownloadRequest(
         override fun toString() = name
 
         companion object {
-            private val map = values().associateBy { it.name }
+            private val map = entries.associateBy { it.name }
 
             fun from(value: String) = map[value] ?: Audio
         }
diff --git a/data/database/src/main/java/com/kafka/data/entities/FavoriteItem.kt b/data/database/src/main/java/com/kafka/data/entities/FavoriteItem.kt
index 364f4d01..edc77eae 100644
--- a/data/database/src/main/java/com/kafka/data/entities/FavoriteItem.kt
+++ b/data/database/src/main/java/com/kafka/data/entities/FavoriteItem.kt
@@ -13,7 +13,7 @@ data class FavoriteItem(
     val coverImage: String = "",
     @ServerTimestamp
     val createdAt: Date = Date(),
-) : BaseEntity
+)
 
 fun FavoriteItem.toItem() = Item(
     itemId = itemId,
diff --git a/data/database/src/main/java/com/kafka/data/entities/File.kt b/data/database/src/main/java/com/kafka/data/entities/File.kt
index 6eeadcb3..6c4909c6 100644
--- a/data/database/src/main/java/com/kafka/data/entities/File.kt
+++ b/data/database/src/main/java/com/kafka/data/entities/File.kt
@@ -21,8 +21,8 @@ data class File(
     val readerUrl: String?,
     val downloadUrl: String?,
     val coverImage: String?,
-    val localUri: String? = null
-): BaseEntity {
+    val localUri: String? = null,
+) : BaseEntity {
     companion object {
         val audioExtensions = listOf("mp3", "wav", "aac", "ogg", "flac")
         val textExtensions = listOf("pdf", "txt")
@@ -60,7 +60,6 @@ data class File(
     }
 }
 
-
 fun String?.isText() = File.textExtensions.contains(this?.lowercase())
 fun String?.isAudio() = File.audioExtensions.contains(this?.lowercase())
 
@@ -69,3 +68,4 @@ fun File.isAudio() = this.extension.isAudio()
 fun File.isText() = this.extension.isText()
 fun File.isTxt() = this.extension.equals("txt", true)
 
+fun File.nameWithoutExtension() = name.substringBeforeLast(".")
diff --git a/data/database/src/main/java/com/kafka/data/entities/FollowedCreator.kt b/data/database/src/main/java/com/kafka/data/entities/FollowedCreator.kt
deleted file mode 100644
index 71d6b9b3..00000000
--- a/data/database/src/main/java/com/kafka/data/entities/FollowedCreator.kt
+++ /dev/null
@@ -1,23 +0,0 @@
-package com.kafka.data.entities
-
-import androidx.room.Entity
-import androidx.room.ForeignKey
-import androidx.room.Index
-import androidx.room.PrimaryKey
-
-@Entity(
-    tableName = "followed_creator",
-    indices = [
-        Index(value = ["itemId"], unique = true)
-    ],
-    foreignKeys = [
-        ForeignKey(
-            entity = ItemDetail::class,
-            parentColumns = arrayOf("itemId"),
-            childColumns = arrayOf("itemId")
-        )
-    ]
-)
-data class FollowedCreator(
-    @PrimaryKey val itemId: String = ""
-) : BaseEntity
diff --git a/data/database/src/main/java/com/kafka/data/entities/Homepage.kt b/data/database/src/main/java/com/kafka/data/entities/Homepage.kt
index d7bf0a64..17f905ea 100644
--- a/data/database/src/main/java/com/kafka/data/entities/Homepage.kt
+++ b/data/database/src/main/java/com/kafka/data/entities/Homepage.kt
@@ -11,7 +11,7 @@ data class Homepage(val collection: ImmutableList<HomepageCollection>) {
     val continueReadingItems: ImmutableList<RecentItemWithProgress>
         get() = collection.recentItems.subList(
             fromIndex = 0,
-            toIndex = ContinueReadingItemsThreshold.coerceAtMost(collection.recentItems.size)
+            toIndex = ContinueReadingItemsThreshold.coerceAtMost(collection.recentItems.size),
         )
 
     val hasSearchPrompt: Boolean
@@ -33,7 +33,7 @@ sealed class HomepageCollection {
     @Immutable
     data class Banners(
         val items: ImmutableList<HomepageBanner>,
-        override val enabled: Boolean = true
+        override val enabled: Boolean = true,
     ) : HomepageCollection()
 
     @Immutable
@@ -41,13 +41,13 @@ sealed class HomepageCollection {
         val label: String?,
         val items: ImmutableList<Item>,
         val image: String? = null,
-        override val enabled: Boolean = true
+        override val enabled: Boolean = true,
     ) : HomepageCollection()
 
     @Immutable
     data class RecentItems(
         val items: ImmutableList<RecentItemWithProgress>,
-        override val enabled: Boolean = true
+        override val enabled: Boolean = true,
     ) : HomepageCollection()
 
     @Immutable
@@ -55,7 +55,7 @@ sealed class HomepageCollection {
         val labels: ImmutableList<String>,
         val items: ImmutableList<Item>,
         val clickable: Boolean = true,
-        override val enabled: Boolean = true
+        override val enabled: Boolean = true,
     ) : HomepageCollection() {
         val key = labels.joinToString(separator = ",")
     }
@@ -65,7 +65,7 @@ sealed class HomepageCollection {
         val labels: ImmutableList<String>,
         val items: ImmutableList<Item>,
         val clickable: Boolean = true,
-        override val enabled: Boolean = true
+        override val enabled: Boolean = true,
     ) : HomepageCollection() {
         val key = labels.joinToString(separator = ",")
     }
@@ -75,7 +75,7 @@ sealed class HomepageCollection {
         val labels: ImmutableList<String>,
         val items: ImmutableList<Item>,
         val clickable: Boolean = true,
-        override val enabled: Boolean = true
+        override val enabled: Boolean = true,
     ) : HomepageCollection() {
         val key = labels.joinToString(separator = ",")
     }
diff --git a/data/database/src/main/java/com/kafka/data/entities/HomepageLayout.kt b/data/database/src/main/java/com/kafka/data/entities/HomepageLayout.kt
deleted file mode 100644
index 01e6e78d..00000000
--- a/data/database/src/main/java/com/kafka/data/entities/HomepageLayout.kt
+++ /dev/null
@@ -1,14 +0,0 @@
-package com.kafka.data.entities
-
-data class HomepageLayout(
-    val banners: List<Banner>,
-    val recentItems: List<Item>,
-    val favoriteItems: List<Item>,
-    val queryItems: List<String>,
-) {
-    enum class ActionType { Detail, Collection, Subject }
-    
-    sealed class ItemType
-
-    data class Banner(val id: String, val imageUrl: String, val type: ActionType) : ItemType()
-}
diff --git a/data/database/src/main/java/com/kafka/data/entities/Item.kt b/data/database/src/main/java/com/kafka/data/entities/Item.kt
index 737cf644..7220b6ef 100644
--- a/data/database/src/main/java/com/kafka/data/entities/Item.kt
+++ b/data/database/src/main/java/com/kafka/data/entities/Item.kt
@@ -10,7 +10,7 @@ import androidx.room.PrimaryKey
  */
 @Immutable
 @Entity
-data class Item constructor(
+data class Item(
     @PrimaryKey val itemId: String = "",
     @Embedded(prefix = "creator_") val creator: Creator? = null,
     val language: List<String>? = null,
@@ -23,11 +23,11 @@ data class Item constructor(
     val subject: String? = null,
     val uploader: String? = null,
     val position: Int = 0,
-    val rating: Double? = null
+    val rating: Double? = null,
 ) : BaseEntity {
     val isAudio: Boolean
         get() = mediaType == "audio"
-    
+
     val isInappropriate: Boolean
         get() = collection?.contains("no-preview") == true
 }
diff --git a/data/database/src/main/java/com/kafka/data/entities/ItemDetail.kt b/data/database/src/main/java/com/kafka/data/entities/ItemDetail.kt
index 56f198d4..a147defb 100644
--- a/data/database/src/main/java/com/kafka/data/entities/ItemDetail.kt
+++ b/data/database/src/main/java/com/kafka/data/entities/ItemDetail.kt
@@ -23,7 +23,7 @@ data class ItemDetail(
     val metadata: List<String>? = null,
     val primaryFile: String? = null,
     val subject: List<String>? = null,
-    val rating: Double? = null
+    val rating: Double? = null,
 ) : BaseEntity {
     val uiRating: Int
         get() = (rating ?: 0.0).toInt()
diff --git a/data/database/src/main/java/com/kafka/data/entities/QueueEntity.kt b/data/database/src/main/java/com/kafka/data/entities/QueueEntity.kt
index 33646550..f4711a36 100644
--- a/data/database/src/main/java/com/kafka/data/entities/QueueEntity.kt
+++ b/data/database/src/main/java/com/kafka/data/entities/QueueEntity.kt
@@ -4,9 +4,9 @@ import androidx.room.Entity
 import androidx.room.PrimaryKey
 
 @Entity(tableName = "queue_meta_data")
-data class QueueEntity constructor(
+data class QueueEntity(
     @PrimaryKey(autoGenerate = false) var id: Long = 0,
     var currentSeekPos: Long = 0,
     var currentSongId: String? = null,
-    var isPlaying: Boolean = false
+    var isPlaying: Boolean = false,
 ) : BaseEntity
diff --git a/data/database/src/main/java/com/kafka/data/entities/RecentItem.kt b/data/database/src/main/java/com/kafka/data/entities/RecentItem.kt
index 60c190d5..35fcc435 100644
--- a/data/database/src/main/java/com/kafka/data/entities/RecentItem.kt
+++ b/data/database/src/main/java/com/kafka/data/entities/RecentItem.kt
@@ -18,7 +18,7 @@ data class RecentItem(
     val coverUrl: String,
     val creator: String,
     val mediaType: String,
-    val createdAt: Long
+    val createdAt: Long,
 ) {
     constructor() : this(
         fileId = "",
@@ -27,7 +27,7 @@ data class RecentItem(
         coverUrl = "",
         creator = "",
         mediaType = "",
-        createdAt = 0
+        createdAt = 0,
     )
 
     companion object {
@@ -39,7 +39,7 @@ data class RecentItem(
                 coverUrl = item.coverImage.orEmpty(),
                 creator = item.creator.orEmpty(),
                 mediaType = item.mediaType.orEmpty(),
-                createdAt = System.currentTimeMillis()
+                createdAt = System.currentTimeMillis(),
             )
         }
     }
@@ -49,7 +49,7 @@ data class RecentItem(
 @Entity(tableName = "recent_text")
 data class RecentTextItem(
     @PrimaryKey val fileId: String,
-    val currentPage: Int,
+    val currentPage: Int, // starts at 1
     val localUri: String,
     val type: Type,
     val pages: List<Page>,
@@ -75,7 +75,7 @@ data class RecentTextItem(
 data class RecentAudioItem(
     @PrimaryKey val fileId: String,
     val currentTimestamp: Long,
-    val duration: Long
+    val duration: Long,
 ) : BaseEntity {
     val progress: Int
         get() = (currentTimestamp * 100 / duration).toInt()
@@ -84,7 +84,7 @@ data class RecentAudioItem(
 @Immutable
 data class RecentItemWithProgress(
     val recentItem: RecentItem,
-    val percentage: Int
+    val percentage: Int,
 ) {
     val progress: Float
         get() = percentage / 100f
diff --git a/data/database/src/main/java/com/kafka/data/entities/RecentSearch.kt b/data/database/src/main/java/com/kafka/data/entities/RecentSearch.kt
index 3d78760e..82358b14 100644
--- a/data/database/src/main/java/com/kafka/data/entities/RecentSearch.kt
+++ b/data/database/src/main/java/com/kafka/data/entities/RecentSearch.kt
@@ -8,10 +8,10 @@ import javax.annotation.concurrent.Immutable
 
 @Entity(
     tableName = "recent_search",
-    indices = [Index(value = ["search_term"], unique = true)]
+    indices = [Index(value = ["search_term"], unique = true)],
 )
 @Immutable
 data class RecentSearch(
     @PrimaryKey(autoGenerate = true) @ColumnInfo(name = "id") var id: Long = 0,
-    @ColumnInfo(name = "search_term") var searchTerm: String = ""
+    @ColumnInfo(name = "search_term") var searchTerm: String = "",
 ) : BaseEntity
diff --git a/data/database/src/main/java/com/kafka/data/entities/User.kt b/data/database/src/main/java/com/kafka/data/entities/User.kt
index c5cc4ec2..4b443006 100644
--- a/data/database/src/main/java/com/kafka/data/entities/User.kt
+++ b/data/database/src/main/java/com/kafka/data/entities/User.kt
@@ -8,7 +8,7 @@ data class User(
     val displayName: String,
     val email: String?,
     val imageUrl: String? = null,
-    val anonymous: Boolean
-) : BaseEntity {
+    val anonymous: Boolean,
+) {
     constructor() : this("", "", null, null, false)
 }
diff --git a/data/database/src/main/java/com/kafka/data/injection/DatabaseModule.kt b/data/database/src/main/java/com/kafka/data/injection/DatabaseModule.kt
index b7cdde83..5b681708 100644
--- a/data/database/src/main/java/com/kafka/data/injection/DatabaseModule.kt
+++ b/data/database/src/main/java/com/kafka/data/injection/DatabaseModule.kt
@@ -22,8 +22,8 @@ const val databaseName = "kafka.db"
     includes = [
         RoomDatabaseModule::class,
         DatabaseDaoModule::class,
-        DatabaseModuleBinds::class
-    ]
+        DatabaseModuleBinds::class,
+    ],
 )
 class DatabaseModule
 
@@ -34,7 +34,9 @@ class RoomDatabaseModule {
     @Provides
     fun provideDatabase(@ApplicationContext context: Context): KafkaRoomDatabase {
         val builder = Room.databaseBuilder(
-            context, KafkaRoomDatabase::class.java, databaseName
+            context,
+            KafkaRoomDatabase::class.java,
+            databaseName,
         ).fallbackToDestructiveMigration()
         if (Debug.isDebuggerConnected()) {
             builder.allowMainThreadQueries()
@@ -68,9 +70,6 @@ class DatabaseDaoModule {
     @Provides
     fun provideFileDao(db: KafkaRoomDatabase) = db.fileDao()
 
-    @Provides
-    fun provideContentEntryDao(db: KafkaRoomDatabase) = db.searchDao()
-
     @Provides
     fun provideSearchConfigurationDao(db: KafkaRoomDatabase) = db.recentSearchDao()
 
diff --git a/data/database/src/main/java/com/kafka/data/prefs/InternalPreferencesStore.kt b/data/database/src/main/java/com/kafka/data/prefs/InternalPreferencesStore.kt
index 6fb76c60..04da7a85 100644
--- a/data/database/src/main/java/com/kafka/data/prefs/InternalPreferencesStore.kt
+++ b/data/database/src/main/java/com/kafka/data/prefs/InternalPreferencesStore.kt
@@ -7,7 +7,7 @@ import dagger.hilt.android.qualifiers.ApplicationContext
 import javax.inject.Inject
 
 internal class InternalPreferencesStore @Inject constructor(
-    @ApplicationContext private val context: Context
+    @ApplicationContext private val context: Context,
 ) {
 
     suspend fun <T> remove(key: Preferences.Key<T>) {
diff --git a/data/database/src/main/java/com/kafka/data/prefs/PreferencesStore.kt b/data/database/src/main/java/com/kafka/data/prefs/PreferencesStore.kt
index 1e6d7fb5..45d294c9 100644
--- a/data/database/src/main/java/com/kafka/data/prefs/PreferencesStore.kt
+++ b/data/database/src/main/java/com/kafka/data/prefs/PreferencesStore.kt
@@ -3,6 +3,7 @@ package com.kafka.data.prefs
 import android.content.Context
 import androidx.datastore.core.DataStore
 import androidx.datastore.preferences.core.Preferences
+import androidx.datastore.preferences.core.booleanPreferencesKey
 import androidx.datastore.preferences.core.edit
 import androidx.datastore.preferences.core.stringPreferencesKey
 import androidx.datastore.preferences.preferencesDataStore
@@ -62,14 +63,24 @@ class PreferencesStore @Inject constructor(@ApplicationContext private val conte
 }
 
 val THEME = stringPreferencesKey("theme")
+val TRUE_CONTRAST = booleanPreferencesKey("true_contrast")
+val SAFE_MODE = booleanPreferencesKey("safe_mode")
 
 fun PreferencesStore.observeTheme(): Flow<Theme> {
     return get(THEME, Theme.DEFAULT.name)
         .map { theme ->
-            Theme.values().firstOrNull { it.name.equals(theme, true) } ?: Theme.SYSTEM
+            Theme.entries.firstOrNull { it.name.equals(theme, true) } ?: Theme.SYSTEM
         }
 }
 
+fun PreferencesStore.observeTrueContrast(): Flow<Boolean> {
+    return get(TRUE_CONTRAST, TRUE_CONTRAST_DEFAULT)
+}
+
+fun PreferencesStore.observeSafeMode(): Flow<Boolean> {
+    return get(SAFE_MODE, SAFE_MODE_DEFAULT)
+}
+
 enum class Theme {
     LIGHT,
     DARK,
@@ -96,3 +107,6 @@ enum class ContentType {
         val DEFAULT = BOTH
     }
 }
+
+const val TRUE_CONTRAST_DEFAULT = true
+const val SAFE_MODE_DEFAULT = false
diff --git a/data/models/src/main/java/com/kafka/data/model/ArchiveQuery.kt b/data/models/src/main/java/com/kafka/data/model/ArchiveQuery.kt
index 0d8e5267..c106eb92 100644
--- a/data/models/src/main/java/com/kafka/data/model/ArchiveQuery.kt
+++ b/data/models/src/main/java/com/kafka/data/model/ArchiveQuery.kt
@@ -22,7 +22,7 @@ const val joinerOr = "OR"
 data class QueryItem(val key: String, val value: String, val joiner: String = "")
 
 data class ArchiveQuery(
-    var queries: MutableList<QueryItem> = mutableListOf()
+    var queries: MutableList<QueryItem> = mutableListOf(),
 )
 
 fun ArchiveQuery.booksByIdentifiers(identifiers: String): ArchiveQuery {
diff --git a/data/models/src/main/java/com/kafka/data/model/SearchFilter.kt b/data/models/src/main/java/com/kafka/data/model/SearchFilter.kt
index 9f10d179..77132189 100644
--- a/data/models/src/main/java/com/kafka/data/model/SearchFilter.kt
+++ b/data/models/src/main/java/com/kafka/data/model/SearchFilter.kt
@@ -8,7 +8,7 @@ enum class SearchFilter {
     companion object {
         private fun fromString(value: String): SearchFilter {
             debug { "SearchFilter.fromString: $value" }
-            return values().firstOrNull { it.name.lowercase() == value.lowercase() } ?: Name
+            return entries.firstOrNull { it.name.lowercase() == value.lowercase() } ?: Name
         }
 
         fun from(value: String): List<SearchFilter> {
@@ -21,10 +21,9 @@ enum class SearchFilter {
         }
 
         fun allString(): String {
-            return values().toList().joinToString(",") { it.name }
+            return entries.joinToString(",") { it.name }
         }
 
-        fun all() = values().toList()
+        fun all() = entries
     }
 }
-
diff --git a/data/models/src/main/java/com/kafka/data/model/Serialization.kt b/data/models/src/main/java/com/kafka/data/model/Serialization.kt
index 2d44d737..2ee79718 100644
--- a/data/models/src/main/java/com/kafka/data/model/Serialization.kt
+++ b/data/models/src/main/java/com/kafka/data/model/Serialization.kt
@@ -1,8 +1,10 @@
+@file:Suppress("ktlint:standard:filename")
+
 package com.kafka.data.model
 
 import kotlin.reflect.KClass
 
 data class SerializationPolymorphicDefaultPair<T : Any>(
     val base: KClass<T>,
-    val default: KClass<out T>
+    val default: KClass<out T>,
 )
diff --git a/data/models/src/main/java/com/kafka/data/model/homepage/HomepageResponse.kt b/data/models/src/main/java/com/kafka/data/model/homepage/HomepageResponse.kt
index f3706239..4904838b 100644
--- a/data/models/src/main/java/com/kafka/data/model/homepage/HomepageResponse.kt
+++ b/data/models/src/main/java/com/kafka/data/model/homepage/HomepageResponse.kt
@@ -17,7 +17,7 @@ sealed class HomepageCollectionResponse {
         val items: List<HomepageBanner> = listOf(),
         override val index: Int,
         override val enabled: Boolean = true,
-        override val topics: String = ""
+        override val topics: String = "",
     ) : HomepageCollectionResponse()
 
     @Serializable
@@ -28,7 +28,7 @@ sealed class HomepageCollectionResponse {
         val image: List<FirebaseImage>? = null,
         override val index: Int,
         override val enabled: Boolean = true,
-        override val topics: String = ""
+        override val topics: String = "",
     ) : HomepageCollectionResponse()
 
     @Serializable
@@ -36,7 +36,7 @@ sealed class HomepageCollectionResponse {
     data class RecentItems(
         override val index: Int,
         override val enabled: Boolean = true,
-        override val topics: String = ""
+        override val topics: String = "",
     ) : HomepageCollectionResponse()
 
     @Serializable
@@ -47,7 +47,7 @@ sealed class HomepageCollectionResponse {
         val clickable: Boolean = true,
         override val enabled: Boolean = true,
         override val index: Int = 0,
-        override val topics: String = ""
+        override val topics: String = "",
     ) : HomepageCollectionResponse()
 
     @Serializable
@@ -58,7 +58,7 @@ sealed class HomepageCollectionResponse {
         val clickable: Boolean = true,
         override val enabled: Boolean = true,
         override val index: Int = 0,
-        override val topics: String = ""
+        override val topics: String = "",
     ) : HomepageCollectionResponse()
 
     @Serializable
@@ -69,14 +69,14 @@ sealed class HomepageCollectionResponse {
         val clickable: Boolean = true,
         override val enabled: Boolean = true,
         override val index: Int = 0,
-        override val topics: String = ""
+        override val topics: String = "",
     ) : HomepageCollectionResponse()
 
     @Serializable
     data class Unknown(
         override val enabled: Boolean = false,
         override val topics: String = "",
-        override val index: Int = -1
+        override val index: Int = -1,
     ) : HomepageCollectionResponse()
 }
 
@@ -88,7 +88,7 @@ data class HomepageBanner(
     val action: Action = Action.Search,
     val imageUrl: String = "",
     val keyword: String? = null,
-    val index: Int = 0
+    val index: Int = 0,
 ) {
     @Serializable
     enum class Action {
@@ -96,7 +96,7 @@ data class HomepageBanner(
         Search,
 
         @SerialName("item_detail")
-        ItemDetail
+        ItemDetail,
     }
 }
 
@@ -105,5 +105,5 @@ data class FirebaseImage(
     @DocumentId
     val ref: String,
     val downloadURL: String,
-    val name: String = ""
+    val name: String = "",
 )
diff --git a/data/models/src/main/java/com/kafka/data/model/item/Doc.kt b/data/models/src/main/java/com/kafka/data/model/item/Doc.kt
index db5da9fc..76c57dcd 100644
--- a/data/models/src/main/java/com/kafka/data/model/item/Doc.kt
+++ b/data/models/src/main/java/com/kafka/data/model/item/Doc.kt
@@ -6,7 +6,7 @@ import kotlinx.serialization.Serializable
 
 @Serializable
 data class Doc(
-    @SerialName("genre")
+    @SerialName("collection")
     @Serializable(with = StringListSerializer::class)
     val collection: List<String>? = null,
     @SerialName("creator")
@@ -42,8 +42,6 @@ data class Doc(
     val title: List<String>,
     @SerialName("week")
     val week: Int? = 0,
-    @SerialName("year")
-    val year: String? = null,
     @SerialName("avg_rating")
     val rating: Double? = null,
 )
diff --git a/data/models/src/main/java/com/kafka/data/model/item/File.kt b/data/models/src/main/java/com/kafka/data/model/item/File.kt
index cef88fad..8a1879a9 100644
--- a/data/models/src/main/java/com/kafka/data/model/item/File.kt
+++ b/data/models/src/main/java/com/kafka/data/model/item/File.kt
@@ -23,6 +23,8 @@ data class File(
     val size: String? = null,
     @SerialName("title")
     val title: String? = null,
+    @SerialName("source")
+    val source: String? = null,
 ) {
     // todo: improve file ids to make them unique
     // this will require a migration to new file ids which might be a breaking change
diff --git a/data/models/src/main/java/com/kafka/data/model/item/ItemDetailResponse.kt b/data/models/src/main/java/com/kafka/data/model/item/ItemDetailResponse.kt
index 97dcbced..96c60f62 100644
--- a/data/models/src/main/java/com/kafka/data/model/item/ItemDetailResponse.kt
+++ b/data/models/src/main/java/com/kafka/data/model/item/ItemDetailResponse.kt
@@ -24,5 +24,5 @@ data class ItemDetailResponse(
     @SerialName("uniq")
     val uniq: Int = 0,
     @SerialName("workable_servers")
-    val workableServers: List<String> = emptyList()
+    val workableServers: List<String> = emptyList(),
 )
diff --git a/data/models/src/main/java/com/kafka/data/model/item/Params.kt b/data/models/src/main/java/com/kafka/data/model/item/Params.kt
index 75a36c02..12db291c 100644
--- a/data/models/src/main/java/com/kafka/data/model/item/Params.kt
+++ b/data/models/src/main/java/com/kafka/data/model/item/Params.kt
@@ -18,5 +18,5 @@ data class Params(
     @SerialName("start")
     val start: Int,
     @SerialName("wt")
-    val wt: String
+    val wt: String,
 )
diff --git a/data/models/src/main/java/com/kafka/data/model/item/Response.kt b/data/models/src/main/java/com/kafka/data/model/item/Response.kt
index beb6f7b9..f0f85faf 100644
--- a/data/models/src/main/java/com/kafka/data/model/item/Response.kt
+++ b/data/models/src/main/java/com/kafka/data/model/item/Response.kt
@@ -10,5 +10,5 @@ data class Response(
     @SerialName("numFound")
     val numFound: Int,
     @SerialName("start")
-    val start: Int
+    val start: Int,
 )
diff --git a/data/models/src/main/java/com/kafka/data/model/item/ResponseHeader.kt b/data/models/src/main/java/com/kafka/data/model/item/ResponseHeader.kt
index aca8a7b0..52727503 100644
--- a/data/models/src/main/java/com/kafka/data/model/item/ResponseHeader.kt
+++ b/data/models/src/main/java/com/kafka/data/model/item/ResponseHeader.kt
@@ -10,5 +10,5 @@ data class ResponseHeader(
     @SerialName("params")
     val params: Params,
     @SerialName("status")
-    val status: Int
+    val status: Int,
 )
diff --git a/data/models/src/main/java/com/kafka/data/model/item/SearchResponse.kt b/data/models/src/main/java/com/kafka/data/model/item/SearchResponse.kt
index eb320393..8113245c 100644
--- a/data/models/src/main/java/com/kafka/data/model/item/SearchResponse.kt
+++ b/data/models/src/main/java/com/kafka/data/model/item/SearchResponse.kt
@@ -8,5 +8,5 @@ data class SearchResponse(
     @SerialName("response")
     val response: Response? = null,
     @SerialName("responseHeader")
-    val responseHeader: ResponseHeader? = null
+    val responseHeader: ResponseHeader? = null,
 )
diff --git a/data/models/src/main/java/com/kafka/data/model/recommendation/RecommendationRequestBody.kt b/data/models/src/main/java/com/kafka/data/model/recommendation/RecommendationRequestBody.kt
new file mode 100644
index 00000000..3c34460f
--- /dev/null
+++ b/data/models/src/main/java/com/kafka/data/model/recommendation/RecommendationRequestBody.kt
@@ -0,0 +1,49 @@
+package com.kafka.data.model.recommendation
+
+
+import kotlinx.serialization.SerialName
+import kotlinx.serialization.Serializable
+
+@Serializable
+data class RecommendationRequestBody(
+    @SerialName("event")
+    val event: RecommendationEvent
+) {
+    @Serializable
+    data class RecommendationEvent(
+        @SerialName("start_object")
+        val startObject: StartObject,
+        @SerialName("relationship")
+        val relationship: Relationship,
+        @SerialName("end_object")
+        val endObject: EndObject,
+    ) {
+        @Serializable
+        data class EndObject(
+            @SerialName("created_on")
+            val createdOn: String,
+            @SerialName("id")
+            val id: String,
+            @SerialName("type")
+            val type: String
+        )
+
+        @Serializable
+        data class Relationship(
+            @SerialName("created_on")
+            val createdOn: String,
+            @SerialName("type")
+            val type: String
+        )
+
+        @Serializable
+        data class StartObject(
+            @SerialName("created_on")
+            val createdOn: String,
+            @SerialName("id")
+            val id: String,
+            @SerialName("type")
+            val type: String
+        )
+    }
+}
diff --git a/data/repo/src/main/java/com/kafka/data/MediaTypeManager.kt b/data/repo/src/main/java/com/kafka/data/MediaTypeManager.kt
index a497d5a4..c4950ca8 100644
--- a/data/repo/src/main/java/com/kafka/data/MediaTypeManager.kt
+++ b/data/repo/src/main/java/com/kafka/data/MediaTypeManager.kt
@@ -1,22 +1,24 @@
 package com.kafka.data
 
 import androidx.datastore.preferences.core.stringPreferencesKey
-import org.kafka.base.ProcessLifetime
 import com.kafka.data.prefs.PreferencesStore
 import kotlinx.coroutines.CoroutineScope
 import kotlinx.coroutines.flow.map
+import org.kafka.base.ProcessLifetime
 import org.kafka.base.extensions.stateInDefault
 import javax.inject.Inject
 
 /* Unused class: we might add functionality to filter by media type in future. */
 class MediaTypeManager @Inject constructor(
     preferencesStore: PreferencesStore,
-    @ProcessLifetime private val coroutineScope: CoroutineScope
+    @ProcessLifetime private val coroutineScope: CoroutineScope,
 ) {
     private val preferenceKey get() = stringPreferencesKey("media_type")
 
     private val mediaTypeState = preferencesStore.getStateFlow(
-        keyName = preferenceKey, scope = coroutineScope, initialValue = MediaType.Audio.name
+        keyName = preferenceKey,
+        scope = coroutineScope,
+        initialValue = MediaType.Audio.name,
     )
 
     private val mediaTypeFlow = mediaTypeState.map { MediaType.valueOf(it) }
diff --git a/data/repo/src/main/java/com/kafka/data/api/interceptor/AcceptDialogInterceptor.kt b/data/repo/src/main/java/com/kafka/data/api/interceptor/AcceptDialogInterceptor.kt
index bc6f3e6c..4c59fbde 100644
--- a/data/repo/src/main/java/com/kafka/data/api/interceptor/AcceptDialogInterceptor.kt
+++ b/data/repo/src/main/java/com/kafka/data/api/interceptor/AcceptDialogInterceptor.kt
@@ -4,7 +4,7 @@ import okhttp3.Interceptor
 import okhttp3.Response
 import javax.inject.Inject
 
-class AcceptDialogInterceptor @Inject constructor(): Interceptor {
+class AcceptDialogInterceptor @Inject constructor() : Interceptor {
     private val headerName = "AcceptDialog"
     private val headerValue = "application/json"
 
diff --git a/data/repo/src/main/java/com/kafka/data/api/interceptor/NetworkConnectionInterceptor.kt b/data/repo/src/main/java/com/kafka/data/api/interceptor/NetworkConnectionInterceptor.kt
index 809b9795..51e35200 100644
--- a/data/repo/src/main/java/com/kafka/data/api/interceptor/NetworkConnectionInterceptor.kt
+++ b/data/repo/src/main/java/com/kafka/data/api/interceptor/NetworkConnectionInterceptor.kt
@@ -11,7 +11,7 @@ import java.io.IOException
 import javax.inject.Inject
 
 class NetworkConnectionInterceptor @Inject constructor(
-    @ApplicationContext private val context: Context
+    @ApplicationContext private val context: Context,
 ) : Interceptor {
     @Throws(IOException::class)
     override fun intercept(chain: Interceptor.Chain): Response {
diff --git a/data/repo/src/main/java/com/kafka/data/feature/DownloadsRepository.kt b/data/repo/src/main/java/com/kafka/data/feature/DownloadsRepository.kt
index 9fa71afa..8d201990 100644
--- a/data/repo/src/main/java/com/kafka/data/feature/DownloadsRepository.kt
+++ b/data/repo/src/main/java/com/kafka/data/feature/DownloadsRepository.kt
@@ -10,7 +10,7 @@ import javax.inject.Inject
 @Reusable
 class DownloadsRepository @Inject constructor(
     private val firestoreGraph: FirestoreGraph,
-    private val accountRepository: AccountRepository
+    private val accountRepository: AccountRepository,
 ) {
     suspend fun addDownload(downloadItem: DownloadItem) {
         accountRepository.currentFirebaseUser?.uid?.let {
diff --git a/data/repo/src/main/java/com/kafka/data/feature/FavoritesRepository.kt b/data/repo/src/main/java/com/kafka/data/feature/FavoritesRepository.kt
index beab46f1..083ccee9 100644
--- a/data/repo/src/main/java/com/kafka/data/feature/FavoritesRepository.kt
+++ b/data/repo/src/main/java/com/kafka/data/feature/FavoritesRepository.kt
@@ -14,7 +14,7 @@ import javax.inject.Inject
 @Reusable
 class FavoritesRepository @Inject constructor(
     private val firestoreGraph: FirestoreGraph,
-    private val accountRepository: AccountRepository
+    private val accountRepository: AccountRepository,
 ) {
     fun observeFavorites(uid: String) = firestoreGraph.getFavoritesCollection(uid)
         .orderBy("createdAt", Query.Direction.DESCENDING)
diff --git a/data/repo/src/main/java/com/kafka/data/feature/auth/AccountRepository.kt b/data/repo/src/main/java/com/kafka/data/feature/auth/AccountRepository.kt
index bf1fe578..8cb11d51 100644
--- a/data/repo/src/main/java/com/kafka/data/feature/auth/AccountRepository.kt
+++ b/data/repo/src/main/java/com/kafka/data/feature/auth/AccountRepository.kt
@@ -18,7 +18,7 @@ import javax.inject.Singleton
  * */
 @Singleton
 class AccountRepository @Inject constructor(
-    private val auth: FirebaseAuth
+    private val auth: FirebaseAuth,
 ) {
     val currentFirebaseUser
         get() = auth.currentUser
diff --git a/data/repo/src/main/java/com/kafka/data/feature/firestore/FirestoreGraph.kt b/data/repo/src/main/java/com/kafka/data/feature/firestore/FirestoreGraph.kt
index 71d6e899..8d462fef 100644
--- a/data/repo/src/main/java/com/kafka/data/feature/firestore/FirestoreGraph.kt
+++ b/data/repo/src/main/java/com/kafka/data/feature/firestore/FirestoreGraph.kt
@@ -11,7 +11,7 @@ import dev.gitlive.firebase.firestore.FirebaseFirestore as FirebaseFirestoreKt
 class FirestoreGraph @Inject constructor(
     private val firestoreKt: FirebaseFirestoreKt,
     private val firestore: FirebaseFirestore,
-    private val auth: FirebaseAuth
+    private val auth: FirebaseAuth,
 ) {
     val recentItemsCollection
         get() = getRecentItemsCollection(auth.currentUser!!.uid)
diff --git a/data/repo/src/main/java/com/kafka/data/feature/homepage/HomepageMapper.kt b/data/repo/src/main/java/com/kafka/data/feature/homepage/HomepageMapper.kt
index 0c115d79..bead2f68 100644
--- a/data/repo/src/main/java/com/kafka/data/feature/homepage/HomepageMapper.kt
+++ b/data/repo/src/main/java/com/kafka/data/feature/homepage/HomepageMapper.kt
@@ -12,17 +12,19 @@ import kotlinx.coroutines.flow.map
 import javax.inject.Inject
 
 class HomepageMapper @Inject constructor(private val itemDao: ItemDao) {
-    fun map(collection: List<HomepageCollectionResponse>) = combine(collection.map {
-        when (it) {
-            is HomepageCollectionResponse.Row -> it.mapRows()
-            is HomepageCollectionResponse.Column -> it.mapColumn()
-            is HomepageCollectionResponse.Banners -> it.mapBanners()
-            is HomepageCollectionResponse.FeaturedItem -> it.mapFeatured()
-            is HomepageCollectionResponse.RecentItems -> it.mapRecentItems()
-            is HomepageCollectionResponse.Grid -> it.mapGrid()
-            is HomepageCollectionResponse.Unknown -> flowOf()
-        }
-    }) { it.toList() }
+    fun map(collection: List<HomepageCollectionResponse>) = combine(
+        collection.map {
+            when (it) {
+                is HomepageCollectionResponse.Row -> it.mapRows()
+                is HomepageCollectionResponse.Column -> it.mapColumn()
+                is HomepageCollectionResponse.Banners -> it.mapBanners()
+                is HomepageCollectionResponse.FeaturedItem -> it.mapFeatured()
+                is HomepageCollectionResponse.RecentItems -> it.mapRecentItems()
+                is HomepageCollectionResponse.Grid -> it.mapGrid()
+                is HomepageCollectionResponse.Unknown -> flowOf()
+            }
+        },
+    ) { it.toList() }
 
     private fun HomepageCollectionResponse.Row.mapRows(): Flow<HomepageCollection.Row> {
         val itemIdList = itemIds.split(", ")
@@ -31,12 +33,11 @@ class HomepageMapper @Inject constructor(private val itemDao: ItemDao) {
             HomepageCollection.Row(
                 labels = label.splitLabel().toPersistentList(),
                 items = sortedItems.toPersistentList(),
-                clickable = clickable
+                clickable = clickable,
             )
         }
     }
 
-
     private fun HomepageCollectionResponse.Column.mapColumn(): Flow<HomepageCollection.Column> {
         val itemIdList = itemIds.split(", ")
         return itemDao.observe(itemIdList).map { items ->
@@ -44,7 +45,7 @@ class HomepageMapper @Inject constructor(private val itemDao: ItemDao) {
             HomepageCollection.Column(
                 labels = label.splitLabel().toPersistentList(),
                 items = sortedItems.toPersistentList(),
-                clickable = clickable
+                clickable = clickable,
             )
         }
     }
@@ -56,7 +57,7 @@ class HomepageMapper @Inject constructor(private val itemDao: ItemDao) {
             HomepageCollection.Grid(
                 labels = label.splitLabel().toPersistentList(),
                 items = sortedItems.toPersistentList(),
-                clickable = clickable
+                clickable = clickable,
             )
         }
     }
@@ -74,7 +75,7 @@ class HomepageMapper @Inject constructor(private val itemDao: ItemDao) {
                 label = label,
                 items = items.toPersistentList(),
                 image = image?.randomOrNull()?.downloadURL,
-                enabled = enabled
+                enabled = enabled,
             )
         }
 
diff --git a/data/repo/src/main/java/com/kafka/data/feature/homepage/HomepageRepository.kt b/data/repo/src/main/java/com/kafka/data/feature/homepage/HomepageRepository.kt
index 63c32033..4ea66583 100644
--- a/data/repo/src/main/java/com/kafka/data/feature/homepage/HomepageRepository.kt
+++ b/data/repo/src/main/java/com/kafka/data/feature/homepage/HomepageRepository.kt
@@ -2,7 +2,7 @@ package com.kafka.data.feature.homepage
 
 import com.kafka.data.feature.firestore.FirestoreGraph
 import com.kafka.data.model.homepage.HomepageCollectionResponse
-import com.kafka.recommendations.FirebaseTopics
+import com.kafka.recommendations.topic.FirebaseTopics
 import dagger.Reusable
 import dev.gitlive.firebase.firestore.QuerySnapshot
 import kotlinx.collections.immutable.toPersistentList
@@ -16,11 +16,11 @@ import javax.inject.Inject
 class HomepageRepository @Inject constructor(
     private val firestoreGraph: FirestoreGraph,
     private val homepageMapper: HomepageMapper,
-    private val firebaseTopics: FirebaseTopics
+    private val firebaseTopics: FirebaseTopics,
 ) {
     fun observeHomepageCollection() = combine(
         firestoreGraph.homepageCollection.snapshots,
-        firebaseTopics.topics
+        firebaseTopics.topics,
     ) { homepageResponse, topics ->
         homepageResponse to topics
     }.flatMapLatest {
@@ -59,9 +59,9 @@ class HomepageRepository @Inject constructor(
 
     private fun HomepageCollectionResponse.filterByTopics(userTopics: List<String>): Boolean {
         val collectionTopics = this.topics.split(", ").filter { it.isNotEmpty() }
-        return collectionTopics.isEmpty()
-                || userTopics.isEmpty()
-                || shouldShowCollection(userTopics, collectionTopics)
+        return collectionTopics.isEmpty() ||
+            userTopics.isEmpty() ||
+            shouldShowCollection(userTopics, collectionTopics)
     }
 
     private fun shouldShowCollection(userTopics: List<String>, collectionTopics: List<String>): Boolean {
diff --git a/data/repo/src/main/java/com/kafka/data/feature/item/FileMapper.kt b/data/repo/src/main/java/com/kafka/data/feature/item/FileMapper.kt
index 964dbb97..abd0531c 100644
--- a/data/repo/src/main/java/com/kafka/data/feature/item/FileMapper.kt
+++ b/data/repo/src/main/java/com/kafka/data/feature/item/FileMapper.kt
@@ -25,7 +25,7 @@ class FileMapper @Inject constructor() {
             readerUrl = if (extension.isText()) URL("$prefix/$name").toString() else null,
             downloadUrl = URL("$prefix/$name").toString(),
             coverImage = item.coverImage,
-            localUri = localUri
+            localUri = localUri,
         )
     }
 }
diff --git a/data/repo/src/main/java/com/kafka/data/feature/item/ItemDataSource.kt b/data/repo/src/main/java/com/kafka/data/feature/item/ItemDataSource.kt
index 5d668450..ee920d71 100644
--- a/data/repo/src/main/java/com/kafka/data/feature/item/ItemDataSource.kt
+++ b/data/repo/src/main/java/com/kafka/data/feature/item/ItemDataSource.kt
@@ -12,7 +12,7 @@ import javax.inject.Inject
 class ItemDataSource @Inject constructor(
     private val archiveService: ArchiveService,
     private val itemMapper: ItemMapper,
-    private val dispatchers: CoroutineDispatchers
+    private val dispatchers: CoroutineDispatchers,
 ) {
 
     suspend fun fetchItemsByQuery(query: String): Result<List<Item>> {
diff --git a/data/repo/src/main/java/com/kafka/data/feature/item/ItemDetailDataSource.kt b/data/repo/src/main/java/com/kafka/data/feature/item/ItemDetailDataSource.kt
index 2eebcdcf..9b47a471 100644
--- a/data/repo/src/main/java/com/kafka/data/feature/item/ItemDetailDataSource.kt
+++ b/data/repo/src/main/java/com/kafka/data/feature/item/ItemDetailDataSource.kt
@@ -11,13 +11,12 @@ class ItemDetailDataSource @Inject constructor(
     private val dispatchers: CoroutineDispatchers,
     private val itemDetailDao: ItemDetailDao,
     private val itemDetailMapper: ItemDetailMapper,
-    private val archiveService: ArchiveService
+    private val archiveService: ArchiveService,
 ) {
     suspend fun updateItemDetail(contentId: String) = resultApiCall(dispatchers.io) {
-        itemDetailMapper.map(archiveService.getItemDetail(contentId))
-            .let {
-                debug { "Item detail is $it" }
-                itemDetailDao.insert(it)
-            }
+        itemDetailMapper.map(archiveService.getItemDetail(contentId)).let {
+            debug { "Item detail is $it" }
+            itemDetailDao.insert(it)
+        }
     }
 }
diff --git a/data/repo/src/main/java/com/kafka/data/feature/item/ItemDetailMapper.kt b/data/repo/src/main/java/com/kafka/data/feature/item/ItemDetailMapper.kt
index 6f137e67..281d1368 100644
--- a/data/repo/src/main/java/com/kafka/data/feature/item/ItemDetailMapper.kt
+++ b/data/repo/src/main/java/com/kafka/data/feature/item/ItemDetailMapper.kt
@@ -13,7 +13,7 @@ import javax.inject.Inject
 class ItemDetailMapper @Inject constructor(
     private val fileDao: FileDao,
     private val itemDao: ItemDao,
-    private val fileMapper: FileMapper
+    private val fileMapper: FileMapper,
 ) {
     suspend fun map(from: ItemDetailResponse): ItemDetail {
         debug { "mapping item detail: ${from.files.joinToString { it.name }}" }
@@ -35,7 +35,7 @@ class ItemDetailMapper @Inject constructor(
                 ?.map { it.substring(0, it.length.coerceAtMost(50)) }
                 ?.map { it.trim() }
                 ?.filter { it.isNotEmpty() },
-            rating = itemDao.getOrNull(from.metadata.identifier)?.rating
+            rating = itemDao.getOrNull(from.metadata.identifier)?.rating,
         ).also {
             insertFiles(from, it)
         }
@@ -44,15 +44,13 @@ class ItemDetailMapper @Inject constructor(
     private fun List<File>.primaryFile(mediaType: String?) =
         if (mediaType == "texts") getTextFile() else firstOrNull()
 
-    private fun List<File>.getTextFile() =
-        firstOrNull { it.name.extension() == "pdf" }
-            ?: firstOrNull { it.name.extension() == "txt" }
+    private fun List<File>.getTextFile() = firstOrNull { it.name.extension() == "pdf" }
 
     private fun String.extension() = split(".").last()
 
     private fun ItemDetailResponse.findCoverImage() = files.firstOrNull {
-        it.name.startsWith("cover_")
-                && (it.name.endsWith("jpg") || it.name.endsWith("png"))
+        it.name.startsWith("cover_") &&
+                (it.name.endsWith("jpg") || it.name.endsWith("png"))
     }?.let { "https://archive.org/download/${metadata.identifier}/${it.name}" }
         ?: "https://archive.org/services/img/${metadata.identifier}"
 
@@ -62,7 +60,7 @@ class ItemDetailMapper @Inject constructor(
                 file = file,
                 item = item,
                 prefix = from.dirPrefix(),
-                localUri = fileDao.getOrNull(file.name)?.localUri
+                localUri = fileDao.getOrNull(file.name)?.localUri,
             )
         }.filter { supportedExtensions.contains(it.extension) }
 
@@ -73,4 +71,3 @@ class ItemDetailMapper @Inject constructor(
 fun String?.format() = Html.fromHtml(this, 0)?.toString()
 
 fun ItemDetailResponse.dirPrefix() = "https://$server$dir"
-
diff --git a/data/repo/src/main/java/com/kafka/data/feature/item/ItemMapper.kt b/data/repo/src/main/java/com/kafka/data/feature/item/ItemMapper.kt
index f3099097..06494c00 100644
--- a/data/repo/src/main/java/com/kafka/data/feature/item/ItemMapper.kt
+++ b/data/repo/src/main/java/com/kafka/data/feature/item/ItemMapper.kt
@@ -7,7 +7,7 @@ import com.kafka.data.model.item.SearchResponse
 import javax.inject.Inject
 
 class ItemMapper @Inject constructor() {
-     fun map(from: SearchResponse): List<Item> {
+    fun map(from: SearchResponse): List<Item> {
         return from.response?.docs?.map { doc -> doc.toItem() }.orEmpty()
     }
 
@@ -23,7 +23,7 @@ class ItemMapper @Inject constructor() {
         genre = this.subject,
         position = this.downloads,
         subject = subject?.joinToString(","),
-        rating = this.rating
+        rating = this.rating,
     )
 }
 
diff --git a/data/repo/src/main/java/com/kafka/data/feature/item/ItemRepository.kt b/data/repo/src/main/java/com/kafka/data/feature/item/ItemRepository.kt
index bbf6af7f..b05d5366 100644
--- a/data/repo/src/main/java/com/kafka/data/feature/item/ItemRepository.kt
+++ b/data/repo/src/main/java/com/kafka/data/feature/item/ItemRepository.kt
@@ -3,6 +3,9 @@ package com.kafka.data.feature.item
 import androidx.sqlite.db.SimpleSQLiteQuery
 import com.kafka.data.dao.ItemLocalDataSource
 import com.kafka.data.entities.Item
+import com.kafka.data.prefs.PreferencesStore
+import com.kafka.data.prefs.observeSafeMode
+import kotlinx.coroutines.flow.combine
 import javax.inject.Inject
 
 /**
@@ -11,10 +14,15 @@ import javax.inject.Inject
  */
 class ItemRepository @Inject constructor(
     private val itemLocalDataSource: ItemLocalDataSource,
-    private val remoteDataSource: ItemDataSource
+    private val remoteDataSource: ItemDataSource,
+    private val preferencesStore: PreferencesStore
 ) {
-    fun observeQueryItems(simpleSQLiteQuery: SimpleSQLiteQuery) =
-        itemLocalDataSource.observeQueryItems(simpleSQLiteQuery)
+    fun observeQueryItems(simpleSQLiteQuery: SimpleSQLiteQuery) = combine(
+        itemLocalDataSource.observeQueryItems(simpleSQLiteQuery),
+        preferencesStore.observeSafeMode()
+    ) { items, safeMode ->
+        items.filter { !safeMode || !it.isInappropriate }
+    }
 
     suspend fun updateQuery(query: String) =
         remoteDataSource.fetchItemsByQuery(query).getOrThrow()
diff --git a/data/repo/src/main/java/com/kafka/data/feature/item/ItemWithDownload.kt b/data/repo/src/main/java/com/kafka/data/feature/item/ItemWithDownload.kt
index 8ae332c7..9d7dc6d3 100644
--- a/data/repo/src/main/java/com/kafka/data/feature/item/ItemWithDownload.kt
+++ b/data/repo/src/main/java/com/kafka/data/feature/item/ItemWithDownload.kt
@@ -11,7 +11,7 @@ data class ItemWithDownload(
     val downloadRequest: DownloadRequest,
     val downloadInfo: DownloadInfo,
     val file: File,
-    val item: Item
+    val item: Item,
 )
 
 @Immutable
@@ -20,7 +20,7 @@ data class DownloadInfo(
     val progress: Float,
     val status: DownloadStatus,
     val fileUri: Uri,
-    val sizeStatus: String?
+    val sizeStatus: String?,
 )
 
 enum class DownloadStatus {
@@ -32,7 +32,8 @@ enum class DownloadStatus {
     FAILED,
     REMOVED,
     DELETED,
-    UNKNOWN;
+    UNKNOWN,
+    ;
 
     fun isActive() = this == DOWNLOADING || this == PAUSED
 }
diff --git a/data/repo/src/main/java/com/kafka/data/feature/recommendation/RecommendationEvents.kt b/data/repo/src/main/java/com/kafka/data/feature/recommendation/RecommendationEvents.kt
new file mode 100644
index 00000000..f79ce574
--- /dev/null
+++ b/data/repo/src/main/java/com/kafka/data/feature/recommendation/RecommendationEvents.kt
@@ -0,0 +1,12 @@
+package com.kafka.data.feature.recommendation
+
+enum class RecommendationRelationship {
+    Viewed,
+    Favorited,
+    Used
+}
+
+sealed class RecommendationObject(val id: String, val key: String) {
+    data class User(val userId: String) : RecommendationObject(userId, "user")
+    data class Content(val contentId: String) : RecommendationObject(contentId, "content")
+}
diff --git a/data/repo/src/main/java/com/kafka/data/feature/recommendation/RecommendationRepository.kt b/data/repo/src/main/java/com/kafka/data/feature/recommendation/RecommendationRepository.kt
new file mode 100644
index 00000000..195b2b23
--- /dev/null
+++ b/data/repo/src/main/java/com/kafka/data/feature/recommendation/RecommendationRepository.kt
@@ -0,0 +1,58 @@
+package com.kafka.data.feature.recommendation
+
+import com.kafka.data.feature.recommendation.network.RecommendationService
+import com.kafka.data.model.recommendation.RecommendationRequestBody
+import com.kafka.data.model.recommendation.RecommendationRequestBody.RecommendationEvent
+import com.kafka.data.model.recommendation.RecommendationRequestBody.RecommendationEvent.EndObject
+import com.kafka.data.model.recommendation.RecommendationRequestBody.RecommendationEvent.Relationship
+import com.kafka.data.model.recommendation.RecommendationRequestBody.RecommendationEvent.StartObject
+import org.kafka.base.CoroutineDispatchers
+import org.kafka.base.network.resultApiCall
+import org.threeten.bp.LocalDateTime
+import org.threeten.bp.format.DateTimeFormatter
+import java.util.Locale
+import javax.inject.Inject
+import javax.inject.Singleton
+
+@Singleton
+class RecommendationRepository @Inject constructor(
+    private val recommendationService: RecommendationService,
+    private val dispatchers: CoroutineDispatchers
+) {
+
+    suspend fun postEvent(
+        recommendationObjectFrom: RecommendationObject,
+        recommendationRelationship: RecommendationRelationship,
+        recommendationObjectTo: RecommendationObject
+    ) = resultApiCall(dispatchers.io) {
+        val event = RecommendationEvent(
+            StartObject(
+                createdOn = currentDate(),
+                id = recommendationObjectFrom.id,
+                type = recommendationObjectFrom.key
+            ),
+            Relationship(
+                createdOn = currentDate(),
+                type = recommendationRelationship.name.lowercase()
+            ),
+            EndObject(
+                createdOn = currentDate(),
+                id = recommendationObjectTo.id,
+                type = recommendationObjectTo.key
+            ),
+        )
+
+        recommendationService.postEvent(
+            appId = pipelessAppId,
+            body = RecommendationRequestBody(event)
+        )
+    }
+
+    private val pipelessAppId = 1763
+
+    private fun currentDate(): String {
+        val outputFormatter = DateTimeFormatter.ofPattern("yyyy-MM-dd'T'HH:mm:ss", Locale.ENGLISH)
+        val date: LocalDateTime = LocalDateTime.now()
+        return outputFormatter.format(date).orEmpty()
+    }
+}
diff --git a/data/repo/src/main/java/com/kafka/data/feature/recommendation/network/RecommendationAuthInterceptor.kt b/data/repo/src/main/java/com/kafka/data/feature/recommendation/network/RecommendationAuthInterceptor.kt
new file mode 100644
index 00000000..921e0588
--- /dev/null
+++ b/data/repo/src/main/java/com/kafka/data/feature/recommendation/network/RecommendationAuthInterceptor.kt
@@ -0,0 +1,19 @@
+package com.kafka.data.feature.recommendation.network
+
+import okhttp3.Interceptor
+import okhttp3.Response
+import org.kafka.base.SecretsProvider
+import javax.inject.Inject
+
+class RecommendationAuthInterceptor @Inject constructor(
+    private val secretsProvider: SecretsProvider
+) : Interceptor {
+
+    override fun intercept(chain: Interceptor.Chain): Response {
+        val originalRequest = chain.request()
+        val newRequest = originalRequest.newBuilder()
+            .addHeader("Authorization", "Bearer ${secretsProvider.pipelessAuthToken}")
+            .build()
+        return chain.proceed(newRequest)
+    }
+}
diff --git a/data/repo/src/main/java/com/kafka/data/feature/recommendation/network/RecommendationModule.kt b/data/repo/src/main/java/com/kafka/data/feature/recommendation/network/RecommendationModule.kt
new file mode 100644
index 00000000..95f55708
--- /dev/null
+++ b/data/repo/src/main/java/com/kafka/data/feature/recommendation/network/RecommendationModule.kt
@@ -0,0 +1,47 @@
+package com.kafka.data.feature.recommendation.network
+
+import com.jakewharton.retrofit2.converter.kotlinx.serialization.asConverterFactory
+import dagger.Module
+import dagger.Provides
+import dagger.hilt.InstallIn
+import dagger.hilt.components.SingletonComponent
+import kotlinx.serialization.ExperimentalSerializationApi
+import kotlinx.serialization.json.Json
+import okhttp3.MediaType.Companion.toMediaType
+import okhttp3.OkHttpClient
+import okhttp3.logging.HttpLoggingInterceptor
+import retrofit2.Retrofit
+import javax.inject.Named
+import javax.inject.Singleton
+
+@InstallIn(SingletonComponent::class)
+@Module
+class RecommendationModule {
+    @Provides
+    @Named("recommendation")
+    @Singleton
+    @ExperimentalSerializationApi
+    fun retrofit(
+        client: OkHttpClient,
+        json: Json,
+        loggingInterceptor: HttpLoggingInterceptor,
+        recommendationAuthInterceptor: RecommendationAuthInterceptor
+    ): Retrofit =
+        Retrofit.Builder()
+            .baseUrl("https://api.pipeless.io/v1/")
+            .addConverterFactory(json.asConverterFactory("application/json".toMediaType()))
+            .client(client.run {
+                newBuilder()
+                    .addInterceptor(recommendationAuthInterceptor)
+                    .addInterceptor(loggingInterceptor)
+                    .build()
+            })
+            .build()
+
+    @Provides
+    fun provideRecommendationService(
+        @Named("recommendation") retrofit: Retrofit,
+    ): RecommendationService {
+        return retrofit.create(RecommendationService::class.java)
+    }
+}
diff --git a/data/repo/src/main/java/com/kafka/data/feature/recommendation/network/RecommendationService.kt b/data/repo/src/main/java/com/kafka/data/feature/recommendation/network/RecommendationService.kt
new file mode 100644
index 00000000..69091897
--- /dev/null
+++ b/data/repo/src/main/java/com/kafka/data/feature/recommendation/network/RecommendationService.kt
@@ -0,0 +1,15 @@
+package com.kafka.data.feature.recommendation.network
+
+import com.kafka.data.model.recommendation.RecommendationRequestBody
+import okhttp3.ResponseBody
+import retrofit2.http.Body
+import retrofit2.http.POST
+import retrofit2.http.Path
+
+interface RecommendationService {
+    @POST("apps/{app_id}/events")
+    suspend fun postEvent(
+        @Path("app_id") appId: Int,
+        @Body body: RecommendationRequestBody,
+    ): ResponseBody
+}
diff --git a/data/repo/src/main/java/com/kafka/data/injection/NetworkModule.kt b/data/repo/src/main/java/com/kafka/data/injection/NetworkModule.kt
index 17ba7842..4d57389f 100644
--- a/data/repo/src/main/java/com/kafka/data/injection/NetworkModule.kt
+++ b/data/repo/src/main/java/com/kafka/data/injection/NetworkModule.kt
@@ -61,7 +61,7 @@ class NetworkModule {
     fun retrofit(
         client: OkHttpClient,
         json: Json,
-        loggingInterceptor: HttpLoggingInterceptor
+        loggingInterceptor: HttpLoggingInterceptor,
     ): Retrofit =
         Retrofit.Builder()
             .baseUrl(baseUrl)
@@ -71,7 +71,7 @@ class NetworkModule {
 
     @Provides
     fun provideService(
-        retrofit: Retrofit
+        retrofit: Retrofit,
     ): ArchiveService {
         return retrofit.create(ArchiveService::class.java)
     }
@@ -83,9 +83,11 @@ class NetworkModule {
     ) = getBaseBuilder(cache)
         .readTimeout(Config.DOWNLOADER_TIMEOUT, TimeUnit.MILLISECONDS)
         .writeTimeout(Config.DOWNLOADER_TIMEOUT, TimeUnit.MILLISECONDS)
-        .addInterceptor(HttpLoggingInterceptor().apply {
-            level = HttpLoggingInterceptor.Level.HEADERS
-        })
+        .addInterceptor(
+            HttpLoggingInterceptor().apply {
+                level = HttpLoggingInterceptor.Level.HEADERS
+            },
+        )
         .build()
 
     @Suppress("UNCHECKED_CAST")
@@ -93,7 +95,7 @@ class NetworkModule {
     @Provides
     @Singleton
     fun provideSerializersModule(
-        polymorphicDefaultPairs: Set<@JvmSuppressWildcards SerializationPolymorphicDefaultPair<*>>
+        polymorphicDefaultPairs: Set<@JvmSuppressWildcards SerializationPolymorphicDefaultPair<*>>,
     ): SerializersModule = SerializersModule {
         polymorphicDefaultPairs.forEach { (base, default) ->
             polymorphicDefaultDeserializer(base as KClass<Any>) { default.serializer() }
diff --git a/data/repo/src/main/java/com/kafka/data/injection/SerializersModule.kt b/data/repo/src/main/java/com/kafka/data/injection/SerializersModule.kt
index 84eadbb1..7cde8777 100644
--- a/data/repo/src/main/java/com/kafka/data/injection/SerializersModule.kt
+++ b/data/repo/src/main/java/com/kafka/data/injection/SerializersModule.kt
@@ -16,6 +16,6 @@ class SerializersModule {
     internal fun provideHomepageResponsePolymorphicDefaultPair(): SerializationPolymorphicDefaultPair<*> =
         SerializationPolymorphicDefaultPair(
             base = HomepageCollectionResponse::class,
-            default = HomepageCollectionResponse.Unknown::class
+            default = HomepageCollectionResponse.Unknown::class,
         )
 }
diff --git a/domain/build.gradle b/domain/build.gradle
index 0d7e2d1f..aafe731c 100644
--- a/domain/build.gradle
+++ b/domain/build.gradle
@@ -15,6 +15,7 @@ android {
 }
 
 dependencies {
+    api project(':core:remote-config')
     api project(':data:repo')
     implementation libs.kotlin.coroutines.android
 
@@ -27,4 +28,5 @@ dependencies {
     implementation libs.google.auth
     implementation libs.google.coroutines
     implementation libs.google.firestore
+    implementation libs.google.playservices.auth
 }
diff --git a/domain/src/main/java/org/kafka/domain/Combine.kt b/domain/src/main/java/org/kafka/domain/Combine.kt
new file mode 100644
index 00000000..b7c14c4c
--- /dev/null
+++ b/domain/src/main/java/org/kafka/domain/Combine.kt
@@ -0,0 +1,47 @@
+package org.kafka.domain
+
+import kotlinx.coroutines.flow.Flow
+
+@Suppress("UNCHECKED_CAST")
+fun <T1, T2, T3, T4, T5, T6, R> combine(
+    flow: Flow<T1>,
+    flow2: Flow<T2>,
+    flow3: Flow<T3>,
+    flow4: Flow<T4>,
+    flow5: Flow<T5>,
+    flow6: Flow<T6>,
+    transform: suspend (T1, T2, T3, T4, T5, T6) -> R,
+): Flow<R> =
+    kotlinx.coroutines.flow.combine(flow, flow2, flow3, flow4, flow5, flow6) { args: Array<*> ->
+        transform(
+            args[0] as T1,
+            args[1] as T2,
+            args[2] as T3,
+            args[3] as T4,
+            args[4] as T5,
+            args[5] as T6,
+        )
+    }
+
+@Suppress("UNCHECKED_CAST")
+fun <T1, T2, T3, T4, T5, T6, T7, R> combine(
+    flow: Flow<T1>,
+    flow2: Flow<T2>,
+    flow3: Flow<T3>,
+    flow4: Flow<T4>,
+    flow5: Flow<T5>,
+    flow6: Flow<T6>,
+    flow7: Flow<T7>,
+    transform: suspend (T1, T2, T3, T4, T5, T6, T7) -> R,
+): Flow<R> =
+    kotlinx.coroutines.flow.combine(flow, flow2, flow3, flow4, flow5, flow6, flow7) { args: Array<*> ->
+        transform(
+            args[0] as T1,
+            args[1] as T2,
+            args[2] as T3,
+            args[3] as T4,
+            args[4] as T5,
+            args[5] as T6,
+            args[6] as T7,
+        )
+    }
diff --git a/domain/src/main/java/org/kafka/domain/interactors/AddRecentSearch.kt b/domain/src/main/java/org/kafka/domain/interactors/AddRecentSearch.kt
index 134c2c88..12119eb4 100644
--- a/domain/src/main/java/org/kafka/domain/interactors/AddRecentSearch.kt
+++ b/domain/src/main/java/org/kafka/domain/interactors/AddRecentSearch.kt
@@ -9,7 +9,7 @@ import javax.inject.Inject
 
 class AddRecentSearch @Inject constructor(
     private val dispatchers: CoroutineDispatchers,
-    private val recentSearchDao: RecentSearchDao
+    private val recentSearchDao: RecentSearchDao,
 ) : Interactor<String>() {
 
     override suspend fun doWork(params: String) {
diff --git a/domain/src/main/java/org/kafka/domain/interactors/GetReaderState.kt b/domain/src/main/java/org/kafka/domain/interactors/GetReaderState.kt
new file mode 100644
index 00000000..c269b6e2
--- /dev/null
+++ b/domain/src/main/java/org/kafka/domain/interactors/GetReaderState.kt
@@ -0,0 +1,72 @@
+package org.kafka.domain.interactors
+
+import com.kafka.data.dao.FileDao
+import com.kafka.data.dao.ItemDetailDao
+import com.kafka.data.dao.RecentTextDao
+import com.kafka.data.entities.RecentTextItem
+import com.kafka.data.entities.nameWithoutExtension
+import kotlinx.coroutines.withContext
+import org.kafka.base.CoroutineDispatchers
+import org.kafka.base.domain.ResultInteractor
+import org.kafka.base.extensions.encodeUri
+import javax.inject.Inject
+
+class GetReaderState @Inject constructor(
+    private val itemDetailDao: ItemDetailDao,
+    private val fileDao: FileDao,
+    private val recentTextDao: RecentTextDao,
+    private val dispatchers: CoroutineDispatchers
+) : ResultInteractor<String, ReaderState>() {
+
+    @Suppress("PARAMETER_NAME_CHANGED_ON_OVERRIDE")
+    override suspend fun doWork(itemId: String): ReaderState {
+        return withContext(dispatchers.io) {
+            val itemDetail = itemDetailDao.get(itemId)
+            val fileId = itemDetail.primaryFile!!
+            val file = fileDao.getOrNull(fileId)
+            val recentText = itemDetail.primaryFile?.let { recentTextDao.getOrNull(it) }
+            val currentPage = recentText?.currentPage ?: 1
+
+            if (recentText == null) {
+                recentTextDao.insert(createEmptyText(fileId, currentPage))
+            }
+
+            val baseUrl = "https://archive.org/details"
+            val fileName = file?.nameWithoutExtension().orEmpty()
+            val idSegment = if (file != null) "/$itemId/${fileName.encodeUri()}" else "/$itemId"
+            val pageSegment = if (currentPage == 1) "" else "/page/n${currentPage - 1}" // archive reader index starts at 0
+
+            val url = "$baseUrl$idSegment$pageSegment/mode/1up?view=theater"
+
+            ReaderState(
+                url = url,
+                itemId = itemId,
+                fileId = fileId,
+                itemTitle = itemDetail.title,
+                currentPage = currentPage
+            )
+        }
+    }
+
+    private fun createEmptyText(fileId: String, currentPage: Int) = RecentTextItem(
+        fileId = fileId,
+        currentPage = currentPage,
+        localUri = "",
+        type = RecentTextItem.Type.PDF,
+        pages = emptyList()
+    )
+}
+
+data class ReaderState(
+    val url: String,
+    val itemId: String,
+    val fileId: String,
+    val itemTitle: String?,
+    val currentPage: Int
+)
+
+fun String.getCurrentPageFromReaderUrl(): Int {
+    val segments = split("/")
+    val index = segments.indexOf("page")
+    return segments[index + 1].removePrefix("n").toIntOrNull() ?: 1
+}
diff --git a/domain/src/main/java/org/kafka/domain/interactors/ReadTextFromUri.kt b/domain/src/main/java/org/kafka/domain/interactors/ReadTextFromUri.kt
index 7aec0ec3..042f7089 100644
--- a/domain/src/main/java/org/kafka/domain/interactors/ReadTextFromUri.kt
+++ b/domain/src/main/java/org/kafka/domain/interactors/ReadTextFromUri.kt
@@ -21,7 +21,8 @@ class ReadTextFromUri @Inject constructor(private val application: Application)
 
             while (withContext(Dispatchers.IO) {
                     r.readLine()
-                }.also { line = it } != null) {
+                }.also { line = it } != null
+            ) {
                 if (lineNumber % 30 == 0) {
                     pages.add(page.toString())
                     page.clear()
diff --git a/domain/src/main/java/org/kafka/domain/interactors/SearchQueryItems.kt b/domain/src/main/java/org/kafka/domain/interactors/SearchQueryItems.kt
index de5f0eed..b294778a 100644
--- a/domain/src/main/java/org/kafka/domain/interactors/SearchQueryItems.kt
+++ b/domain/src/main/java/org/kafka/domain/interactors/SearchQueryItems.kt
@@ -36,7 +36,7 @@ class SearchQueryItems @Inject constructor(
 internal fun buildQuery(
     keyword: String,
     searchFilters: List<SearchFilter> = SearchFilter.values().toList(),
-    contentType: ContentType = ContentType.DEFAULT
+    contentType: ContentType = ContentType.DEFAULT,
 ): ArchiveQuery {
     val query = ArchiveQuery()
     searchFilters.forEach {
diff --git a/domain/src/main/java/org/kafka/domain/interactors/UpdateCurrentPage.kt b/domain/src/main/java/org/kafka/domain/interactors/UpdateCurrentPage.kt
index 0b5e0fe4..459396b1 100644
--- a/domain/src/main/java/org/kafka/domain/interactors/UpdateCurrentPage.kt
+++ b/domain/src/main/java/org/kafka/domain/interactors/UpdateCurrentPage.kt
@@ -3,16 +3,18 @@ package org.kafka.domain.interactors
 import com.kafka.data.dao.RecentTextDao
 import kotlinx.coroutines.withContext
 import org.kafka.base.CoroutineDispatchers
+import org.kafka.base.debug
 import org.kafka.base.domain.Interactor
 import javax.inject.Inject
 
 class UpdateCurrentPage @Inject constructor(
     private val dispatchers: CoroutineDispatchers,
-    private val recentTextDao: RecentTextDao
+    private val recentTextDao: RecentTextDao,
 ) : Interactor<UpdateCurrentPage.Params>() {
 
     override suspend fun doWork(params: Params) {
         withContext(dispatchers.io) {
+            debug { "UpdateCurrentPage: $params" }
             recentTextDao.updateCurrentPage(params.fileId, params.currentPage)
         }
     }
diff --git a/domain/src/main/java/org/kafka/domain/interactors/UpdateCurrentTimestamp.kt b/domain/src/main/java/org/kafka/domain/interactors/UpdateCurrentTimestamp.kt
index d7270daa..32bf25d5 100644
--- a/domain/src/main/java/org/kafka/domain/interactors/UpdateCurrentTimestamp.kt
+++ b/domain/src/main/java/org/kafka/domain/interactors/UpdateCurrentTimestamp.kt
@@ -8,7 +8,7 @@ import javax.inject.Inject
 
 class UpdateCurrentTimestamp @Inject constructor(
     private val dispatchers: CoroutineDispatchers,
-    private val recentAudioDao: RecentAudioDao
+    private val recentAudioDao: RecentAudioDao,
 ) : Interactor<UpdateCurrentTimestamp.Params>() {
 
     override suspend fun doWork(params: Params) {
diff --git a/domain/src/main/java/org/kafka/domain/interactors/UpdateFavorite.kt b/domain/src/main/java/org/kafka/domain/interactors/UpdateFavorite.kt
index 8e03e682..983b021e 100644
--- a/domain/src/main/java/org/kafka/domain/interactors/UpdateFavorite.kt
+++ b/domain/src/main/java/org/kafka/domain/interactors/UpdateFavorite.kt
@@ -11,19 +11,22 @@ import org.kafka.base.CoroutineDispatchers
 import org.kafka.base.debug
 import org.kafka.base.domain.Interactor
 import org.kafka.domain.interactors.account.SignInAnonymously
+import org.kafka.domain.interactors.recommendation.PostRecommendationEvent
+import org.kafka.domain.interactors.recommendation.PostRecommendationEvent.RecommendationEvent.FavoriteContent
 import javax.inject.Inject
 
 class UpdateFavorite @Inject constructor(
     private val signInAnonymously: SignInAnonymously,
     private val accountRepository: AccountRepository,
     private val favoritesRepository: FavoritesRepository,
+    private val postRecommendationEvent: PostRecommendationEvent,
     private val itemDetailDao: ItemDetailDao,
     private val analytics: Analytics,
-    private val dispatchers: CoroutineDispatchers
+    private val dispatchers: CoroutineDispatchers,
 ) : Interactor<UpdateFavorite.Params>() {
     override suspend fun doWork(params: Params) {
         withContext(dispatchers.io) {
-            if (params.isFavorite) {
+            if (params.markFavorite) {
                 analytics.log { addFavorite((params.itemId)) }
             } else {
                 analytics.log { removeFavorite((params.itemId)) }
@@ -34,8 +37,14 @@ class UpdateFavorite @Inject constructor(
             }
 
             val itemDetail = itemDetailDao.get(params.itemId)
-            favoritesRepository.updateFavorite(mapFavoriteItem(itemDetail), params.isFavorite)
-            debug { "Favorite updated: ${params.itemId} isFavorite: ${params.isFavorite}" }
+            favoritesRepository.updateFavorite(mapFavoriteItem(itemDetail), params.markFavorite)
+            debug { "Favorite updated: ${params.itemId} isFavorite: ${params.markFavorite}" }
+
+            withContext(dispatchers.io) {
+                if (params.markFavorite) {
+                    postRecommendationEvent.execute(FavoriteContent(params.itemId))
+                }
+            }
         }
     }
 
@@ -45,9 +54,9 @@ class UpdateFavorite @Inject constructor(
             title = itemDetail.title.orEmpty(),
             creator = itemDetail.creator.orEmpty(),
             mediaType = itemDetail.mediaType.orEmpty(),
-            coverImage = itemDetail.coverImage.orEmpty()
+            coverImage = itemDetail.coverImage.orEmpty(),
         )
     }
 
-    data class Params(val itemId: String, val isFavorite: Boolean)
+    data class Params(val itemId: String, val markFavorite: Boolean)
 }
diff --git a/domain/src/main/java/org/kafka/domain/interactors/UpdateFeedback.kt b/domain/src/main/java/org/kafka/domain/interactors/UpdateFeedback.kt
index fb08a12f..5bfdefb4 100644
--- a/domain/src/main/java/org/kafka/domain/interactors/UpdateFeedback.kt
+++ b/domain/src/main/java/org/kafka/domain/interactors/UpdateFeedback.kt
@@ -10,13 +10,13 @@ import javax.inject.Inject
 class UpdateFeedback @Inject constructor(
     private val firestoreGraph: FirestoreGraph,
     private val auth: FirebaseAuth,
-    private val dispatchers: CoroutineDispatchers
+    private val dispatchers: CoroutineDispatchers,
 ) : Interactor<UpdateFeedback.Params>() {
     override suspend fun doWork(params: Params) {
         withContext(dispatchers.io) {
             val email = params.email ?: auth.currentUser?.email
             firestoreGraph.feedbackCollection.document.set(
-                mapOf("text" to params.text, "email" to email)
+                mapOf("text" to params.text, "email" to email),
             )
         }
     }
diff --git a/domain/src/main/java/org/kafka/domain/interactors/UpdateHomepage.kt b/domain/src/main/java/org/kafka/domain/interactors/UpdateHomepage.kt
index ffa34b97..bb1b7ed8 100644
--- a/domain/src/main/java/org/kafka/domain/interactors/UpdateHomepage.kt
+++ b/domain/src/main/java/org/kafka/domain/interactors/UpdateHomepage.kt
@@ -17,7 +17,7 @@ class UpdateHomepage @Inject constructor(
     private val dispatchers: CoroutineDispatchers,
     private val homepageRepository: HomepageRepository,
     private val itemRepository: ItemRepository,
-    private val buildRemoteQuery: BuildRemoteQuery
+    private val buildRemoteQuery: BuildRemoteQuery,
 ) : Interactor<Unit>() {
 
     override suspend fun doWork(params: Unit) {
@@ -36,5 +36,5 @@ class UpdateHomepage @Inject constructor(
 }
 
 private suspend fun <T, R> List<T>.mapAsync(
-    mapper: suspend (T) -> R
-): List<R> = coroutineScope { map { async { mapper(it) } }.awaitAll() }
\ No newline at end of file
+    mapper: suspend (T) -> R,
+): List<R> = coroutineScope { map { async { mapper(it) } }.awaitAll() }
diff --git a/domain/src/main/java/org/kafka/domain/interactors/UpdateItemDetail.kt b/domain/src/main/java/org/kafka/domain/interactors/UpdateItemDetail.kt
index 6f21bb6a..37c8d756 100644
--- a/domain/src/main/java/org/kafka/domain/interactors/UpdateItemDetail.kt
+++ b/domain/src/main/java/org/kafka/domain/interactors/UpdateItemDetail.kt
@@ -4,16 +4,23 @@ import com.kafka.data.feature.item.ItemDetailDataSource
 import kotlinx.coroutines.withContext
 import org.kafka.base.CoroutineDispatchers
 import org.kafka.base.domain.Interactor
+import org.kafka.domain.interactors.recommendation.PostRecommendationEvent
+import org.kafka.domain.interactors.recommendation.PostRecommendationEvent.RecommendationEvent.ViewContent
 import javax.inject.Inject
 
 class UpdateItemDetail @Inject constructor(
     private val dispatchers: CoroutineDispatchers,
     private val repository: ItemDetailDataSource,
+    private val postRecommendationEvent: PostRecommendationEvent
 ) : Interactor<UpdateItemDetail.Param>() {
 
     override suspend fun doWork(params: Param) {
         withContext(dispatchers.io) {
             repository.updateItemDetail(params.contentId).getOrThrow()
+
+            withContext(dispatchers.io) {
+                postRecommendationEvent.execute(ViewContent(params.contentId))
+            }
         }
     }
 
diff --git a/domain/src/main/java/org/kafka/domain/interactors/UpdateItems.kt b/domain/src/main/java/org/kafka/domain/interactors/UpdateItems.kt
index 7822719b..5eec8610 100644
--- a/domain/src/main/java/org/kafka/domain/interactors/UpdateItems.kt
+++ b/domain/src/main/java/org/kafka/domain/interactors/UpdateItems.kt
@@ -12,7 +12,7 @@ import javax.inject.Inject
 class UpdateItems @Inject constructor(
     private val dispatchers: CoroutineDispatchers,
     private val buildRemoteQuery: BuildRemoteQuery,
-    private val itemRepository: ItemRepository
+    private val itemRepository: ItemRepository,
 ) : Interactor<UpdateItems.Params>() {
 
     override suspend fun doWork(params: Params) {
diff --git a/domain/src/main/java/org/kafka/domain/interactors/UpdateRecentItem.kt b/domain/src/main/java/org/kafka/domain/interactors/UpdateRecentItem.kt
index 5a821b8d..651de5a0 100644
--- a/domain/src/main/java/org/kafka/domain/interactors/UpdateRecentItem.kt
+++ b/domain/src/main/java/org/kafka/domain/interactors/UpdateRecentItem.kt
@@ -7,7 +7,7 @@ import org.kafka.base.domain.Interactor
 import javax.inject.Inject
 
 class UpdateRecentItem @Inject constructor(
-    private val firestoreGraph: FirestoreGraph
+    private val firestoreGraph: FirestoreGraph,
 ) : Interactor<RecentItem>() {
     override suspend fun doWork(params: RecentItem) {
         val document = firestoreGraph.recentItemsCollection.document(params.fileId)
diff --git a/domain/src/main/java/org/kafka/domain/interactors/account/HandleGoogleCredentials.kt b/domain/src/main/java/org/kafka/domain/interactors/account/HandleGoogleCredentials.kt
new file mode 100644
index 00000000..60e55f67
--- /dev/null
+++ b/domain/src/main/java/org/kafka/domain/interactors/account/HandleGoogleCredentials.kt
@@ -0,0 +1,36 @@
+package org.kafka.domain.interactors.account
+
+import android.app.Application
+import android.content.Intent
+import com.google.android.gms.auth.api.identity.Identity
+import com.google.firebase.auth.FirebaseAuth
+import com.google.firebase.auth.GoogleAuthProvider
+import kotlinx.coroutines.tasks.await
+import kotlinx.coroutines.withContext
+import org.kafka.analytics.logger.Analytics
+import org.kafka.base.CoroutineDispatchers
+import org.kafka.base.domain.Interactor
+import javax.inject.Inject
+
+class HandleGoogleCredentials @Inject constructor(
+    private val firebaseAuth: FirebaseAuth,
+    private val dispatchers: CoroutineDispatchers,
+    private val analytics: Analytics,
+    private val application: Application
+) : Interactor<Intent?>() {
+
+    @Suppress("PARAMETER_NAME_CHANGED_ON_OVERRIDE")
+    override suspend fun doWork(intent: Intent?) {
+        withContext(dispatchers.io) {
+            //todo: logout with oneTap
+            val sigInClient = Identity.getSignInClient(application)
+            val account = sigInClient.getSignInCredentialFromIntent(intent)
+            val credentials = GoogleAuthProvider.getCredential(account.googleIdToken, null)
+
+            firebaseAuth.signInWithCredential(credentials).await()
+                ?: error("Failed to sign in with google")
+
+            analytics.log { login("google") }
+        }
+    }
+}
diff --git a/domain/src/main/java/org/kafka/domain/interactors/account/LogoutUser.kt b/domain/src/main/java/org/kafka/domain/interactors/account/LogoutUser.kt
index 85552ff8..cfbb119c 100644
--- a/domain/src/main/java/org/kafka/domain/interactors/account/LogoutUser.kt
+++ b/domain/src/main/java/org/kafka/domain/interactors/account/LogoutUser.kt
@@ -9,7 +9,7 @@ import javax.inject.Inject
 class LogoutUser @Inject constructor(
     private val accountRepository: AccountRepository,
     private val signInAnonymously: SignInAnonymously,
-    private val coroutineDispatchers: CoroutineDispatchers
+    private val coroutineDispatchers: CoroutineDispatchers,
 ) : Interactor<Unit>() {
 
     override suspend fun doWork(params: Unit) {
diff --git a/domain/src/main/java/org/kafka/domain/interactors/account/ResetPassword.kt b/domain/src/main/java/org/kafka/domain/interactors/account/ResetPassword.kt
index 31ac286c..aee37061 100644
--- a/domain/src/main/java/org/kafka/domain/interactors/account/ResetPassword.kt
+++ b/domain/src/main/java/org/kafka/domain/interactors/account/ResetPassword.kt
@@ -8,7 +8,7 @@ import javax.inject.Inject
 
 class ResetPassword @Inject constructor(
     private val accountRepository: AccountRepository,
-    private val dispatchers: CoroutineDispatchers
+    private val dispatchers: CoroutineDispatchers,
 ) : Interactor<ResetPassword.Params>() {
 
     override suspend fun doWork(params: Params) {
diff --git a/domain/src/main/java/org/kafka/domain/interactors/account/SignInAnonymously.kt b/domain/src/main/java/org/kafka/domain/interactors/account/SignInAnonymously.kt
index 7f27b8dd..b50d693f 100644
--- a/domain/src/main/java/org/kafka/domain/interactors/account/SignInAnonymously.kt
+++ b/domain/src/main/java/org/kafka/domain/interactors/account/SignInAnonymously.kt
@@ -5,7 +5,7 @@ import org.kafka.base.domain.Interactor
 import javax.inject.Inject
 
 class SignInAnonymously @Inject constructor(
-    private val accountRepository: AccountRepository
+    private val accountRepository: AccountRepository,
 ) : Interactor<Unit>() {
 
     override suspend fun doWork(params: Unit) {
diff --git a/domain/src/main/java/org/kafka/domain/interactors/account/SignInUser.kt b/domain/src/main/java/org/kafka/domain/interactors/account/SignInUser.kt
index 59b3c19b..1c74257a 100644
--- a/domain/src/main/java/org/kafka/domain/interactors/account/SignInUser.kt
+++ b/domain/src/main/java/org/kafka/domain/interactors/account/SignInUser.kt
@@ -10,7 +10,7 @@ import javax.inject.Inject
 class SignInUser @Inject constructor(
     private val accountRepository: AccountRepository,
     private val dispatchers: CoroutineDispatchers,
-    private val analytics: Analytics
+    private val analytics: Analytics,
 ) : Interactor<SignInUser.Params>() {
 
     override suspend fun doWork(params: Params) {
diff --git a/domain/src/main/java/org/kafka/domain/interactors/account/SignInWithGoogle.kt b/domain/src/main/java/org/kafka/domain/interactors/account/SignInWithGoogle.kt
new file mode 100644
index 00000000..684499da
--- /dev/null
+++ b/domain/src/main/java/org/kafka/domain/interactors/account/SignInWithGoogle.kt
@@ -0,0 +1,40 @@
+package org.kafka.domain.interactors.account
+
+import android.app.Application
+import android.content.IntentSender
+import com.google.android.gms.auth.api.identity.BeginSignInRequest
+import com.google.android.gms.auth.api.identity.BeginSignInRequest.GoogleIdTokenRequestOptions
+import com.google.android.gms.auth.api.identity.Identity
+import kotlinx.coroutines.tasks.await
+import kotlinx.coroutines.withContext
+import org.kafka.base.CoroutineDispatchers
+import org.kafka.base.SecretsProvider
+import org.kafka.base.domain.ResultInteractor
+import javax.inject.Inject
+
+class SignInWithGoogle @Inject constructor(
+    private val dispatchers: CoroutineDispatchers,
+    private val application: Application,
+    private val secretsProvider: SecretsProvider
+) : ResultInteractor<Unit, IntentSender>() {
+
+    override suspend fun doWork(params: Unit): IntentSender {
+        return withContext(dispatchers.io) {
+            val sigInClient = Identity.getSignInClient(application)
+
+            val tokenRequest = GoogleIdTokenRequestOptions.Builder()
+                .setSupported(true)
+                .setFilterByAuthorizedAccounts(false)
+                .setServerClientId(secretsProvider.googleServerClientId.orEmpty())
+                .build()
+
+            val signInRequest = BeginSignInRequest.Builder()
+                .setGoogleIdTokenRequestOptions(tokenRequest)
+                .setAutoSelectEnabled(true)
+                .build()
+
+            val result = sigInClient.beginSignIn(signInRequest).await()
+            result.pendingIntent.intentSender
+        }
+    }
+}
diff --git a/domain/src/main/java/org/kafka/domain/interactors/account/SignUpUser.kt b/domain/src/main/java/org/kafka/domain/interactors/account/SignUpUser.kt
index 93cd5fd5..3fd61802 100644
--- a/domain/src/main/java/org/kafka/domain/interactors/account/SignUpUser.kt
+++ b/domain/src/main/java/org/kafka/domain/interactors/account/SignUpUser.kt
@@ -11,7 +11,7 @@ class SignUpUser @Inject constructor(
     private val accountRepository: AccountRepository,
     private val signInUser: SignInUser,
     private val dispatchers: CoroutineDispatchers,
-    private val analytics: Analytics
+    private val analytics: Analytics,
 ) : Interactor<SignUpUser.Params>() {
 
     override suspend fun doWork(params: Params) {
diff --git a/domain/src/main/java/org/kafka/domain/interactors/query/BuildArchiveQuery.kt b/domain/src/main/java/org/kafka/domain/interactors/query/BuildArchiveQuery.kt
index 974ed000..4b4d8924 100644
--- a/domain/src/main/java/org/kafka/domain/interactors/query/BuildArchiveQuery.kt
+++ b/domain/src/main/java/org/kafka/domain/interactors/query/BuildArchiveQuery.kt
@@ -20,7 +20,7 @@ class BuildArchiveQuery @Inject constructor(private val dispatchers: CoroutineDi
     data class QueryItem(val key: String, val value: String, val joiner: String = "")
 
     data class ArchiveQuery(
-        var queries: MutableList<QueryItem> = mutableListOf()
+        var queries: MutableList<QueryItem> = mutableListOf(),
     )
 
     data class Params(val query: Query)
diff --git a/domain/src/main/java/org/kafka/domain/interactors/query/BuildLocalQuery.kt b/domain/src/main/java/org/kafka/domain/interactors/query/BuildLocalQuery.kt
index 55aefe04..ef750731 100644
--- a/domain/src/main/java/org/kafka/domain/interactors/query/BuildLocalQuery.kt
+++ b/domain/src/main/java/org/kafka/domain/interactors/query/BuildLocalQuery.kt
@@ -32,7 +32,7 @@ class BuildLocalQuery @Inject constructor() {
             val newValue = it.value
                 .replace(' ', '%')
                 .replace("'", " ")
-            where += "$newKey like '%${newValue}%'${it.joiner.toLocalJoiner()}"
+            where += "$newKey like '%$newValue%'${it.joiner.toLocalJoiner()}"
         }
         where += ")"
 
@@ -52,5 +52,4 @@ class BuildLocalQuery @Inject constructor() {
     }
 
     private fun String.sanitizeForRoom() = if (this == _identifier) "itemId" else this
-
 }
diff --git a/domain/src/main/java/org/kafka/domain/interactors/query/BuildRemoteQuery.kt b/domain/src/main/java/org/kafka/domain/interactors/query/BuildRemoteQuery.kt
index 5c9b4d87..b2137252 100644
--- a/domain/src/main/java/org/kafka/domain/interactors/query/BuildRemoteQuery.kt
+++ b/domain/src/main/java/org/kafka/domain/interactors/query/BuildRemoteQuery.kt
@@ -31,7 +31,7 @@ class BuildRemoteQuery @Inject constructor() {
     private fun buildSameKeyQueries(key: String, items: List<QueryItem>): String {
         var query = ""
         if (key == _mediaType) query += "+AND+"
-        query += "${key}:("
+        query += "$key:("
 
         items.forEach {
             query += "${it.value} ${it.joiner} "
diff --git a/domain/src/main/java/org/kafka/domain/interactors/recent/AddRecentItem.kt b/domain/src/main/java/org/kafka/domain/interactors/recent/AddRecentItem.kt
index 43ed2c71..cb79b2bd 100644
--- a/domain/src/main/java/org/kafka/domain/interactors/recent/AddRecentItem.kt
+++ b/domain/src/main/java/org/kafka/domain/interactors/recent/AddRecentItem.kt
@@ -11,7 +11,7 @@ import javax.inject.Inject
 class AddRecentItem @Inject constructor(
     private val dispatchers: CoroutineDispatchers,
     private val itemDetailDao: ItemDetailDao,
-    private val updateRecentItem: UpdateRecentItem
+    private val updateRecentItem: UpdateRecentItem,
 ) : Interactor<AddRecentItem.Params>() {
 
     override suspend fun doWork(params: Params) {
diff --git a/domain/src/main/java/org/kafka/domain/interactors/recent/RemoveRecentItem.kt b/domain/src/main/java/org/kafka/domain/interactors/recent/RemoveRecentItem.kt
index 30ce839d..d6039603 100644
--- a/domain/src/main/java/org/kafka/domain/interactors/recent/RemoveRecentItem.kt
+++ b/domain/src/main/java/org/kafka/domain/interactors/recent/RemoveRecentItem.kt
@@ -5,7 +5,7 @@ import org.kafka.base.domain.Interactor
 import javax.inject.Inject
 
 class RemoveRecentItem @Inject constructor(
-    private val firestoreGraph: FirestoreGraph
+    private val firestoreGraph: FirestoreGraph,
 ) : Interactor<String>() {
     override suspend fun doWork(params: String) {
         val document = firestoreGraph.recentItemsCollection.document(params)
diff --git a/domain/src/main/java/org/kafka/domain/interactors/recommendation/PostRecommendationEvent.kt b/domain/src/main/java/org/kafka/domain/interactors/recommendation/PostRecommendationEvent.kt
new file mode 100644
index 00000000..4704f063
--- /dev/null
+++ b/domain/src/main/java/org/kafka/domain/interactors/recommendation/PostRecommendationEvent.kt
@@ -0,0 +1,59 @@
+package org.kafka.domain.interactors.recommendation
+
+import com.kafka.data.feature.auth.AccountRepository
+import com.kafka.data.feature.recommendation.RecommendationObject
+import com.kafka.data.feature.recommendation.RecommendationRelationship
+import com.kafka.data.feature.recommendation.RecommendationRepository
+import com.kafka.remote.config.RemoteConfig
+import com.kafka.remote.config.isRecommendationEnabled
+import kotlinx.coroutines.withContext
+import org.kafka.base.CoroutineDispatchers
+import org.kafka.base.domain.Interactor
+import javax.inject.Inject
+
+class PostRecommendationEvent @Inject constructor(
+    private val recommendationRepository: RecommendationRepository,
+    private val accountRepository: AccountRepository,
+    private val remoteConfig: RemoteConfig,
+    private val dispatchers: CoroutineDispatchers
+) : Interactor<PostRecommendationEvent.RecommendationEvent>() {
+
+    override suspend fun doWork(params: RecommendationEvent) = withContext(dispatchers.io) {
+        if (!remoteConfig.isRecommendationEnabled()) return@withContext
+        val userId = accountRepository.currentFirebaseUser?.uid ?: return@withContext
+
+        val objectFrom: RecommendationObject
+        val relationship: RecommendationRelationship
+        val objectTo: RecommendationObject
+
+        when (params) {
+            is RecommendationEvent.ViewContent -> {
+                objectFrom = RecommendationObject.User(userId)
+                relationship = RecommendationRelationship.Viewed
+                objectTo = RecommendationObject.Content(params.contentId)
+            }
+
+            is RecommendationEvent.UseContent -> {
+                objectFrom = RecommendationObject.User(userId)
+                relationship = RecommendationRelationship.Used
+                objectTo = RecommendationObject.Content(params.contentId)
+            }
+
+            is RecommendationEvent.FavoriteContent -> {
+                objectFrom = RecommendationObject.User(userId)
+                relationship = RecommendationRelationship.Favorited
+                objectTo = RecommendationObject.Content(params.contentId)
+            }
+        }
+
+        recommendationRepository.postEvent(objectFrom, relationship, objectTo)
+
+        Unit
+    }
+
+    sealed class RecommendationEvent {
+        data class ViewContent(val contentId: String) : RecommendationEvent()
+        data class UseContent(val contentId: String) : RecommendationEvent()
+        data class FavoriteContent(val contentId: String) : RecommendationEvent()
+    }
+}
diff --git a/domain/src/main/java/org/kafka/domain/observers/ObserveCreatorItems.kt b/domain/src/main/java/org/kafka/domain/observers/ObserveCreatorItems.kt
index a50c8ad3..4ea83be5 100644
--- a/domain/src/main/java/org/kafka/domain/observers/ObserveCreatorItems.kt
+++ b/domain/src/main/java/org/kafka/domain/observers/ObserveCreatorItems.kt
@@ -18,7 +18,7 @@ import javax.inject.Inject
 class ObserveCreatorItems @Inject constructor(
     private val dispatchers: CoroutineDispatchers,
     private val observeQueryItems: ObserveQueryItems,
-    private val itemDao: ItemDao
+    private val itemDao: ItemDao,
 ) : SubjectInteractor<ObserveCreatorItems.Params, ImmutableList<Item>>() {
 
     override fun createObservable(params: Params): Flow<ImmutableList<Item>> {
@@ -31,7 +31,6 @@ class ObserveCreatorItems @Inject constructor(
                 } ?: flowOf(emptyList())
             }
             .map { it.filterNot { it.itemId == params.itemId }.toPersistentList() }
-
     }
 
     data class Params(val itemId: String)
diff --git a/domain/src/main/java/org/kafka/domain/observers/ObserveFiles.kt b/domain/src/main/java/org/kafka/domain/observers/ObserveFiles.kt
index 26c61425..a371d55e 100644
--- a/domain/src/main/java/org/kafka/domain/observers/ObserveFiles.kt
+++ b/domain/src/main/java/org/kafka/domain/observers/ObserveFiles.kt
@@ -11,7 +11,7 @@ import javax.inject.Inject
 
 class ObserveFiles @Inject constructor(
     private val dispatchers: CoroutineDispatchers,
-    private val fileDao: FileDao
+    private val fileDao: FileDao,
 ) : SubjectInteractor<ObserveFiles.Param, List<File>>() {
 
     override fun createObservable(params: Param): Flow<List<File>> {
diff --git a/domain/src/main/java/org/kafka/domain/observers/ObserveHomepage.kt b/domain/src/main/java/org/kafka/domain/observers/ObserveHomepage.kt
index 3aacdd23..15c2258f 100644
--- a/domain/src/main/java/org/kafka/domain/observers/ObserveHomepage.kt
+++ b/domain/src/main/java/org/kafka/domain/observers/ObserveHomepage.kt
@@ -15,13 +15,13 @@ import javax.inject.Inject
 class ObserveHomepage @Inject constructor(
     private val coroutineDispatchers: CoroutineDispatchers,
     private val observeRecentItems: ObserveRecentItems,
-    private val homepageRepository: HomepageRepository
+    private val homepageRepository: HomepageRepository,
 ) : SubjectInteractor<Unit, Homepage>() {
 
     override fun createObservable(params: Unit): Flow<Homepage> {
         return combine(
             observeRecentItems.execute(Unit),
-            homepageRepository.observeHomepageCollection()
+            homepageRepository.observeHomepageCollection(),
         ) { recentItems, collection ->
             debug { "ObserveHomepage: collection=$collection" }
             val collectionWithRecentItems = collection.mapNotNull {
diff --git a/domain/src/main/java/org/kafka/domain/observers/ObserveItemDetail.kt b/domain/src/main/java/org/kafka/domain/observers/ObserveItemDetail.kt
index ab4dc0c8..19f7d46d 100644
--- a/domain/src/main/java/org/kafka/domain/observers/ObserveItemDetail.kt
+++ b/domain/src/main/java/org/kafka/domain/observers/ObserveItemDetail.kt
@@ -18,7 +18,7 @@ import javax.inject.Inject
  */
 class ObserveItemDetail @Inject constructor(
     private val dispatchers: CoroutineDispatchers,
-    private val itemDetailDao: ItemDetailDao
+    private val itemDetailDao: ItemDetailDao,
 ) : SubjectInteractor<ObserveItemDetail.Param, ItemDetail?>() {
 
     override fun createObservable(params: Param): Flow<ItemDetail?> {
diff --git a/domain/src/main/java/org/kafka/domain/observers/ObserveQueryItems.kt b/domain/src/main/java/org/kafka/domain/observers/ObserveQueryItems.kt
index ef332f8e..9898540b 100644
--- a/domain/src/main/java/org/kafka/domain/observers/ObserveQueryItems.kt
+++ b/domain/src/main/java/org/kafka/domain/observers/ObserveQueryItems.kt
@@ -13,7 +13,7 @@ import javax.inject.Inject
 class ObserveQueryItems @Inject constructor(
     private val dispatchers: CoroutineDispatchers,
     private val buildLocalQuery: BuildLocalQuery,
-    private val itemRepository: ItemRepository
+    private val itemRepository: ItemRepository,
 ) : SubjectInteractor<ObserveQueryItems.Params, List<Item>>() {
 
     override fun createObservable(params: Params): Flow<List<Item>> {
diff --git a/domain/src/main/java/org/kafka/domain/observers/ObserveRecentItems.kt b/domain/src/main/java/org/kafka/domain/observers/ObserveRecentItems.kt
index 399867d1..ab0d56ed 100644
--- a/domain/src/main/java/org/kafka/domain/observers/ObserveRecentItems.kt
+++ b/domain/src/main/java/org/kafka/domain/observers/ObserveRecentItems.kt
@@ -21,14 +21,14 @@ import javax.inject.Inject
 class ObserveRecentItems @Inject constructor(
     private val dispatchers: CoroutineDispatchers,
     private val accountRepository: AccountRepository,
-    private val recentItemRepository: RecentItemRepository
+    private val recentItemRepository: RecentItemRepository,
 ) : SubjectInteractor<Unit, ImmutableList<RecentItemWithProgress>>() {
 
     override fun createObservable(params: Unit): Flow<ImmutableList<RecentItemWithProgress>> {
         return accountRepository.observeCurrentFirebaseUser()
             .filterNotNull()
             .flatMapLatest { user -> recentItemRepository.observeRecentItems(user.uid) }
-            .map { it.map { RecentItemWithProgress(it, 0) } } //todo: add actual progress
+            .map { it.map { RecentItemWithProgress(it, 0) } } // todo: add actual progress
             .onStart { emit(emptyList()) }
             .map { it.toPersistentList() }
             .flowOn(dispatchers.io)
diff --git a/domain/src/main/java/org/kafka/domain/observers/ObserveRecentSearch.kt b/domain/src/main/java/org/kafka/domain/observers/ObserveRecentSearch.kt
index e530c877..d6dec8be 100644
--- a/domain/src/main/java/org/kafka/domain/observers/ObserveRecentSearch.kt
+++ b/domain/src/main/java/org/kafka/domain/observers/ObserveRecentSearch.kt
@@ -10,7 +10,7 @@ import javax.inject.Inject
 
 class ObserveRecentSearch @Inject constructor(
     private val dispatchers: CoroutineDispatchers,
-    private val recentSearchDao: RecentSearchDao
+    private val recentSearchDao: RecentSearchDao,
 ) : SubjectInteractor<Unit, List<String>>() {
 
     override fun createObservable(params: Unit): Flow<List<String>> {
diff --git a/domain/src/main/java/org/kafka/domain/observers/ObserveRecentTextItem.kt b/domain/src/main/java/org/kafka/domain/observers/ObserveRecentTextItem.kt
index 75b8ce22..80abe2f8 100644
--- a/domain/src/main/java/org/kafka/domain/observers/ObserveRecentTextItem.kt
+++ b/domain/src/main/java/org/kafka/domain/observers/ObserveRecentTextItem.kt
@@ -15,7 +15,7 @@ import javax.inject.Inject
  * */
 class ObserveRecentTextItem @Inject constructor(
     private val dispatchers: CoroutineDispatchers,
-    private val recentTextDao: RecentTextDao
+    private val recentTextDao: RecentTextDao,
 ) : SubjectInteractor<String, RecentTextItem?>() {
 
     override fun createObservable(params: String): Flow<RecentTextItem?> {
diff --git a/domain/src/main/java/org/kafka/domain/observers/ObserveSearchItems.kt b/domain/src/main/java/org/kafka/domain/observers/ObserveSearchItems.kt
index 3df51e5e..0b916476 100644
--- a/domain/src/main/java/org/kafka/domain/observers/ObserveSearchItems.kt
+++ b/domain/src/main/java/org/kafka/domain/observers/ObserveSearchItems.kt
@@ -23,7 +23,7 @@ class ObserveSearchItems @Inject constructor(
             flowOf(emptyList())
         } else {
             itemRepository.observeQueryItems(
-                buildLocalQuery(buildQuery(params.keyword, params.searchFilter))
+                buildLocalQuery(buildQuery(params.keyword, params.searchFilter)),
             ).flowOn(dispatchers.io)
         }
     }
diff --git a/domain/src/main/java/org/kafka/domain/observers/ObserveUser.kt b/domain/src/main/java/org/kafka/domain/observers/ObserveUser.kt
index 8922b4d6..c9b98419 100644
--- a/domain/src/main/java/org/kafka/domain/observers/ObserveUser.kt
+++ b/domain/src/main/java/org/kafka/domain/observers/ObserveUser.kt
@@ -16,7 +16,7 @@ import javax.inject.Singleton
 @Singleton
 class ObserveUser @Inject constructor(
     private val accountRepository: AccountRepository,
-    private val dispatchers: CoroutineDispatchers
+    private val dispatchers: CoroutineDispatchers,
 ) : SubjectInteractor<ObserveUser.Params, User?>() {
 
     override fun createObservable(params: Params): Flow<User?> {
@@ -33,7 +33,7 @@ class ObserveUser @Inject constructor(
             displayName = it.displayName.orEmpty(),
             email = it.email,
             imageUrl = it.photoUrl.toString(),
-            anonymous = it.isAnonymous
+            anonymous = it.isAnonymous,
         )
     }
 
diff --git a/domain/src/main/java/org/kafka/domain/observers/library/ObserveDownloadItem.kt b/domain/src/main/java/org/kafka/domain/observers/library/ObserveDownloadByFileId.kt
similarity index 73%
rename from domain/src/main/java/org/kafka/domain/observers/library/ObserveDownloadItem.kt
rename to domain/src/main/java/org/kafka/domain/observers/library/ObserveDownloadByFileId.kt
index 4e756c85..385da910 100644
--- a/domain/src/main/java/org/kafka/domain/observers/library/ObserveDownloadItem.kt
+++ b/domain/src/main/java/org/kafka/domain/observers/library/ObserveDownloadByFileId.kt
@@ -8,14 +8,15 @@ import org.kafka.base.CoroutineDispatchers
 import org.kafka.base.domain.SubjectInteractor
 import javax.inject.Inject
 
-class ObserveDownloadItem @Inject constructor(
+class ObserveDownloadByFileId @Inject constructor(
     private val dispatchers: CoroutineDispatchers,
     private val observeDownloadedItems: ObserveDownloadedItems,
 ) : SubjectInteractor<String, ItemWithDownload?>() {
 
-    override fun createObservable(params: String): Flow<ItemWithDownload?> {
+    @Suppress("PARAMETER_NAME_CHANGED_ON_OVERRIDE")
+    override fun createObservable(fileId: String): Flow<ItemWithDownload?> {
         return observeDownloadedItems.createObservable(Unit).map { downloadItems ->
-            downloadItems.firstOrNull { it.file.fileId == params }
+            downloadItems.firstOrNull { it.file.fileId == fileId }
         }.flowOn(dispatchers.io)
     }
 }
diff --git a/domain/src/main/java/org/kafka/domain/observers/library/ObserveDownloadByItemId.kt b/domain/src/main/java/org/kafka/domain/observers/library/ObserveDownloadByItemId.kt
new file mode 100644
index 00000000..04259c5e
--- /dev/null
+++ b/domain/src/main/java/org/kafka/domain/observers/library/ObserveDownloadByItemId.kt
@@ -0,0 +1,30 @@
+package org.kafka.domain.observers.library
+
+import com.kafka.data.feature.item.DownloadStatus
+import com.kafka.data.feature.item.ItemWithDownload
+import kotlinx.coroutines.flow.Flow
+import kotlinx.coroutines.flow.flowOn
+import kotlinx.coroutines.flow.map
+import org.kafka.base.CoroutineDispatchers
+import org.kafka.base.domain.SubjectInteractor
+import javax.inject.Inject
+
+class ObserveDownloadByItemId @Inject constructor(
+    private val dispatchers: CoroutineDispatchers,
+    private val observeDownloadedItems: ObserveDownloadedItems,
+) : SubjectInteractor<ObserveDownloadByItemId.Params, ItemWithDownload?>() {
+
+    override fun createObservable(params: Params): Flow<ItemWithDownload?> {
+        return observeDownloadedItems.createObservable(Unit).map { downloadItems ->
+            downloadItems.firstOrNull {
+                it.file.itemId == params.itemId &&
+                        params.statuses.contains(it.downloadInfo.status)
+            }
+        }.flowOn(dispatchers.io)
+    }
+
+    data class Params(
+        val itemId: String,
+        val statuses: List<DownloadStatus> = DownloadStatus.entries
+    )
+}
diff --git a/domain/src/main/java/org/kafka/domain/observers/library/ObserveDownloadedItems.kt b/domain/src/main/java/org/kafka/domain/observers/library/ObserveDownloadedItems.kt
index d87de2ae..29b5689c 100644
--- a/domain/src/main/java/org/kafka/domain/observers/library/ObserveDownloadedItems.kt
+++ b/domain/src/main/java/org/kafka/domain/observers/library/ObserveDownloadedItems.kt
@@ -18,7 +18,7 @@ class ObserveDownloadedItems @Inject constructor(
     private val observeDownloads: ObserveDownloads,
     private val downloadInfoMapper: DownloadInfoMapper,
     private val itemDao: ItemDao,
-    private val fileDao: FileDao
+    private val fileDao: FileDao,
 ) : SubjectInteractor<Unit, List<ItemWithDownload>>() {
 
     override fun createObservable(params: Unit): Flow<List<ItemWithDownload>> {
@@ -36,7 +36,7 @@ class ObserveDownloadedItems @Inject constructor(
                     downloadRequest = fileDownloadItem.downloadRequest,
                     downloadInfo = downloadInfoMapper.map(fileDownloadItem.downloadInfo),
                     file = file,
-                    item = item
+                    item = item,
                 )
             }.distinctBy { it.item.itemId }
         }.flowOn(dispatchers.io)
diff --git a/domain/src/main/java/org/kafka/domain/observers/library/ObserveFavoriteStatus.kt b/domain/src/main/java/org/kafka/domain/observers/library/ObserveFavoriteStatus.kt
index 6ded2a33..a4695e58 100644
--- a/domain/src/main/java/org/kafka/domain/observers/library/ObserveFavoriteStatus.kt
+++ b/domain/src/main/java/org/kafka/domain/observers/library/ObserveFavoriteStatus.kt
@@ -9,7 +9,7 @@ import javax.inject.Inject
 
 class ObserveFavoriteStatus @Inject constructor(
     private val dispatchers: CoroutineDispatchers,
-    private val observeFavorites: ObserveFavorites
+    private val observeFavorites: ObserveFavorites,
 ) : SubjectInteractor<ObserveFavoriteStatus.Params, Boolean>() {
 
     override fun createObservable(params: Params): Flow<Boolean> {
diff --git a/gradle.properties b/gradle.properties
index 985b23b6..fd4a0d72 100644
--- a/gradle.properties
+++ b/gradle.properties
@@ -25,8 +25,6 @@ org.gradle.priority=low
 org.gradle.configureondemand=true
 org.gradle.caching=true
 org.gradle.parallel=true
-# Allow data binding to be incremental
-android.databinding.incremental=true
 # Allow kapt to use workers, incremental processing
 kapt.use.worker.api=true
 kapt.incremental.apt=true
diff --git a/gradle/libs.versions.toml b/gradle/libs.versions.toml
index e945ee2e..963fa308 100644
--- a/gradle/libs.versions.toml
+++ b/gradle/libs.versions.toml
@@ -1,76 +1,64 @@
 [versions]
-accompanist = "0.33.0-alpha"
-agp = "8.1.2"
-androidxhilt = "1.0.0"
-androidxlifecycle = "2.6.2"
-navigation = "2.7.3"
-androidxtest = "1.5.2"
-coil = "2.4.0"
-compose-bom = "2023.09.00-alpha03"
-constraintlayout = "1.1.0-alpha12"
-composecompiler = "1.5.3"
-composesnapshot = "-" # a single character = no snapshot
+accompanist = "0.34.0"
+agp = "8.2.2"
+androidxhilt = "1.1.0"
+androidxlifecycle = "2.7.0"
+navigation = "2.7.6"
+coil = "2.5.0"
+compose-alpha = "2024.01.00-alpha01"
+compose-bom = "2024.01.00"
+constraintlayout = "1.1.0-alpha13"
+composecompiler = "1.5.4"
 coroutines = "1.7.3"
-dagger = "2.47"
-hilt = "2.47"
+dagger = "2.50"
 icons = "1.0.0"
-kotlin = "1.9.10"
-kotlin-immutable = "0.3.5"
-ktlint = "0.40.0"
-material3 = "1.2.0-alpha06"
+kotlin = "1.9.20"
+kotlin-immutable = "0.3.7"
+material3 = "1.2.0-rc01"
 mixpanel = "7.0.0"
-okhttp = "4.11.0"
+okhttp = "4.12.0"
 paging = "3.2.1"
 retrofit = "2.9.0"
-room = "2.6.0-rc01"
+room = "2.6.1"
 threetenbp = "1.5.2"
 serialization = "1.5.0"
 exoplayer = "2.19.1"
-media3 = "1.1.1"
-paparazzi = "1.3.1"
-pdftron = "9.3.1"
 pdfviewer = "3.2.0-beta.1"
 compileSdk = "34"
 minSdk = "24"
 targetSdk = "33"
 core-ktx = "1.12.0"
-junit = "4.13.2"
 androidx-test-ext-junit = "1.1.5"
 espresso-core = "3.5.1"
-appcompat = "1.6.1"
 uiautomator = "2.2.0"
-benchmark-macro-junit4 = "1.2.0-rc01"
-androidx-baselineprofile = "1.2.0-rc01"
+benchmark-macro-junit4 = "1.2.3"
+androidx-baselineprofile = "1.2.3"
 profileinstaller = "1.3.1"
-androidx-appcompat-appcompat = "1.6.1"
-material = "1.9.0"
 review = "2.0.1"
 
 [plugins]
 android-application = { id = "com.android.application", version.ref = "agp" }
 android-library = { id = "com.android.library", version.ref = "agp" }
 android-lint = { id = "com.android.lint", version.ref = "agp" }
-cacheFixPlugin = { id = "org.gradle.android.cache-fix", version = "2.8.1" }
+cacheFixPlugin = { id = "org.gradle.android.cache-fix", version = "3.0" }
 kotlin-android = { id = "org.jetbrains.kotlin.android", version.ref = "kotlin" }
 kotlin-kapt = { id = "org.jetbrains.kotlin.kapt", version.ref = "kotlin" }
-ksp = "com.google.devtools.ksp:1.9.0-1.0.13"
+ksp = "com.google.devtools.ksp:1.9.22-1.0.16"
 gms-googleServices = "com.google.gms.google-services:4.4.0"
 firebase-crashlytics = "com.google.firebase.crashlytics:2.9.9"
-spotless = "com.diffplug.spotless:6.21.0"
-kotlin-serialization = { id = "org.jetbrains.kotlin.plugin.serialization", version.ref = "serialization" }
-hilt = { id = "com.google.dagger.hilt.android", version.ref = "hilt" }
+spotless = "com.diffplug.spotless:6.24.0"
+kotlin-serialization = { id = "org.jetbrains.kotlin.plugin.serialization", version.ref = "kotlin" }
+hilt = { id = "com.google.dagger.hilt.android", version.ref = "dagger" }
 androidTest = { id = "com.android.test", version.ref = "agp" }
 androidx-baselineprofile = { id = "androidx.baselineprofile", version.ref = "androidx-baselineprofile" }
-paparazzi = { id = "app.cash.paparazzi:paparazzi-gradle-plugin", version.ref = "paparazzi" }
 
 [libraries]
 accompanist-flowlayout = { module = "com.google.accompanist:accompanist-flowlayout", version.ref = "accompanist" }
-accompanist-insetsui = { module = "com.google.accompanist:accompanist-insets-ui", version.ref = "accompanist" }
 accompanist-swiperefresh = { module = "com.google.accompanist:accompanist-swiperefresh", version.ref = "accompanist" }
 accompanist-permissions = { module = "com.google.accompanist:accompanist-permissions", version.ref = "accompanist" }
 accompanist-placeholder = { module = "com.google.accompanist:accompanist-placeholder-material", version.ref = "accompanist" }
 accompanist-systemuicontroller = { module = "com.google.accompanist:accompanist-systemuicontroller", version.ref = "accompanist" }
-accompanist-navigation-animation = { module = "com.google.accompanist:accompanist-navigation-animation", version.ref = "accompanist" }
+#accompanist-navigation-animation = { module = "com.google.accompanist:accompanist-navigation-animation", version.ref = "accompanist" }
 accompanist-navigation-material = { module = "com.google.accompanist:accompanist-navigation-material", version.ref = "accompanist" }
 accompanist-web = { module = "com.google.accompanist:accompanist-webview", version.ref = "accompanist" }
 
@@ -78,37 +66,19 @@ exoplayer-core = { module = "com.google.android.exoplayer:exoplayer-core", versi
 exoplayer-okhttp = { module = "com.google.android.exoplayer:extension-okhttp", version.ref = "exoplayer" }
 
 rebugger = "com.github.theapache64:rebugger:1.0.0-alpha06"
-proguard-snippets = "com.infstory:proguard-snippets:1.0.0"
-media = "androidx.media:media:1.6.0"
+media = "androidx.media:media:1.7.0"
 palette = "androidx.palette:palette-ktx:1.0.0"
-radiography = "com.squareup.radiography:radiography:2.4.1"
-profile-installer = "androidx.profileinstaller:profileinstaller:1.3.1"
-pdfkit = "com.pspdfkit:pspdfkit:8.2.1"
-rive = "app.rive:rive-android:4.0.0"
-startup = "androidx.startup:startup-runtime:1.1.1"
-tools-desugarjdklibs = "com.android.tools:desugar_jdk_libs:2.0.3"
-
-androidx-activity-compose = "androidx.activity:activity-compose:1.7.2"
-androidx-activity = "androidx.activity:activity:1.7.2"
-androidx-appcompat-resources = "androidx.appcompat:appcompat-resources:1.6.1"
-androidx-archCoreTesting = "androidx.arch.core:core-testing:2.2.0"
-androidx-browser = "androidx.browser:browser:1.6.0"
-androidx-collection = "androidx.collection:collection-ktx:1.2.0"
+
+androidx-activity-compose = "androidx.activity:activity-compose:1.8.2"
+androidx-collection = "androidx.collection:collection-ktx:1.4.0"
 androidx-core = "androidx.core:core-ktx:1.12.0"
-androidx-dynamicanimation = "androidx.dynamicanimation:dynamicanimation-ktx:1.0.0-alpha03"
-androidx-emoji = "androidx.emoji:emoji:1.1.0"
 
 androidx-hilt-compiler = { module = "androidx.hilt:hilt-compiler", version.ref = "androidxhilt" }
-androidx-hilt-compose = "androidx.hilt:hilt-navigation-compose:1.0.0"
-androidx-hilt-work = { module = "androidx.hilt:hilt-work", version.ref = "androidxhilt" }
+androidx-hilt-compose = "androidx.hilt:hilt-navigation-compose:1.1.0"
 androidx-hilt-navigation = { module = "androidx.hilt:hilt-navigation", version.ref = "androidxhilt" }
 
-media3-exoplayer = { module = "androidx.media3:media3-exoplayer", version.ref = "media3" }
-
-hilt-compiler = { module = "com.google.dagger:hilt-android-compiler", version.ref = "hilt" }
-hilt-gradlePlug = { module = "com.google.dagger:hilt-android-gradle-plugin", version.ref = "hilt" }
-hilt-android = { module = "com.google.dagger:hilt-android", version.ref = "hilt" }
-hilt-testing = { module = "com.google.dagger:hilt-android-testing", version.ref = "hilt" }
+hilt-compiler = { module = "com.google.dagger:hilt-android-compiler", version.ref = "dagger" }
+hilt-android = { module = "com.google.dagger:hilt-android", version.ref = "dagger" }
 
 androidx-lifecycle-runtime = { module = "androidx.lifecycle:lifecycle-runtime-compose", version.ref = "androidxlifecycle" }
 androidx-lifecycle-runtime-compose = { module = "androidx.lifecycle:lifecycle-runtime-compose", version.ref = "androidxlifecycle" }
@@ -119,8 +89,8 @@ androidx-lifecycle-viewmodel-compose = { module = "androidx.lifecycle:lifecycle-
 
 androidx-navigation-compose = { module = "androidx.navigation:navigation-compose", version.ref = "navigation" }
 
-lottie-core = "com.airbnb.android:lottie:6.0.1"
-lottie-compose = "com.airbnb.android:lottie-compose:6.0.1"
+lottie-core = "com.airbnb.android:lottie:6.1.0"
+lottie-compose = "com.airbnb.android:lottie-compose:6.1.0"
 
 androidx-paging-common = { module = "androidx.paging:paging-common-ktx", version.ref = "paging" }
 androidx-paging-runtime = { module = "androidx.paging:paging-runtime-ktx", version.ref = "paging" }
@@ -128,77 +98,54 @@ androidx-paging-compose = "androidx.paging:paging-compose:3.2.1"
 
 androidx-palette = "androidx.palette:palette:1.0.0"
 
-androidx-room-common = { module = "androidx.room:room-common", version.ref = "room" }
 androidx-room-compiler = { module = "androidx.room:room-compiler", version.ref = "room" }
 androidx-room-paging = { module = "androidx.room:room-paging", version.ref = "room" }
 androidx-room-ktx = { module = "androidx.room:room-ktx", version.ref = "room" }
 androidx-room-runtime = { module = "androidx.room:room-runtime", version.ref = "room" }
-androidx-room-testing = { module = "androidx.room:room-testing", version.ref = "room" }
-
-androidx-test-core = { module = "androidx.test:core", version.ref = "androidxtest" }
-androidx-test-junit = "androidx.test.ext:junit-ktx:1.1.5"
-androidx-test-rules = { module = "androidx.test:rules", version.ref = "androidxtest" }
-androidx-test-runner = { module = "androidx.test:runner", version.ref = "androidxtest" }
-
-androidx-work-runtime = "androidx.work:work-runtime-ktx:2.8.1"
-
-appauth = "net.openid:appauth:0.8.1"
 
 coil-coil = { module = "io.coil-kt:coil", version.ref = "coil" }
 coil-compose = { module = "io.coil-kt:coil-compose", version.ref = "coil" }
-coil-gif = { module = "io.coil-kt:coil-gif", version.ref = "coil" }
 
-compose-bom = { module = "dev.chrisbanes.compose:compose-bom", version.ref = "compose-bom" }
+compose-bom = { module = "androidx.compose:compose-bom", version.ref = "compose-bom" }
+#compose-bom = { module = "dev.chrisbanes.compose:compose-bom", version.ref = "compose-alpha" }
 compose-runtime-runtime = { module = "androidx.compose.runtime:runtime" }
 compose-animation-animation = { module = "androidx.compose.animation:animation" }
 compose-foundation-foundation = { module = "androidx.compose.foundation:foundation" }
 compose-foundation-layout = { module = "androidx.compose.foundation:foundation-layout" }
 compose-material-iconsext = { module = "androidx.compose.material:material-icons-extended" }
 compose-material-material = { module = "androidx.compose.material:material" }
-compose-material-material3 = { module = "androidx.compose.material3:material3" }
+compose-material-material3 = { module = "androidx.compose.material3:material3", version.ref = "material3" }
 compose-ui-test = { module = "androidx.compose.ui:ui-test-junit4" }
-compose-ui-test-manifest = { module = "androidx.compose.ui:ui-test-manifest" }
 compose-ui-tooling = { module = "androidx.compose.ui:ui-tooling" }
 compose-ui-ui = { module = "androidx.compose.ui:ui" }
 compose-ui-textfonts = { module = "androidx.compose.ui:ui-text-google-fonts" }
 compose-ui-util = { module = "androidx.compose.ui:ui-util" }
-compose-ui-viewbinding = { module = "androidx.compose.ui:ui-viewbinding" }
-compose-constraintlayout = { module = "androidx.constraintlayout:constraintlayout-compose", version.ref = "constraintlayout"}
+compose-constraintlayout = { module = "androidx.constraintlayout:constraintlayout-compose", version.ref = "constraintlayout" }
+
+fetch = "androidx.tonyodev.fetch2:xfetch2:3.1.6"
+fetch-okhttp = "androidx.tonyodev.fetch2okhttp:xfetch2okhttp:3.1.6"
 
-fetch = "com.github.alashow:Fetch:3.1.62"
-dagger-compiler = { module = "com.google.dagger:dagger-compiler", version.ref = "dagger" }
 dagger-dagger = { module = "com.google.dagger:dagger", version.ref = "dagger" }
 
-google-bom = "com.google.firebase:firebase-bom:32.3.1"
-google-crashlyticsGradle = "com.google.firebase:firebase-crashlytics-gradle:2.9.9"
-google-gmsGoogleServices = "com.google.gms:google-services:4.4.0"
-google-perfPlug = "com.google.firebase:perf-plugin:1.4.2"
-google-analytics = { module = "com.google.firebase:firebase-analytics-ktx" }
-google-crashlytics = { module = "com.google.firebase:firebase-crashlytics-ktx" }
-google-dynamic_links = { module = "com.google.firebase:firebase-dynamic-links-ktx" }
-google-auth = { module = "com.google.firebase:firebase-auth-ktx" }
+google-bom = "com.google.firebase:firebase-bom:32.7.1"
+google-analytics = { module = "com.google.firebase:firebase-analytics" }
+google-crashlytics = { module = "com.google.firebase:firebase-crashlytics" }
+google-dynamic_links = { module = "com.google.firebase:firebase-dynamic-links" }
+google-auth = { module = "com.google.firebase:firebase-auth" }
 google-coroutines = "org.jetbrains.kotlinx:kotlinx-coroutines-play-services:1.7.3"
-google-firestore = { module = "com.google.firebase:firebase-firestore-ktx" }
-google-messaging = { module = "com.google.firebase:firebase-messaging-ktx" }
-google-performance = { module = "com.google.firebase:firebase-perf-ktx" }
-google-remoteConfig = { module = "com.google.firebase:firebase-config-ktx" }
+google-firestore = { module = "com.google.firebase:firebase-firestore" }
+google-messaging = { module = "com.google.firebase:firebase-messaging" }
+google-performance = { module = "com.google.firebase:firebase-perf" }
+google-playservices-auth = "com.google.android.gms:play-services-auth:20.7.0"
+google-remoteConfig = { module = "com.google.firebase:firebase-config" }
 google-storage = { module = "com.google.firebase:firebase-storage-ktx" }
 
 google-review = { module = "com.google.android.play:review-ktx", version.ref = "review" }
 
 firestore-ktx = "dev.gitlive:firebase-firestore:1.8.0"
 
-junit = "junit:junit:4.13.2"
-
-pdftron = { module = "com.pdftron:pdftron", version.ref = "pdftron" }
-pdftron-tools = { module = "com.pdftron:tools", version.ref = "pdftron" }
-pdftron-standard = { module = "com.pdftron:pdftron-standard", version.ref = "pdftron" }
-
 kotlin-coroutines-android = { module = "org.jetbrains.kotlinx:kotlinx-coroutines-android", version.ref = "coroutines" }
 kotlin-coroutines-core = { module = "org.jetbrains.kotlinx:kotlinx-coroutines-core", version.ref = "coroutines" }
-kotlin-coroutines-test = { module = "org.jetbrains.kotlinx:kotlinx-coroutines-test", version.ref = "coroutines" }
-kotlin-extensions = { module = "org.jetbrains.kotlin:kotlin-android-extensions", version.ref = "kotlin" }
-kotlin-gradlePlug = { module = "org.jetbrains.kotlin:kotlin-gradle-plugin", version.ref = "kotlin" }
 kotlin-stdlib = { module = "org.jetbrains.kotlin:kotlin-stdlib", version.ref = "kotlin" }
 kotlin-serialization = { module = "org.jetbrains.kotlinx:kotlinx-serialization-json", version.ref = "serialization" }
 kotlin-immutable = { module = "org.jetbrains.kotlinx:kotlinx-collections-immutable", version.ref = "kotlin-immutable" }
@@ -207,32 +154,26 @@ icons-feather = { module = "br.com.devsrsouza.compose.icons.android:feather", ve
 icons-font-awesome = { module = "br.com.devsrsouza.compose.icons.android:font-awesome", version.ref = "icons" }
 icons-tabler = { module = "br.com.devsrsouza.compose.icons.android:tabler-icons", version.ref = "icons" }
 
-leakCanary = "com.squareup.leakcanary:leakcanary-android:2.12"
-leakCanary-process = "com.squareup.leakcanary:leakcanary-android-process:2.9.1"
+leakCanary = "com.squareup.leakcanary:leakcanary-android:2.13"
 
 okhttp-loggingInterceptor = { module = "com.squareup.okhttp3:logging-interceptor", version.ref = "okhttp" }
 okhttp-okhttp = { module = "com.squareup.okhttp3:okhttp", version.ref = "okhttp" }
 
 mixpanel = { module = "com.mixpanel.android:mixpanel-android", version.ref = "mixpanel" }
 
-retrofit-gsonConverter = { module = "com.squareup.retrofit2:converter-gson", version.ref = "retrofit" }
 retrofit-serialization = "com.jakewharton.retrofit:retrofit2-kotlinx-serialization-converter:1.0.0"
 retrofit-retrofit = { module = "com.squareup.retrofit2:retrofit", version.ref = "retrofit" }
 pdfviewer = { module = "com.github.barteksc:android-pdf-viewer", version.ref = "pdfviewer" }
 
 threeTenAbp = "com.jakewharton.threetenabp:threetenabp:1.4.4"
 timber = "com.jakewharton.timber:timber:5.0.1"
-tracing = "androidx.tracing:tracing-ktx:1.1.0"
+tracing = "androidx.tracing:tracing-ktx:1.2.0"
 dataStore = "androidx.datastore:datastore-preferences:1.0.0"
-truth = "com.google.truth:truth:1.1.3"
 jsoup = "org.jsoup:jsoup:1.16.1"
 core-ktx = { group = "androidx.core", name = "core-ktx", version.ref = "core-ktx" }
-junit-junit = { group = "junit", name = "junit", version.ref = "junit" }
 androidx-test-ext-junit = { group = "androidx.test.ext", name = "junit", version.ref = "androidx-test-ext-junit" }
 espresso-core = { group = "androidx.test.espresso", name = "espresso-core", version.ref = "espresso-core" }
 uiautomator = { group = "androidx.test.uiautomator", name = "uiautomator", version.ref = "uiautomator" }
 benchmark-macro-junit4 = { group = "androidx.benchmark", name = "benchmark-macro-junit4", version.ref = "benchmark-macro-junit4" }
 profileinstaller = { group = "androidx.profileinstaller", name = "profileinstaller", version.ref = "profileinstaller" }
-appcompat = { group = "androidx.appcompat", name = "appcompat", version.ref = "androidx-appcompat-appcompat" }
-material = { group = "com.google.android.material", name = "material", version.ref = "material" }
 androidx-rules = { group = "androidx.test", name = "rules", version = "1.5.0" }
diff --git a/gradle/wrapper/gradle-wrapper.properties b/gradle/wrapper/gradle-wrapper.properties
index 272b4820..e57a6b76 100644
--- a/gradle/wrapper/gradle-wrapper.properties
+++ b/gradle/wrapper/gradle-wrapper.properties
@@ -1,6 +1,6 @@
 #Wed Sep 15 09:55:12 CEST 2021
 distributionBase=GRADLE_USER_HOME
-distributionUrl=https\://services.gradle.org/distributions/gradle-8.0.2-bin.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.3-bin.zip
 distributionPath=wrapper/dists
 zipStorePath=wrapper/dists
 zipStoreBase=GRADLE_USER_HOME
diff --git a/navigation/src/main/java/org/kafka/navigation/NavigationGraph.kt b/navigation/src/main/java/org/kafka/navigation/NavigationGraph.kt
index 68c440aa..cd7e4678 100644
--- a/navigation/src/main/java/org/kafka/navigation/NavigationGraph.kt
+++ b/navigation/src/main/java/org/kafka/navigation/NavigationGraph.kt
@@ -1,8 +1,7 @@
 package org.kafka.navigation
 
 import com.kafka.data.model.SearchFilter
-import java.net.URLEncoder
-import java.nio.charset.StandardCharsets
+import org.kafka.base.extensions.encodeUrl
 
 sealed class RootScreen(val route: String) {
     data object Home : RootScreen("home_root")
@@ -20,6 +19,7 @@ sealed class Screen(private val route: String) {
     data object Home : Screen("home")
     data object Login : Screen("login")
     data object Player : Screen("player")
+    data object RecentItems : Screen("recent_items")
 
     data object ItemDetail : Screen("item/{itemId}") {
         fun createRoute(root: RootScreen, itemId: String): String {
@@ -63,7 +63,10 @@ sealed class Screen(private val route: String) {
             return "${root.route}/web/${url.encodeUrl()}"
         }
     }
-}
-
-fun String.encodeUrl(): String = URLEncoder.encode(this, StandardCharsets.UTF_8.toString())
 
+    data object OnlineReader : Screen("reader_online/{itemId}") {
+        fun createRoute(root: RootScreen, itemId: String): String {
+            return "${root.route}/reader_online/${itemId}"
+        }
+    }
+}
diff --git a/navigation/src/main/java/org/kafka/navigation/Navigator.kt b/navigation/src/main/java/org/kafka/navigation/Navigator.kt
index e6e53341..2cb8a84d 100644
--- a/navigation/src/main/java/org/kafka/navigation/Navigator.kt
+++ b/navigation/src/main/java/org/kafka/navigation/Navigator.kt
@@ -39,7 +39,7 @@ fun NavigatorHost(content: @Composable () -> Unit) {
 @Composable
 private fun NavigatorHost(
     navigator: Navigator,
-    content: @Composable () -> Unit
+    content: @Composable () -> Unit,
 ) {
     CompositionLocalProvider(LocalNavigator provides navigator, content = content)
 }
diff --git a/navigation/src/main/java/org/kafka/navigation/RememberBottomSheetNavigator.kt b/navigation/src/main/java/org/kafka/navigation/RememberBottomSheetNavigator.kt
new file mode 100644
index 00000000..328d7c0e
--- /dev/null
+++ b/navigation/src/main/java/org/kafka/navigation/RememberBottomSheetNavigator.kt
@@ -0,0 +1,26 @@
+package org.kafka.navigation
+
+import androidx.compose.animation.core.AnimationSpec
+import androidx.compose.material.ModalBottomSheetValue
+import androidx.compose.material.SwipeableDefaults
+import androidx.compose.material.rememberModalBottomSheetState
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
+import com.google.accompanist.navigation.material.BottomSheetNavigator
+
+@Composable
+fun rememberBottomSheetNavigator(
+    animationSpec: AnimationSpec<Float> = SwipeableDefaults.AnimationSpec,
+    skipHalfExpanded: Boolean = true,
+): BottomSheetNavigator {
+    val sheetState = rememberModalBottomSheetState(
+        initialValue = ModalBottomSheetValue.Hidden,
+        animationSpec = animationSpec,
+        confirmValueChange = { true },
+        skipHalfExpanded = skipHalfExpanded,
+    )
+
+    return remember(sheetState) {
+        BottomSheetNavigator(sheetState = sheetState)
+    }
+}
diff --git a/navigation/src/main/java/org/kafka/navigation/deeplink/Config.kt b/navigation/src/main/java/org/kafka/navigation/deeplink/Config.kt
index d44e8960..cc3d3867 100644
--- a/navigation/src/main/java/org/kafka/navigation/deeplink/Config.kt
+++ b/navigation/src/main/java/org/kafka/navigation/deeplink/Config.kt
@@ -1,8 +1,8 @@
 package org.kafka.navigation.deeplink
 
 object Config {
-    private const val BASE_HOST = "kafka-books.web.app"
-    const val BASE_URL = "https://$BASE_HOST/"
+    const val BASE_URL = "https://kafkaarchives.org/"
+    const val BASE_URL_ALT = "https://kafka-books.web.app/"
 
     fun archiveDetailUrl(itemId: String) = "https://archive.org/details/$itemId"
-}
\ No newline at end of file
+}
diff --git a/navigation/src/main/java/org/kafka/navigation/deeplink/DynamicDeepLinkHandler.kt b/navigation/src/main/java/org/kafka/navigation/deeplink/DynamicDeepLinkHandler.kt
index 416449f4..3a510892 100644
--- a/navigation/src/main/java/org/kafka/navigation/deeplink/DynamicDeepLinkHandler.kt
+++ b/navigation/src/main/java/org/kafka/navigation/deeplink/DynamicDeepLinkHandler.kt
@@ -10,6 +10,6 @@ interface DynamicDeepLinkHandler {
 
     companion object {
         fun itemDetailLink(itemId: String) =
-            Uri.parse("https://www.archive.org/details/?id=${itemId}")
+            Uri.parse("https://www.archive.org/details/?id=$itemId")
     }
 }
diff --git a/navigation/src/main/java/org/kafka/navigation/rememberBottomSheetNavigator.kt b/navigation/src/main/java/org/kafka/navigation/rememberBottomSheetNavigator.kt
index ec6d17d8..328d7c0e 100644
--- a/navigation/src/main/java/org/kafka/navigation/rememberBottomSheetNavigator.kt
+++ b/navigation/src/main/java/org/kafka/navigation/rememberBottomSheetNavigator.kt
@@ -17,7 +17,7 @@ fun rememberBottomSheetNavigator(
         initialValue = ModalBottomSheetValue.Hidden,
         animationSpec = animationSpec,
         confirmValueChange = { true },
-        skipHalfExpanded = skipHalfExpanded
+        skipHalfExpanded = skipHalfExpanded,
     )
 
     return remember(sheetState) {
diff --git a/notifications/src/main/java/org/kafka/notifications/NotificationManager.kt b/notifications/src/main/java/org/kafka/notifications/NotificationManager.kt
index 63349d46..ac4869a0 100644
--- a/notifications/src/main/java/org/kafka/notifications/NotificationManager.kt
+++ b/notifications/src/main/java/org/kafka/notifications/NotificationManager.kt
@@ -12,7 +12,7 @@ interface NotificationManager {
     fun buildNotification(
         push: Push,
         pendingIntent: PendingIntent?,
-        notificationBuilder: NotificationBuilder = {}
+        notificationBuilder: NotificationBuilder = {},
     ): Notification
 
     fun showNotification(id: Int, notification: Notification?)
@@ -27,7 +27,7 @@ interface NotificationManager {
 data class Push(
     val notification: Notification,
     val channel: Channel,
-    val actions: List<Action>
+    val actions: List<Action>,
 ) {
     data class Action(val title: String, @DrawableRes val resId: Int)
     data class Channel(val id: String, val name: String)
diff --git a/notifications/src/main/java/org/kafka/notifications/NotificationManagerImpl.kt b/notifications/src/main/java/org/kafka/notifications/NotificationManagerImpl.kt
index 0c2d9b4b..f22bcdc8 100644
--- a/notifications/src/main/java/org/kafka/notifications/NotificationManagerImpl.kt
+++ b/notifications/src/main/java/org/kafka/notifications/NotificationManagerImpl.kt
@@ -14,7 +14,7 @@ import androidx.core.app.NotificationManagerCompat
 
 class NotificationManagerImpl(
     application: Application,
-    private val notificationManager: NotificationManagerCompat
+    private val notificationManager: NotificationManagerCompat,
 ) : NotificationManager {
 
     private val context = application.applicationContext
@@ -40,7 +40,7 @@ class NotificationManagerImpl(
         createNotificationChannel(channel)
 
         builder = NotificationCompat.Builder(
-            context, channel.id
+            context, channel.id,
         ).apply {
             setContentTitle(notification.title)
             setContentText(notification.message)
@@ -64,10 +64,14 @@ class NotificationManagerImpl(
             mapIntent.setPackage("com.google.android.apps.maps")
 
             return PendingIntent.getActivity(
-                /* context = */ context,
-                /* requestCode = */ 100,
-                /* intent = */ mapIntent,
-                /* flags = */ 0
+                /* context = */
+                context,
+                /* requestCode = */
+                100,
+                /* intent = */
+                mapIntent,
+                /* flags = */
+                0,
             )
         }
 
@@ -77,7 +81,7 @@ class NotificationManagerImpl(
                 val notificationChannel = NotificationChannel(
                     channel.id,
                     channel.name,
-                    IMPORTANCE_DEFAULT
+                    IMPORTANCE_DEFAULT,
                 )
                 notificationManager.createNotificationChannel(notificationChannel)
             }
diff --git a/public/404.html b/public/404.html
index 9ddcc213..bf994df6 100644
--- a/public/404.html
+++ b/public/404.html
@@ -1,33 +1,89 @@
 <!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
+<html lang="en" class="no-js">
+
+<head>
+    <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Page Not Found</title>
+    <title>Kafka Archives</title>
+    <meta name="description" content="Millions of text and audiobooks, all free and open source">
+    <meta name="keywords" content="Audiobooks, pdf, books, internet archive, archive.org, Kafka archives">
+    <meta name="author" content="Codrops">
+    <link rel="shortcut icon" href="favicon.ico">
+    <link rel="stylesheet" href="https://use.typekit.net/dba6omz.css">
+    <link rel="stylesheet" type="text/css" href="/style.css">
+    <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
+    <script>document.documentElement.className = "js";
+
+var supportsCssVars = function supportsCssVars() {
+  var e,
+      t = document.createElement("style");
+  return t.innerHTML = "root: { --tmp-var: bold; }", document.head.appendChild(t), e = !!(window.CSS && window.CSS.supports && window.CSS.supports("font-weight", "var(--tmp-var)")), t.parentNode.removeChild(t), e;
+};
+
+supportsCssVars() || alert("Please view this demo in a modern browser that supports CSS Variables.");</script>
+</head>
+
+<body class="demo-3 loading">
+<main>
+    <h1 class="title">Download Kafka Archives to access this content</h1>
+    <nav class="menu">
+        <a class="menu__item" href="https://play.google.com/store/apps/details?id=com.kafka.user">
+            <svg class="menu__text" viewBox="0 0 150 20" preserveAspectRatio="xMinYMid meet">
+                <defs>
+                    <filter id="goo-1">
+                        <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="blur"></feGaussianBlur>
+                        <feColorMatrix in="blur" mode="matrix" values="	1 0 0 0 0
+																			0 1 0 0 0
+																			1 0 1 0 0
+																			0 0 0 18 -8" result="goo"></feColorMatrix>
+                        <feComposite in="SourceGraphic" in2="goo" operator="atop"></feComposite>
+                    </filter>
+                </defs>
+                <g>
+                    <text x="0" y="15">Download Kafka</text>
+                    <text x="0" y="15">Play Store</text>
+                </g>
+            </svg>
+        </a>
+        <a class="menu__item" href="https://www.kafkaarchives.com">
+            <svg class="menu__text" viewBox="0 0 150 20" preserveAspectRatio="xMinYMid meet">
+                <defs>
+                    <filter id="goo-2">
+                        <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="blur"></feGaussianBlur>
+                        <feColorMatrix in="blur" mode="matrix" values="	1 0 0 0 0
+																			0 1 0 0 0
+																			1 0 1 0 0
+																			0 0 0 18 -8" result="goo"></feColorMatrix>
+                        <feComposite in="SourceGraphic" in2="goo" operator="atop"></feComposite>
+                    </filter>
+                </defs>
+                <g>
+                    <text x="0" y="15">Visit</text>
+                    <text x="0" y="15">Website</text>
+                </g>
+            </svg>
+        </a>
+        <a class="menu__item" href="https://github.com/vipulyaara/Kafka">
+            <svg class="menu__text" viewBox="0 0 150 20" preserveAspectRatio="xMinYMid meet">
+                <defs>
+                    <filter id="goo-3">
+                        <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="blur"></feGaussianBlur>
+                        <feColorMatrix in="blur" mode="matrix" values="	1 0 0 0 0
+																			0 1 0 0 0
+																			1 0 1 0 0
+																			0 0 0 18 -8" result="goo"></feColorMatrix>
+                        <feComposite in="SourceGraphic" in2="goo" operator="atop"></feComposite>
+                    </filter>
+                </defs>
+                <g>
+                    <text x="0" y="15">See Code</text>
+                    <text x="0" y="15">Github</text>
+                </g>
+            </svg>
+        </a>
+    </nav>
+</main>
+<script src="/demo.js"></script>
+</body>
 
-    <style media="screen">
-      body { background: #ECEFF1; color: rgba(0,0,0,0.87); font-family: Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; }
-      #message { background: white; max-width: 360px; margin: 100px auto 16px; padding: 32px 24px 16px; border-radius: 3px; }
-      #message h3 { color: #888; font-weight: normal; font-size: 16px; margin: 16px 0 12px; }
-      #message h2 { color: #ffa100; font-weight: bold; font-size: 16px; margin: 0 0 8px; }
-      #message h1 { font-size: 22px; font-weight: 300; color: rgba(0,0,0,0.6); margin: 0 0 16px;}
-      #message p { line-height: 140%; margin: 16px 0 24px; font-size: 14px; }
-      #message a { display: block; text-align: center; background: #039be5; text-transform: uppercase; text-decoration: none; color: white; padding: 16px; border-radius: 4px; }
-      #message, #message a { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
-      #load { color: rgba(0,0,0,0.4); text-align: center; font-size: 13px; }
-      @media (max-width: 600px) {
-        body, #message { margin-top: 0; background: white; box-shadow: none; }
-        body { border-top: 16px solid #ffa100; }
-      }
-    </style>
-  </head>
-  <body>
-    <div id="message">
-      <h2>404</h2>
-      <h1>Page Not Found</h1>
-      <p>The specified file was not found on this website. Please check the URL for mistakes and try again.</p>
-      <h3>Why am I seeing this?</h3>
-      <p>The page you are looking for does not exist or cannot be linked correctly to the Kafka app.</p>
-    </div>
-  </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/public/demo.js b/public/demo.js
new file mode 100644
index 00000000..8e402b87
--- /dev/null
+++ b/public/demo.js
@@ -0,0 +1,5888 @@
+// modules are defined as an array
+// [ module function, map of requires ]
+//
+// map of requires is short require name -> numeric require
+//
+// anything defined in a previous bundle is accessed via the
+// orig method which is the require for previous bundles
+parcelRequire = (function (modules, cache, entry, globalName) {
+  // Save the require from previous bundle to this closure if any
+  var previousRequire = typeof parcelRequire === 'function' && parcelRequire;
+  var nodeRequire = typeof require === 'function' && require;
+
+  function newRequire(name, jumped) {
+    if (!cache[name]) {
+      if (!modules[name]) {
+        // if we cannot find the module within our internal map or
+        // cache jump to the current global require ie. the last bundle
+        // that was added to the page.
+        var currentRequire = typeof parcelRequire === 'function' && parcelRequire;
+        if (!jumped && currentRequire) {
+          return currentRequire(name, true);
+        }
+
+        // If there are other bundles on this page the require from the
+        // previous one is saved to 'previousRequire'. Repeat this as
+        // many times as there are bundles until the module is found or
+        // we exhaust the require chain.
+        if (previousRequire) {
+          return previousRequire(name, true);
+        }
+
+        // Try the node require function if it exists.
+        if (nodeRequire && typeof name === 'string') {
+          return nodeRequire(name);
+        }
+
+        var err = new Error('Cannot find module \'' + name + '\'');
+        err.code = 'MODULE_NOT_FOUND';
+        throw err;
+      }
+
+      localRequire.resolve = resolve;
+      localRequire.cache = {};
+
+      var module = cache[name] = new newRequire.Module(name);
+
+      modules[name][0].call(module.exports, localRequire, module, module.exports, this);
+    }
+
+    return cache[name].exports;
+
+    function localRequire(x){
+      return newRequire(localRequire.resolve(x));
+    }
+
+    function resolve(x){
+      return modules[name][1][x] || x;
+    }
+  }
+
+  function Module(moduleName) {
+    this.id = moduleName;
+    this.bundle = newRequire;
+    this.exports = {};
+  }
+
+  newRequire.isParcelRequire = true;
+  newRequire.Module = Module;
+  newRequire.modules = modules;
+  newRequire.cache = cache;
+  newRequire.parent = previousRequire;
+  newRequire.register = function (id, exports) {
+    modules[id] = [function (require, module) {
+      module.exports = exports;
+    }, {}];
+  };
+
+  var error;
+  for (var i = 0; i < entry.length; i++) {
+    try {
+      newRequire(entry[i]);
+    } catch (e) {
+      // Save first error but execute all entries
+      if (!error) {
+        error = e;
+      }
+    }
+  }
+
+  if (entry.length) {
+    // Expose entry point to Node, AMD or browser globals
+    // Based on https://github.com/ForbesLindesay/umd/blob/master/template.js
+    var mainExports = newRequire(entry[entry.length - 1]);
+
+    // CommonJS
+    if (typeof exports === "object" && typeof module !== "undefined") {
+      module.exports = mainExports;
+
+    // RequireJS
+    } else if (typeof define === "function" && define.amd) {
+     define(function () {
+       return mainExports;
+     });
+
+    // <script>
+    } else if (globalName) {
+      this[globalName] = mainExports;
+    }
+  }
+
+  // Override the current require with this new one
+  parcelRequire = newRequire;
+
+  if (error) {
+    // throw error from earlier, _after updating parcelRequire_
+    throw error;
+  }
+
+  return newRequire;
+})({"TNS6":[function(require,module,exports) {
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports._getCache = exports._getSetter = exports._missingPlugin = exports._round = exports._roundModifier = exports._config = exports._ticker = exports._plugins = exports._checkPlugin = exports._replaceRandom = exports._colorStringFilter = exports._sortPropTweensByPriority = exports._forEachName = exports._removeLinkedListItem = exports._setDefaults = exports._relExp = exports._renderComplexString = exports._isUndefined = exports._isString = exports._numWithUnitExp = exports._numExp = exports._getProperty = exports.shuffle = exports.interpolate = exports.unitize = exports.pipe = exports.mapRange = exports.toArray = exports.splitColor = exports.clamp = exports.getUnit = exports.normalize = exports.snap = exports.random = exports.distribute = exports.wrapYoyo = exports.wrap = exports.Circ = exports.Expo = exports.Sine = exports.Bounce = exports.SteppedEase = exports.Back = exports.Elastic = exports.Strong = exports.Quint = exports.Quart = exports.Cubic = exports.Quad = exports.Linear = exports.Power4 = exports.Power3 = exports.Power2 = exports.Power1 = exports.Power0 = exports.default = exports.gsap = exports.PropTween = exports.TweenLite = exports.TweenMax = exports.Tween = exports.TimelineLite = exports.TimelineMax = exports.Timeline = exports.Animation = exports.GSCache = void 0;
+
+function _assertThisInitialized(self) {
+  if (self === void 0) {
+    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+  }
+
+  return self;
+}
+
+function _inheritsLoose(subClass, superClass) {
+  subClass.prototype = Object.create(superClass.prototype);
+  subClass.prototype.constructor = subClass;
+  subClass.__proto__ = superClass;
+}
+/*!
+ * GSAP 3.2.6
+ * https://greensock.com
+ *
+ * @license Copyright 2008-2020, GreenSock. All rights reserved.
+ * Subject to the terms at https://greensock.com/standard-license or for
+ * Club GreenSock members, the agreement issued with that membership.
+ * @author: Jack Doyle, jack@greensock.com
+*/
+
+/* eslint-disable */
+
+
+var _config = {
+  autoSleep: 120,
+  force3D: "auto",
+  nullTargetWarn: 1,
+  units: {
+    lineHeight: ""
+  }
+},
+    _defaults = {
+  duration: .5,
+  overwrite: false,
+  delay: 0
+},
+    _bigNum = 1e8,
+    _tinyNum = 1 / _bigNum,
+    _2PI = Math.PI * 2,
+    _HALF_PI = _2PI / 4,
+    _gsID = 0,
+    _sqrt = Math.sqrt,
+    _cos = Math.cos,
+    _sin = Math.sin,
+    _isString = function _isString(value) {
+  return typeof value === "string";
+},
+    _isFunction = function _isFunction(value) {
+  return typeof value === "function";
+},
+    _isNumber = function _isNumber(value) {
+  return typeof value === "number";
+},
+    _isUndefined = function _isUndefined(value) {
+  return typeof value === "undefined";
+},
+    _isObject = function _isObject(value) {
+  return typeof value === "object";
+},
+    _isNotFalse = function _isNotFalse(value) {
+  return value !== false;
+},
+    _windowExists = function _windowExists() {
+  return typeof window !== "undefined";
+},
+    _isFuncOrString = function _isFuncOrString(value) {
+  return _isFunction(value) || _isString(value);
+},
+    _isArray = Array.isArray,
+    _strictNumExp = /(?:-?\.?\d|\.)+/gi,
+    //only numbers (including negatives and decimals) but NOT relative values.
+_numExp = /[-+=.]*\d+[.e\-+]*\d*[e\-\+]*\d*/g,
+    //finds any numbers, including ones that start with += or -=, negative numbers, and ones in scientific notation like 1e-8.
+_numWithUnitExp = /[-+=.]*\d+[.e-]*\d*[a-z%]*/g,
+    _complexStringNumExp = /[-+=.]*\d+(?:\.|e-|e)*\d*/gi,
+    //duplicate so that while we're looping through matches from exec(), it doesn't contaminate the lastIndex of _numExp which we use to search for colors too.
+_parenthesesExp = /\(([^()]+)\)/i,
+    //finds the string between parentheses.
+_relExp = /[+-]=-?[\.\d]+/,
+    _delimitedValueExp = /[#\-+.]*\b[a-z\d-=+%.]+/gi,
+    _globalTimeline,
+    _win,
+    _coreInitted,
+    _doc,
+    _globals = {},
+    _installScope = {},
+    _coreReady,
+    _install = function _install(scope) {
+  return (_installScope = _merge(scope, _globals)) && gsap;
+},
+    _missingPlugin = function _missingPlugin(property, value) {
+  return console.warn("Invalid property", property, "set to", value, "Missing plugin? gsap.registerPlugin()");
+},
+    _warn = function _warn(message, suppress) {
+  return !suppress && console.warn(message);
+},
+    _addGlobal = function _addGlobal(name, obj) {
+  return name && (_globals[name] = obj) && _installScope && (_installScope[name] = obj) || _globals;
+},
+    _emptyFunc = function _emptyFunc() {
+  return 0;
+},
+    _reservedProps = {},
+    _lazyTweens = [],
+    _lazyLookup = {},
+    _lastRenderedFrame,
+    _plugins = {},
+    _effects = {},
+    _nextGCFrame = 30,
+    _harnessPlugins = [],
+    _callbackNames = "",
+    _harness = function _harness(targets) {
+  var target = targets[0],
+      harnessPlugin,
+      i;
+
+  if (!_isObject(target) && !_isFunction(target)) {
+    targets = [targets];
+  }
+
+  if (!(harnessPlugin = (target._gsap || {}).harness)) {
+    i = _harnessPlugins.length;
+
+    while (i-- && !_harnessPlugins[i].targetTest(target)) {}
+
+    harnessPlugin = _harnessPlugins[i];
+  }
+
+  i = targets.length;
+
+  while (i--) {
+    targets[i] && (targets[i]._gsap || (targets[i]._gsap = new GSCache(targets[i], harnessPlugin))) || targets.splice(i, 1);
+  }
+
+  return targets;
+},
+    _getCache = function _getCache(target) {
+  return target._gsap || _harness(toArray(target))[0]._gsap;
+},
+    _getProperty = function _getProperty(target, property) {
+  var currentValue = target[property];
+  return _isFunction(currentValue) ? target[property]() : _isUndefined(currentValue) && target.getAttribute(property) || currentValue;
+},
+    _forEachName = function _forEachName(names, func) {
+  return (names = names.split(",")).forEach(func) || names;
+},
+    //split a comma-delimited list of names into an array, then run a forEach() function and return the split array (this is just a way to consolidate/shorten some code).
+_round = function _round(value) {
+  return Math.round(value * 100000) / 100000 || 0;
+},
+    _arrayContainsAny = function _arrayContainsAny(toSearch, toFind) {
+  //searches one array to find matches for any of the items in the toFind array. As soon as one is found, it returns true. It does NOT return all the matches; it's simply a boolean search.
+  var l = toFind.length,
+      i = 0;
+
+  for (; toSearch.indexOf(toFind[i]) < 0 && ++i < l;) {}
+
+  return i < l;
+},
+    _parseVars = function _parseVars(params, type, parent) {
+  //reads the arguments passed to one of the key methods and figures out if the user is defining things with the OLD/legacy syntax where the duration is the 2nd parameter, and then it adjusts things accordingly and spits back the corrected vars object (with the duration added if necessary, as well as runBackwards or startAt or immediateRender). type 0 = to()/staggerTo(), 1 = from()/staggerFrom(), 2 = fromTo()/staggerFromTo()
+  var isLegacy = _isNumber(params[1]),
+      varsIndex = (isLegacy ? 2 : 1) + (type < 2 ? 0 : 1),
+      vars = params[varsIndex],
+      irVars;
+
+  if (isLegacy) {
+    vars.duration = params[1];
+  }
+
+  vars.parent = parent;
+
+  if (type) {
+    irVars = vars;
+
+    while (parent && !("immediateRender" in irVars)) {
+      // inheritance hasn't happened yet, but someone may have set a default in an ancestor timeline. We could do vars.immediateRender = _isNotFalse(_inheritDefaults(vars).immediateRender) but that'd exact a slight performance penalty because _inheritDefaults() also runs in the Tween constructor. We're paying a small kb price here to gain speed.
+      irVars = parent.vars.defaults || {};
+      parent = _isNotFalse(parent.vars.inherit) && parent.parent;
+    }
+
+    vars.immediateRender = _isNotFalse(irVars.immediateRender);
+
+    if (type < 2) {
+      vars.runBackwards = 1;
+    } else {
+      vars.startAt = params[varsIndex - 1]; // "from" vars
+    }
+  }
+
+  return vars;
+},
+    _lazyRender = function _lazyRender() {
+  var l = _lazyTweens.length,
+      a = _lazyTweens.slice(0),
+      i,
+      tween;
+
+  _lazyLookup = {};
+  _lazyTweens.length = 0;
+
+  for (i = 0; i < l; i++) {
+    tween = a[i];
+
+    if (tween && tween._lazy) {
+      tween.render(tween._lazy[0], tween._lazy[1], true)._lazy = 0;
+    }
+  }
+},
+    _lazySafeRender = function _lazySafeRender(animation, time, suppressEvents, force) {
+  if (_lazyTweens.length) {
+    _lazyRender();
+  }
+
+  animation.render(time, suppressEvents, force);
+
+  if (_lazyTweens.length) {
+    //in case rendering caused any tweens to lazy-init, we should render them because typically when someone calls seek() or time() or progress(), they expect an immediate render.
+    _lazyRender();
+  }
+},
+    _numericIfPossible = function _numericIfPossible(value) {
+  var n = parseFloat(value);
+  return (n || n === 0) && (value + "").match(_delimitedValueExp).length < 2 ? n : value;
+},
+    _passThrough = function _passThrough(p) {
+  return p;
+},
+    _setDefaults = function _setDefaults(obj, defaults) {
+  for (var p in defaults) {
+    if (!(p in obj)) {
+      obj[p] = defaults[p];
+    }
+  }
+
+  return obj;
+},
+    _setKeyframeDefaults = function _setKeyframeDefaults(obj, defaults) {
+  for (var p in defaults) {
+    if (!(p in obj) && p !== "duration" && p !== "ease") {
+      obj[p] = defaults[p];
+    }
+  }
+},
+    _merge = function _merge(base, toMerge) {
+  for (var p in toMerge) {
+    base[p] = toMerge[p];
+  }
+
+  return base;
+},
+    _mergeDeep = function _mergeDeep(base, toMerge) {
+  for (var p in toMerge) {
+    base[p] = _isObject(toMerge[p]) ? _mergeDeep(base[p] || (base[p] = {}), toMerge[p]) : toMerge[p];
+  }
+
+  return base;
+},
+    _copyExcluding = function _copyExcluding(obj, excluding) {
+  var copy = {},
+      p;
+
+  for (p in obj) {
+    if (!(p in excluding)) {
+      copy[p] = obj[p];
+    }
+  }
+
+  return copy;
+},
+    _inheritDefaults = function _inheritDefaults(vars) {
+  var parent = vars.parent || _globalTimeline,
+      func = vars.keyframes ? _setKeyframeDefaults : _setDefaults;
+
+  if (_isNotFalse(vars.inherit)) {
+    while (parent) {
+      func(vars, parent.vars.defaults);
+      parent = parent.parent;
+    }
+  }
+
+  return vars;
+},
+    _arraysMatch = function _arraysMatch(a1, a2) {
+  var i = a1.length,
+      match = i === a2.length;
+
+  while (match && i-- && a1[i] === a2[i]) {}
+
+  return i < 0;
+},
+    _addLinkedListItem = function _addLinkedListItem(parent, child, firstProp, lastProp, sortBy) {
+  if (firstProp === void 0) {
+    firstProp = "_first";
+  }
+
+  if (lastProp === void 0) {
+    lastProp = "_last";
+  }
+
+  var prev = parent[lastProp],
+      t;
+
+  if (sortBy) {
+    t = child[sortBy];
+
+    while (prev && prev[sortBy] > t) {
+      prev = prev._prev;
+    }
+  }
+
+  if (prev) {
+    child._next = prev._next;
+    prev._next = child;
+  } else {
+    child._next = parent[firstProp];
+    parent[firstProp] = child;
+  }
+
+  if (child._next) {
+    child._next._prev = child;
+  } else {
+    parent[lastProp] = child;
+  }
+
+  child._prev = prev;
+  child.parent = child._dp = parent;
+  return child;
+},
+    _removeLinkedListItem = function _removeLinkedListItem(parent, child, firstProp, lastProp) {
+  if (firstProp === void 0) {
+    firstProp = "_first";
+  }
+
+  if (lastProp === void 0) {
+    lastProp = "_last";
+  }
+
+  var prev = child._prev,
+      next = child._next;
+
+  if (prev) {
+    prev._next = next;
+  } else if (parent[firstProp] === child) {
+    parent[firstProp] = next;
+  }
+
+  if (next) {
+    next._prev = prev;
+  } else if (parent[lastProp] === child) {
+    parent[lastProp] = prev;
+  }
+
+  child._next = child._prev = child.parent = null; // don't delete the _dp just so we can revert if necessary. But parent should be null to indicate the item isn't in a linked list.
+},
+    _removeFromParent = function _removeFromParent(child, onlyIfParentHasAutoRemove) {
+  if (child.parent && (!onlyIfParentHasAutoRemove || child.parent.autoRemoveChildren)) {
+    child.parent.remove(child);
+  }
+
+  child._act = 0;
+},
+    _uncache = function _uncache(animation) {
+  var a = animation;
+
+  while (a) {
+    a._dirty = 1;
+    a = a.parent;
+  }
+
+  return animation;
+},
+    _recacheAncestors = function _recacheAncestors(animation) {
+  var parent = animation.parent;
+
+  while (parent && parent.parent) {
+    //sometimes we must force a re-sort of all children and update the duration/totalDuration of all ancestor timelines immediately in case, for example, in the middle of a render loop, one tween alters another tween's timeScale which shoves its startTime before 0, forcing the parent timeline to shift around and shiftChildren() which could affect that next tween's render (startTime). Doesn't matter for the root timeline though.
+    parent._dirty = 1;
+    parent.totalDuration();
+    parent = parent.parent;
+  }
+
+  return animation;
+},
+    _hasNoPausedAncestors = function _hasNoPausedAncestors(animation) {
+  return !animation || animation._ts && _hasNoPausedAncestors(animation.parent);
+},
+    _elapsedCycleDuration = function _elapsedCycleDuration(animation) {
+  return animation._repeat ? _animationCycle(animation._tTime, animation = animation.duration() + animation._rDelay) * animation : 0;
+},
+    // feed in the totalTime and cycleDuration and it'll return the cycle (iteration minus 1) and if the playhead is exactly at the very END, it will NOT bump up to the next cycle.
+_animationCycle = function _animationCycle(tTime, cycleDuration) {
+  return (tTime /= cycleDuration) && ~~tTime === tTime ? ~~tTime - 1 : ~~tTime;
+},
+    _parentToChildTotalTime = function _parentToChildTotalTime(parentTime, child) {
+  return (parentTime - child._start) * child._ts + (child._ts >= 0 ? 0 : child._dirty ? child.totalDuration() : child._tDur);
+},
+    _setEnd = function _setEnd(animation) {
+  return animation._end = _round(animation._start + (animation._tDur / Math.abs(animation._ts || animation._rts || _tinyNum) || 0));
+},
+
+/*
+_totalTimeToTime = (clampedTotalTime, duration, repeat, repeatDelay, yoyo) => {
+	let cycleDuration = duration + repeatDelay,
+		time = _round(clampedTotalTime % cycleDuration);
+	if (time > duration) {
+		time = duration;
+	}
+	return (yoyo && (~~(clampedTotalTime / cycleDuration) & 1)) ? duration - time : time;
+},
+*/
+_postAddChecks = function _postAddChecks(timeline, child) {
+  var t;
+
+  if (child._time || child._initted && !child._dur) {
+    //in case, for example, the _start is moved on a tween that has already rendered. Imagine it's at its end state, then the startTime is moved WAY later (after the end of this timeline), it should render at its beginning.
+    t = _parentToChildTotalTime(timeline.rawTime(), child);
+
+    if (!child._dur || _clamp(0, child.totalDuration(), t) - child._tTime > _tinyNum) {
+      child.render(t, true);
+    }
+  } //if the timeline has already ended but the inserted tween/timeline extends the duration, we should enable this timeline again so that it renders properly. We should also align the playhead with the parent timeline's when appropriate.
+
+
+  if (_uncache(timeline)._dp && timeline._initted && timeline._time >= timeline._dur && timeline._ts) {
+    //in case any of the ancestors had completed but should now be enabled...
+    if (timeline._dur < timeline.duration()) {
+      t = timeline;
+
+      while (t._dp) {
+        t.rawTime() >= 0 && t.totalTime(t._tTime); //moves the timeline (shifts its startTime) if necessary, and also enables it. If it's currently zero, though, it may not be scheduled to render until later so there's no need to force it to align with the current playhead position. Only move to catch up with the playhead.
+
+        t = t._dp;
+      }
+    }
+
+    timeline._zTime = -_tinyNum; // helps ensure that the next render() will be forced (crossingStart = true in render()), even if the duration hasn't changed (we're adding a child which would need to get rendered). Definitely an edge case. Note: we MUST do this AFTER the loop above where the totalTime() might trigger a render() because this _addToTimeline() method gets called from the Animation constructor, BEFORE tweens even record their targets, etc. so we wouldn't want things to get triggered in the wrong order.
+  }
+},
+    _addToTimeline = function _addToTimeline(timeline, child, position, skipChecks) {
+  child.parent && _removeFromParent(child);
+  child._start = _round(position + child._delay);
+  child._end = _round(child._start + (child.totalDuration() / Math.abs(child.timeScale()) || 0));
+
+  _addLinkedListItem(timeline, child, "_first", "_last", timeline._sort ? "_start" : 0);
+
+  timeline._recent = child;
+  skipChecks || _postAddChecks(timeline, child);
+  return timeline;
+},
+    _attemptInitTween = function _attemptInitTween(tween, totalTime, force, suppressEvents) {
+  _initTween(tween, totalTime);
+
+  if (!tween._initted) {
+    return 1;
+  }
+
+  if (!force && tween._pt && (tween._dur && tween.vars.lazy !== false || !tween._dur && tween.vars.lazy) && _lastRenderedFrame !== _ticker.frame) {
+    _lazyTweens.push(tween);
+
+    tween._lazy = [totalTime, suppressEvents];
+    return 1;
+  }
+},
+    _renderZeroDurationTween = function _renderZeroDurationTween(tween, totalTime, suppressEvents, force) {
+  var prevRatio = tween._zTime < 0 ? 0 : 1,
+      ratio = totalTime < 0 ? 0 : 1,
+      repeatDelay = tween._rDelay,
+      tTime = 0,
+      pt,
+      iteration,
+      prevIteration;
+
+  if (repeatDelay && tween._repeat) {
+    //in case there's a zero-duration tween that has a repeat with a repeatDelay
+    tTime = _clamp(0, tween._tDur, totalTime);
+    iteration = _animationCycle(tTime, repeatDelay);
+    prevIteration = _animationCycle(tween._tTime, repeatDelay);
+
+    if (iteration !== prevIteration) {
+      prevRatio = 1 - ratio;
+
+      if (tween.vars.repeatRefresh && tween._initted) {
+        tween.invalidate();
+      }
+    }
+  }
+
+  if (!tween._initted && _attemptInitTween(tween, totalTime, force, suppressEvents)) {
+    //if we render the very beginning (time == 0) of a fromTo(), we must force the render (normal tweens wouldn't need to render at a time of 0 when the prevTime was also 0). This is also mandatory to make sure overwriting kicks in immediately.
+    return;
+  }
+
+  if (ratio !== prevRatio || force || tween._zTime === _tinyNum || !totalTime && tween._zTime) {
+    tween._zTime = totalTime || (suppressEvents ? _tinyNum : 0); //when the playhead arrives at EXACTLY time 0 (right on top) of a zero-duration tween, we need to discern if events are suppressed so that when the playhead moves again (next time), it'll trigger the callback. If events are NOT suppressed, obviously the callback would be triggered in this render. Basically, the callback should fire either when the playhead ARRIVES or LEAVES this exact spot, not both. Imagine doing a timeline.seek(0) and there's a callback that sits at 0. Since events are suppressed on that seek() by default, nothing will fire, but when the playhead moves off of that position, the callback should fire. This behavior is what people intuitively expect.
+
+    tween.ratio = ratio;
+
+    if (tween._from) {
+      ratio = 1 - ratio;
+    }
+
+    tween._time = 0;
+    tween._tTime = tTime;
+    suppressEvents || _callback(tween, "onStart");
+    pt = tween._pt;
+
+    while (pt) {
+      pt.r(ratio, pt.d);
+      pt = pt._next;
+    }
+
+    if (!ratio && tween._startAt && !tween._onUpdate && tween._start) {
+      //if the tween is positioned at the VERY beginning (_start 0) of its parent timeline, it's illegal for the playhead to go back further, so we should not render the recorded startAt values.
+      tween._startAt.render(totalTime, true, force);
+    }
+
+    tween._onUpdate && (suppressEvents || _callback(tween, "onUpdate"));
+
+    if (tTime && tween._repeat && !suppressEvents && tween.parent) {
+      _callback(tween, "onRepeat");
+    }
+
+    if ((totalTime >= tween._tDur || totalTime < 0) && tween.ratio === ratio) {
+      tween.ratio && _removeFromParent(tween, 1);
+
+      if (!suppressEvents) {
+        _callback(tween, tween.ratio ? "onComplete" : "onReverseComplete", true);
+
+        tween._prom && tween._prom();
+      }
+    }
+  }
+},
+    _findNextPauseTween = function _findNextPauseTween(animation, prevTime, time) {
+  var child;
+
+  if (time > prevTime) {
+    child = animation._first;
+
+    while (child && child._start <= time) {
+      if (!child._dur && child.data === "isPause" && child._start > prevTime) {
+        return child;
+      }
+
+      child = child._next;
+    }
+  } else {
+    child = animation._last;
+
+    while (child && child._start >= time) {
+      if (!child._dur && child.data === "isPause" && child._start < prevTime) {
+        return child;
+      }
+
+      child = child._prev;
+    }
+  }
+},
+    _setDuration = function _setDuration(animation, duration, skipUncache) {
+  var repeat = animation._repeat,
+      dur = _round(duration) || 0;
+  animation._dur = dur;
+  animation._tDur = !repeat ? dur : repeat < 0 ? 1e12 : _round(dur * (repeat + 1) + animation._rDelay * repeat);
+
+  if (animation._time > dur) {
+    animation._time = dur;
+    animation._tTime = Math.min(animation._tTime, animation._tDur);
+  }
+
+  !skipUncache && _uncache(animation.parent);
+  animation.parent && _setEnd(animation);
+  return animation;
+},
+    _onUpdateTotalDuration = function _onUpdateTotalDuration(animation) {
+  return animation instanceof Timeline ? _uncache(animation) : _setDuration(animation, animation._dur);
+},
+    _zeroPosition = {
+  _start: 0,
+  endTime: _emptyFunc
+},
+    _parsePosition = function _parsePosition(animation, position) {
+  var labels = animation.labels,
+      recent = animation._recent || _zeroPosition,
+      clippedDuration = animation.duration() >= _bigNum ? recent.endTime(false) : animation._dur,
+      //in case there's a child that infinitely repeats, users almost never intend for the insertion point of a new child to be based on a SUPER long value like that so we clip it and assume the most recently-added child's endTime should be used instead.
+  i,
+      offset;
+
+  if (_isString(position) && (isNaN(position) || position in labels)) {
+    //if the string is a number like "1", check to see if there's a label with that name, otherwise interpret it as a number (absolute value).
+    i = position.charAt(0);
+
+    if (i === "<" || i === ">") {
+      return (i === "<" ? recent._start : recent.endTime(recent._repeat >= 0)) + (parseFloat(position.substr(1)) || 0);
+    }
+
+    i = position.indexOf("=");
+
+    if (i < 0) {
+      if (!(position in labels)) {
+        labels[position] = clippedDuration;
+      }
+
+      return labels[position];
+    }
+
+    offset = +(position.charAt(i - 1) + position.substr(i + 1));
+    return i > 1 ? _parsePosition(animation, position.substr(0, i - 1)) + offset : clippedDuration + offset;
+  }
+
+  return position == null ? clippedDuration : +position;
+},
+    _conditionalReturn = function _conditionalReturn(value, func) {
+  return value || value === 0 ? func(value) : func;
+},
+    _clamp = function _clamp(min, max, value) {
+  return value < min ? min : value > max ? max : value;
+},
+    getUnit = function getUnit(value) {
+  return (value + "").substr((parseFloat(value) + "").length);
+},
+    clamp = function clamp(min, max, value) {
+  return _conditionalReturn(value, function (v) {
+    return _clamp(min, max, v);
+  });
+},
+    _slice = [].slice,
+    _isArrayLike = function _isArrayLike(value, nonEmpty) {
+  return value && _isObject(value) && "length" in value && (!nonEmpty && !value.length || value.length - 1 in value && _isObject(value[0])) && !value.nodeType && value !== _win;
+},
+    _flatten = function _flatten(ar, leaveStrings, accumulator) {
+  if (accumulator === void 0) {
+    accumulator = [];
+  }
+
+  return ar.forEach(function (value) {
+    var _accumulator;
+
+    return _isString(value) && !leaveStrings || _isArrayLike(value, 1) ? (_accumulator = accumulator).push.apply(_accumulator, toArray(value)) : accumulator.push(value);
+  }) || accumulator;
+},
+    //takes any value and returns an array. If it's a string (and leaveStrings isn't true), it'll use document.querySelectorAll() and convert that to an array. It'll also accept iterables like jQuery objects.
+toArray = function toArray(value, leaveStrings) {
+  return _isString(value) && !leaveStrings && (_coreInitted || !_wake()) ? _slice.call(_doc.querySelectorAll(value), 0) : _isArray(value) ? _flatten(value, leaveStrings) : _isArrayLike(value) ? _slice.call(value, 0) : value ? [value] : [];
+},
+    shuffle = function shuffle(a) {
+  return a.sort(function () {
+    return .5 - Math.random();
+  });
+},
+    // alternative that's a bit faster and more reliably diverse but bigger:   for (let j, v, i = a.length; i; j = ~~(Math.random() * i), v = a[--i], a[i] = a[j], a[j] = v); return a;
+//for distributing values across an array. Can accept a number, a function or (most commonly) a function which can contain the following properties: {base, amount, from, ease, grid, axis, length, each}. Returns a function that expects the following parameters: index, target, array. Recognizes the following
+distribute = function distribute(v) {
+  if (_isFunction(v)) {
+    return v;
+  }
+
+  var vars = _isObject(v) ? v : {
+    each: v
+  },
+      //n:1 is just to indicate v was a number; we leverage that later to set v according to the length we get. If a number is passed in, we treat it like the old stagger value where 0.1, for example, would mean that things would be distributed with 0.1 between each element in the array rather than a total "amount" that's chunked out among them all.
+  ease = _parseEase(vars.ease),
+      from = vars.from || 0,
+      base = parseFloat(vars.base) || 0,
+      cache = {},
+      isDecimal = from > 0 && from < 1,
+      ratios = isNaN(from) || isDecimal,
+      axis = vars.axis,
+      ratioX = from,
+      ratioY = from;
+
+  if (_isString(from)) {
+    ratioX = ratioY = {
+      center: .5,
+      edges: .5,
+      end: 1
+    }[from] || 0;
+  } else if (!isDecimal && ratios) {
+    ratioX = from[0];
+    ratioY = from[1];
+  }
+
+  return function (i, target, a) {
+    var l = (a || vars).length,
+        distances = cache[l],
+        originX,
+        originY,
+        x,
+        y,
+        d,
+        j,
+        max,
+        min,
+        wrapAt;
+
+    if (!distances) {
+      wrapAt = vars.grid === "auto" ? 0 : (vars.grid || [1, _bigNum])[1];
+
+      if (!wrapAt) {
+        max = -_bigNum;
+
+        while (max < (max = a[wrapAt++].getBoundingClientRect().left) && wrapAt < l) {}
+
+        wrapAt--;
+      }
+
+      distances = cache[l] = [];
+      originX = ratios ? Math.min(wrapAt, l) * ratioX - .5 : from % wrapAt;
+      originY = ratios ? l * ratioY / wrapAt - .5 : from / wrapAt | 0;
+      max = 0;
+      min = _bigNum;
+
+      for (j = 0; j < l; j++) {
+        x = j % wrapAt - originX;
+        y = originY - (j / wrapAt | 0);
+        distances[j] = d = !axis ? _sqrt(x * x + y * y) : Math.abs(axis === "y" ? y : x);
+
+        if (d > max) {
+          max = d;
+        }
+
+        if (d < min) {
+          min = d;
+        }
+      }
+
+      from === "random" && shuffle(distances);
+      distances.max = max - min;
+      distances.min = min;
+      distances.v = l = (parseFloat(vars.amount) || parseFloat(vars.each) * (wrapAt > l ? l - 1 : !axis ? Math.max(wrapAt, l / wrapAt) : axis === "y" ? l / wrapAt : wrapAt) || 0) * (from === "edges" ? -1 : 1);
+      distances.b = l < 0 ? base - l : base;
+      distances.u = getUnit(vars.amount || vars.each) || 0; //unit
+
+      ease = ease && l < 0 ? _invertEase(ease) : ease;
+    }
+
+    l = (distances[i] - distances.min) / distances.max || 0;
+    return _round(distances.b + (ease ? ease(l) : l) * distances.v) + distances.u; //round in order to work around floating point errors
+  };
+},
+    _roundModifier = function _roundModifier(v) {
+  //pass in 0.1 get a function that'll round to the nearest tenth, or 5 to round to the closest 5, or 0.001 to the closest 1000th, etc.
+  var p = v < 1 ? Math.pow(10, (v + "").length - 2) : 1; //to avoid floating point math errors (like 24 * 0.1 == 2.4000000000000004), we chop off at a specific number of decimal places (much faster than toFixed()
+
+  return function (raw) {
+    return ~~(Math.round(parseFloat(raw) / v) * v * p) / p + (_isNumber(raw) ? 0 : getUnit(raw));
+  };
+},
+    snap = function snap(snapTo, value) {
+  var isArray = _isArray(snapTo),
+      radius,
+      is2D;
+
+  if (!isArray && _isObject(snapTo)) {
+    radius = isArray = snapTo.radius || _bigNum;
+
+    if (snapTo.values) {
+      snapTo = toArray(snapTo.values);
+
+      if (is2D = !_isNumber(snapTo[0])) {
+        radius *= radius; //performance optimization so we don't have to Math.sqrt() in the loop.
+      }
+    } else {
+      snapTo = _roundModifier(snapTo.increment);
+    }
+  }
+
+  return _conditionalReturn(value, !isArray ? _roundModifier(snapTo) : _isFunction(snapTo) ? function (raw) {
+    is2D = snapTo(raw);
+    return Math.abs(is2D - raw) <= radius ? is2D : raw;
+  } : function (raw) {
+    var x = parseFloat(is2D ? raw.x : raw),
+        y = parseFloat(is2D ? raw.y : 0),
+        min = _bigNum,
+        closest = 0,
+        i = snapTo.length,
+        dx,
+        dy;
+
+    while (i--) {
+      if (is2D) {
+        dx = snapTo[i].x - x;
+        dy = snapTo[i].y - y;
+        dx = dx * dx + dy * dy;
+      } else {
+        dx = Math.abs(snapTo[i] - x);
+      }
+
+      if (dx < min) {
+        min = dx;
+        closest = i;
+      }
+    }
+
+    closest = !radius || min <= radius ? snapTo[closest] : raw;
+    return is2D || closest === raw || _isNumber(raw) ? closest : closest + getUnit(raw);
+  });
+},
+    random = function random(min, max, roundingIncrement, returnFunction) {
+  return _conditionalReturn(_isArray(min) ? !max : roundingIncrement === true ? !!(roundingIncrement = 0) : !returnFunction, function () {
+    return _isArray(min) ? min[~~(Math.random() * min.length)] : (roundingIncrement = roundingIncrement || 1e-5) && (returnFunction = roundingIncrement < 1 ? Math.pow(10, (roundingIncrement + "").length - 2) : 1) && ~~(Math.round((min + Math.random() * (max - min)) / roundingIncrement) * roundingIncrement * returnFunction) / returnFunction;
+  });
+},
+    pipe = function pipe() {
+  for (var _len = arguments.length, functions = new Array(_len), _key = 0; _key < _len; _key++) {
+    functions[_key] = arguments[_key];
+  }
+
+  return function (value) {
+    return functions.reduce(function (v, f) {
+      return f(v);
+    }, value);
+  };
+},
+    unitize = function unitize(func, unit) {
+  return function (value) {
+    return func(parseFloat(value)) + (unit || getUnit(value));
+  };
+},
+    normalize = function normalize(min, max, value) {
+  return mapRange(min, max, 0, 1, value);
+},
+    _wrapArray = function _wrapArray(a, wrapper, value) {
+  return _conditionalReturn(value, function (index) {
+    return a[~~wrapper(index)];
+  });
+},
+    wrap = function wrap(min, max, value) {
+  // NOTE: wrap() CANNOT be an arrow function! A very odd compiling bug causes problems (unrelated to GSAP).
+  var range = max - min;
+  return _isArray(min) ? _wrapArray(min, wrap(0, min.length), max) : _conditionalReturn(value, function (value) {
+    return (range + (value - min) % range) % range + min;
+  });
+},
+    wrapYoyo = function wrapYoyo(min, max, value) {
+  var range = max - min,
+      total = range * 2;
+  return _isArray(min) ? _wrapArray(min, wrapYoyo(0, min.length - 1), max) : _conditionalReturn(value, function (value) {
+    value = (total + (value - min) % total) % total;
+    return min + (value > range ? total - value : value);
+  });
+},
+    _replaceRandom = function _replaceRandom(value) {
+  //replaces all occurrences of random(...) in a string with the calculated random value. can be a range like random(-100, 100, 5) or an array like random([0, 100, 500])
+  var prev = 0,
+      s = "",
+      i,
+      nums,
+      end,
+      isArray;
+
+  while (~(i = value.indexOf("random(", prev))) {
+    end = value.indexOf(")", i);
+    isArray = value.charAt(i + 7) === "[";
+    nums = value.substr(i + 7, end - i - 7).match(isArray ? _delimitedValueExp : _strictNumExp);
+    s += value.substr(prev, i - prev) + random(isArray ? nums : +nums[0], +nums[1], +nums[2] || 1e-5);
+    prev = end + 1;
+  }
+
+  return s + value.substr(prev, value.length - prev);
+},
+    mapRange = function mapRange(inMin, inMax, outMin, outMax, value) {
+  var inRange = inMax - inMin,
+      outRange = outMax - outMin;
+  return _conditionalReturn(value, function (value) {
+    return outMin + (value - inMin) / inRange * outRange;
+  });
+},
+    interpolate = function interpolate(start, end, progress, mutate) {
+  var func = isNaN(start + end) ? 0 : function (p) {
+    return (1 - p) * start + p * end;
+  };
+
+  if (!func) {
+    var isString = _isString(start),
+        master = {},
+        p,
+        i,
+        interpolators,
+        l,
+        il;
+
+    progress === true && (mutate = 1) && (progress = null);
+
+    if (isString) {
+      start = {
+        p: start
+      };
+      end = {
+        p: end
+      };
+    } else if (_isArray(start) && !_isArray(end)) {
+      interpolators = [];
+      l = start.length;
+      il = l - 2;
+
+      for (i = 1; i < l; i++) {
+        interpolators.push(interpolate(start[i - 1], start[i])); //build the interpolators up front as a performance optimization so that when the function is called many times, it can just reuse them.
+      }
+
+      l--;
+
+      func = function func(p) {
+        p *= l;
+        var i = Math.min(il, ~~p);
+        return interpolators[i](p - i);
+      };
+
+      progress = end;
+    } else if (!mutate) {
+      start = _merge(_isArray(start) ? [] : {}, start);
+    }
+
+    if (!interpolators) {
+      for (p in end) {
+        _addPropTween.call(master, start, p, "get", end[p]);
+      }
+
+      func = function func(p) {
+        return _renderPropTweens(p, master) || (isString ? start.p : start);
+      };
+    }
+  }
+
+  return _conditionalReturn(progress, func);
+},
+    _getLabelInDirection = function _getLabelInDirection(timeline, fromTime, backward) {
+  //used for nextLabel() and previousLabel()
+  var labels = timeline.labels,
+      min = _bigNum,
+      p,
+      distance,
+      label;
+
+  for (p in labels) {
+    distance = labels[p] - fromTime;
+
+    if (distance < 0 === !!backward && distance && min > (distance = Math.abs(distance))) {
+      label = p;
+      min = distance;
+    }
+  }
+
+  return label;
+},
+    _callback = function _callback(animation, type, executeLazyFirst) {
+  var v = animation.vars,
+      callback = v[type],
+      params,
+      scope;
+
+  if (!callback) {
+    return;
+  }
+
+  params = v[type + "Params"];
+  scope = v.callbackScope || animation;
+  executeLazyFirst && _lazyTweens.length && _lazyRender(); //in case rendering caused any tweens to lazy-init, we should render them because typically when a timeline finishes, users expect things to have rendered fully. Imagine an onUpdate on a timeline that reports/checks tweened values.
+
+  return params ? callback.apply(scope, params) : callback.call(scope);
+},
+    _interrupt = function _interrupt(animation) {
+  _removeFromParent(animation);
+
+  if (animation.progress() < 1) {
+    _callback(animation, "onInterrupt");
+  }
+
+  return animation;
+},
+    _quickTween,
+    _createPlugin = function _createPlugin(config) {
+  config = !config.name && config["default"] || config; //UMD packaging wraps things oddly, so for example MotionPathHelper becomes {MotionPathHelper:MotionPathHelper, default:MotionPathHelper}.
+
+  var name = config.name,
+      isFunc = _isFunction(config),
+      Plugin = name && !isFunc && config.init ? function () {
+    this._props = [];
+  } : config,
+      //in case someone passes in an object that's not a plugin, like CustomEase
+  instanceDefaults = {
+    init: _emptyFunc,
+    render: _renderPropTweens,
+    add: _addPropTween,
+    kill: _killPropTweensOf,
+    modifier: _addPluginModifier,
+    rawVars: 0
+  },
+      statics = {
+    targetTest: 0,
+    get: 0,
+    getSetter: _getSetter,
+    aliases: {},
+    register: 0
+  };
+
+  _wake();
+
+  if (config !== Plugin) {
+    if (_plugins[name]) {
+      return;
+    }
+
+    _setDefaults(Plugin, _setDefaults(_copyExcluding(config, instanceDefaults), statics)); //static methods
+
+
+    _merge(Plugin.prototype, _merge(instanceDefaults, _copyExcluding(config, statics))); //instance methods
+
+
+    _plugins[Plugin.prop = name] = Plugin;
+
+    if (config.targetTest) {
+      _harnessPlugins.push(Plugin);
+
+      _reservedProps[name] = 1;
+    }
+
+    name = (name === "css" ? "CSS" : name.charAt(0).toUpperCase() + name.substr(1)) + "Plugin"; //for the global name. "motionPath" should become MotionPathPlugin
+  }
+
+  _addGlobal(name, Plugin);
+
+  if (config.register) {
+    config.register(gsap, Plugin, PropTween);
+  }
+},
+
+/*
+ * --------------------------------------------------------------------------------------
+ * COLORS
+ * --------------------------------------------------------------------------------------
+ */
+_255 = 255,
+    _colorLookup = {
+  aqua: [0, _255, _255],
+  lime: [0, _255, 0],
+  silver: [192, 192, 192],
+  black: [0, 0, 0],
+  maroon: [128, 0, 0],
+  teal: [0, 128, 128],
+  blue: [0, 0, _255],
+  navy: [0, 0, 128],
+  white: [_255, _255, _255],
+  olive: [128, 128, 0],
+  yellow: [_255, _255, 0],
+  orange: [_255, 165, 0],
+  gray: [128, 128, 128],
+  purple: [128, 0, 128],
+  green: [0, 128, 0],
+  red: [_255, 0, 0],
+  pink: [_255, 192, 203],
+  cyan: [0, _255, _255],
+  transparent: [_255, _255, _255, 0]
+},
+    _hue = function _hue(h, m1, m2) {
+  h = h < 0 ? h + 1 : h > 1 ? h - 1 : h;
+  return (h * 6 < 1 ? m1 + (m2 - m1) * h * 6 : h < .5 ? m2 : h * 3 < 2 ? m1 + (m2 - m1) * (2 / 3 - h) * 6 : m1) * _255 + .5 | 0;
+},
+    splitColor = function splitColor(v, toHSL, forceAlpha) {
+  var a = !v ? _colorLookup.black : _isNumber(v) ? [v >> 16, v >> 8 & _255, v & _255] : 0,
+      r,
+      g,
+      b,
+      h,
+      s,
+      l,
+      max,
+      min,
+      d,
+      wasHSL;
+
+  if (!a) {
+    if (v.substr(-1) === ",") {
+      //sometimes a trailing comma is included and we should chop it off (typically from a comma-delimited list of values like a textShadow:"2px 2px 2px blue, 5px 5px 5px rgb(255,0,0)" - in this example "blue," has a trailing comma. We could strip it out inside parseComplex() but we'd need to do it to the beginning and ending values plus it wouldn't provide protection from other potential scenarios like if the user passes in a similar value.
+      v = v.substr(0, v.length - 1);
+    }
+
+    if (_colorLookup[v]) {
+      a = _colorLookup[v];
+    } else if (v.charAt(0) === "#") {
+      if (v.length === 4) {
+        //for shorthand like #9F0
+        r = v.charAt(1);
+        g = v.charAt(2);
+        b = v.charAt(3);
+        v = "#" + r + r + g + g + b + b;
+      }
+
+      v = parseInt(v.substr(1), 16);
+      a = [v >> 16, v >> 8 & _255, v & _255];
+    } else if (v.substr(0, 3) === "hsl") {
+      a = wasHSL = v.match(_strictNumExp);
+
+      if (!toHSL) {
+        h = +a[0] % 360 / 360;
+        s = +a[1] / 100;
+        l = +a[2] / 100;
+        g = l <= .5 ? l * (s + 1) : l + s - l * s;
+        r = l * 2 - g;
+
+        if (a.length > 3) {
+          a[3] *= 1; //cast as number
+        }
+
+        a[0] = _hue(h + 1 / 3, r, g);
+        a[1] = _hue(h, r, g);
+        a[2] = _hue(h - 1 / 3, r, g);
+      } else if (~v.indexOf("=")) {
+        //if relative values are found, just return the raw strings with the relative prefixes in place.
+        a = v.match(_numExp);
+        forceAlpha && a.length < 4 && (a[3] = 1);
+        return a;
+      }
+    } else {
+      a = v.match(_strictNumExp) || _colorLookup.transparent;
+    }
+
+    a = a.map(Number);
+  }
+
+  if (toHSL && !wasHSL) {
+    r = a[0] / _255;
+    g = a[1] / _255;
+    b = a[2] / _255;
+    max = Math.max(r, g, b);
+    min = Math.min(r, g, b);
+    l = (max + min) / 2;
+
+    if (max === min) {
+      h = s = 0;
+    } else {
+      d = max - min;
+      s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+      h = max === r ? (g - b) / d + (g < b ? 6 : 0) : max === g ? (b - r) / d + 2 : (r - g) / d + 4;
+      h *= 60;
+    }
+
+    a[0] = ~~(h + .5);
+    a[1] = ~~(s * 100 + .5);
+    a[2] = ~~(l * 100 + .5);
+  }
+
+  forceAlpha && a.length < 4 && (a[3] = 1);
+  return a;
+},
+    _colorOrderData = function _colorOrderData(v) {
+  // strips out the colors from the string, finds all the numeric slots (with units) and returns an array of those. The Array also has a "c" property which is an Array of the index values where the colors belong. This is to help work around issues where there's a mis-matched order of color/numeric data like drop-shadow(#f00 0px 1px 2px) and drop-shadow(0x 1px 2px #f00). This is basically a helper function used in _formatColors()
+  var values = [],
+      c = [],
+      i = -1;
+  v.split(_colorExp).forEach(function (v) {
+    var a = v.match(_numWithUnitExp) || [];
+    values.push.apply(values, a);
+    c.push(i += a.length + 1);
+  });
+  values.c = c;
+  return values;
+},
+    _formatColors = function _formatColors(s, toHSL, orderMatchData) {
+  var result = "",
+      colors = (s + result).match(_colorExp),
+      type = toHSL ? "hsla(" : "rgba(",
+      i = 0,
+      c,
+      shell,
+      d,
+      l;
+
+  if (!colors) {
+    return s;
+  }
+
+  colors = colors.map(function (color) {
+    return (color = splitColor(color, toHSL, 1)) && type + (toHSL ? color[0] + "," + color[1] + "%," + color[2] + "%," + color[3] : color.join(",")) + ")";
+  });
+
+  if (orderMatchData) {
+    d = _colorOrderData(s);
+    c = orderMatchData.c;
+
+    if (c.join(result) !== d.c.join(result)) {
+      shell = s.replace(_colorExp, "1").split(_numWithUnitExp);
+      l = shell.length - 1;
+
+      for (; i < l; i++) {
+        result += shell[i] + (~c.indexOf(i) ? colors.shift() || type + "0,0,0,0)" : (d.length ? d : colors.length ? colors : orderMatchData).shift());
+      }
+    }
+  }
+
+  if (!shell) {
+    shell = s.split(_colorExp);
+    l = shell.length - 1;
+
+    for (; i < l; i++) {
+      result += shell[i] + colors[i];
+    }
+  }
+
+  return result + shell[l];
+},
+    _colorExp = function () {
+  var s = "(?:\\b(?:(?:rgb|rgba|hsl|hsla)\\(.+?\\))|\\B#(?:[0-9a-f]{3}){1,2}\\b",
+      //we'll dynamically build this Regular Expression to conserve file size. After building it, it will be able to find rgb(), rgba(), # (hexadecimal), and named color values like red, blue, purple, etc.,
+  p;
+
+  for (p in _colorLookup) {
+    s += "|" + p + "\\b";
+  }
+
+  return new RegExp(s + ")", "gi");
+}(),
+    _hslExp = /hsl[a]?\(/,
+    _colorStringFilter = function _colorStringFilter(a) {
+  var combined = a.join(" "),
+      toHSL;
+  _colorExp.lastIndex = 0;
+
+  if (_colorExp.test(combined)) {
+    toHSL = _hslExp.test(combined);
+    a[1] = _formatColors(a[1], toHSL);
+    a[0] = _formatColors(a[0], toHSL, _colorOrderData(a[1])); // make sure the order of numbers/colors match with the END value.
+
+    return true;
+  }
+},
+
+/*
+ * --------------------------------------------------------------------------------------
+ * TICKER
+ * --------------------------------------------------------------------------------------
+ */
+_tickerActive,
+    _ticker = function () {
+  var _getTime = Date.now,
+      _lagThreshold = 500,
+      _adjustedLag = 33,
+      _startTime = _getTime(),
+      _lastUpdate = _startTime,
+      _gap = 1 / 240,
+      _nextTime = _gap,
+      _listeners = [],
+      _id,
+      _req,
+      _raf,
+      _self,
+      _tick = function _tick(v) {
+    var elapsed = _getTime() - _lastUpdate,
+        manual = v === true,
+        overlap,
+        dispatch;
+
+    if (elapsed > _lagThreshold) {
+      _startTime += elapsed - _adjustedLag;
+    }
+
+    _lastUpdate += elapsed;
+    _self.time = (_lastUpdate - _startTime) / 1000;
+    overlap = _self.time - _nextTime;
+
+    if (overlap > 0 || manual) {
+      _self.frame++;
+      _nextTime += overlap + (overlap >= _gap ? 0.004 : _gap - overlap);
+      dispatch = 1;
+    }
+
+    if (!manual) {
+      //make sure the request is made before we dispatch the "tick" event so that timing is maintained. Otherwise, if processing the "tick" requires a bunch of time (like 15ms) and we're using a setTimeout() that's based on 16.7ms, it'd technically take 31.7ms between frames otherwise.
+      _id = _req(_tick);
+    }
+
+    if (dispatch) {
+      _listeners.forEach(function (l) {
+        return l(_self.time, elapsed, _self.frame, v);
+      });
+    }
+  };
+
+  _self = {
+    time: 0,
+    frame: 0,
+    tick: function tick() {
+      _tick(true);
+    },
+    wake: function wake() {
+      if (_coreReady) {
+        if (!_coreInitted && _windowExists()) {
+          _win = _coreInitted = window;
+          _doc = _win.document || {};
+          _globals.gsap = gsap;
+          (_win.gsapVersions || (_win.gsapVersions = [])).push(gsap.version);
+
+          _install(_installScope || _win.GreenSockGlobals || !_win.gsap && _win || {});
+
+          _raf = _win.requestAnimationFrame;
+        }
+
+        _id && _self.sleep();
+
+        _req = _raf || function (f) {
+          return setTimeout(f, (_nextTime - _self.time) * 1000 + 1 | 0);
+        };
+
+        _tickerActive = 1;
+
+        _tick(2);
+      }
+    },
+    sleep: function sleep() {
+      (_raf ? _win.cancelAnimationFrame : clearTimeout)(_id);
+      _tickerActive = 0;
+      _req = _emptyFunc;
+    },
+    lagSmoothing: function lagSmoothing(threshold, adjustedLag) {
+      _lagThreshold = threshold || 1 / _tinyNum; //zero should be interpreted as basically unlimited
+
+      _adjustedLag = Math.min(adjustedLag, _lagThreshold, 0);
+    },
+    fps: function fps(_fps) {
+      _gap = 1 / (_fps || 240);
+      _nextTime = _self.time + _gap;
+    },
+    add: function add(callback) {
+      _listeners.indexOf(callback) < 0 && _listeners.push(callback);
+
+      _wake();
+    },
+    remove: function remove(callback) {
+      var i;
+      ~(i = _listeners.indexOf(callback)) && _listeners.splice(i, 1);
+    },
+    _listeners: _listeners
+  };
+  return _self;
+}(),
+    _wake = function _wake() {
+  return !_tickerActive && _ticker.wake();
+},
+    //also ensures the core classes are initialized.
+
+/*
+* -------------------------------------------------
+* EASING
+* -------------------------------------------------
+*/
+_easeMap = {},
+    _customEaseExp = /^[\d.\-M][\d.\-,\s]/,
+    _quotesExp = /["']/g,
+    _parseObjectInString = function _parseObjectInString(value) {
+  //takes a string like "{wiggles:10, type:anticipate})" and turns it into a real object. Notice it ends in ")" and includes the {} wrappers. This is because we only use this function for parsing ease configs and prioritized optimization rather than reusability.
+  var obj = {},
+      split = value.substr(1, value.length - 3).split(":"),
+      key = split[0],
+      i = 1,
+      l = split.length,
+      index,
+      val,
+      parsedVal;
+
+  for (; i < l; i++) {
+    val = split[i];
+    index = i !== l - 1 ? val.lastIndexOf(",") : val.length;
+    parsedVal = val.substr(0, index);
+    obj[key] = isNaN(parsedVal) ? parsedVal.replace(_quotesExp, "").trim() : +parsedVal;
+    key = val.substr(index + 1).trim();
+  }
+
+  return obj;
+},
+    _configEaseFromString = function _configEaseFromString(name) {
+  //name can be a string like "elastic.out(1,0.5)", and pass in _easeMap as obj and it'll parse it out and call the actual function like _easeMap.Elastic.easeOut.config(1,0.5). It will also parse custom ease strings as long as CustomEase is loaded and registered (internally as _easeMap._CE).
+  var split = (name + "").split("("),
+      ease = _easeMap[split[0]];
+  return ease && split.length > 1 && ease.config ? ease.config.apply(null, ~name.indexOf("{") ? [_parseObjectInString(split[1])] : _parenthesesExp.exec(name)[1].split(",").map(_numericIfPossible)) : _easeMap._CE && _customEaseExp.test(name) ? _easeMap._CE("", name) : ease;
+},
+    _invertEase = function _invertEase(ease) {
+  return function (p) {
+    return 1 - ease(1 - p);
+  };
+},
+    // potential future feature - allow yoyoEase to be set in children and have those affected when the parent/ancestor timeline yoyos. Not sure it's worth the kb.
+// _propagateYoyoEase = (timeline, isYoyo) => {
+// 	let child = timeline._first, ease;
+// 	while (child) {
+// 		if (child instanceof Timeline) {
+// 			_propagateYoyoEase(child, isYoyo);
+// 		} else if (child.vars.yoyoEase && (!child._yoyo || !child._repeat) && child._yoyo !== isYoyo) {
+// 			if (child.timeline) {
+// 				_propagateYoyoEase(child.timeline, isYoyo);
+// 			} else {
+// 				ease = child._ease;
+// 				child._ease = child._yEase;
+// 				child._yEase = ease;
+// 				child._yoyo = isYoyo;
+// 			}
+// 		}
+// 		child = child._next;
+// 	}
+// },
+_parseEase = function _parseEase(ease, defaultEase) {
+  return !ease ? defaultEase : (_isFunction(ease) ? ease : _easeMap[ease] || _configEaseFromString(ease)) || defaultEase;
+},
+    _insertEase = function _insertEase(names, easeIn, easeOut, easeInOut) {
+  if (easeOut === void 0) {
+    easeOut = function easeOut(p) {
+      return 1 - easeIn(1 - p);
+    };
+  }
+
+  if (easeInOut === void 0) {
+    easeInOut = function easeInOut(p) {
+      return p < .5 ? easeIn(p * 2) / 2 : 1 - easeIn((1 - p) * 2) / 2;
+    };
+  }
+
+  var ease = {
+    easeIn: easeIn,
+    easeOut: easeOut,
+    easeInOut: easeInOut
+  },
+      lowercaseName;
+
+  _forEachName(names, function (name) {
+    _easeMap[name] = _globals[name] = ease;
+    _easeMap[lowercaseName = name.toLowerCase()] = easeOut;
+
+    for (var p in ease) {
+      _easeMap[lowercaseName + (p === "easeIn" ? ".in" : p === "easeOut" ? ".out" : ".inOut")] = _easeMap[name + "." + p] = ease[p];
+    }
+  });
+
+  return ease;
+},
+    _easeInOutFromOut = function _easeInOutFromOut(easeOut) {
+  return function (p) {
+    return p < .5 ? (1 - easeOut(1 - p * 2)) / 2 : .5 + easeOut((p - .5) * 2) / 2;
+  };
+},
+    _configElastic = function _configElastic(type, amplitude, period) {
+  var p1 = amplitude >= 1 ? amplitude : 1,
+      //note: if amplitude is < 1, we simply adjust the period for a more natural feel. Otherwise the math doesn't work right and the curve starts at 1.
+  p2 = (period || (type ? .3 : .45)) / (amplitude < 1 ? amplitude : 1),
+      p3 = p2 / _2PI * (Math.asin(1 / p1) || 0),
+      easeOut = function easeOut(p) {
+    return p === 1 ? 1 : p1 * Math.pow(2, -10 * p) * _sin((p - p3) * p2) + 1;
+  },
+      ease = type === "out" ? easeOut : type === "in" ? function (p) {
+    return 1 - easeOut(1 - p);
+  } : _easeInOutFromOut(easeOut);
+
+  p2 = _2PI / p2; //precalculate to optimize
+
+  ease.config = function (amplitude, period) {
+    return _configElastic(type, amplitude, period);
+  };
+
+  return ease;
+},
+    _configBack = function _configBack(type, overshoot) {
+  if (overshoot === void 0) {
+    overshoot = 1.70158;
+  }
+
+  var easeOut = function easeOut(p) {
+    return p ? --p * p * ((overshoot + 1) * p + overshoot) + 1 : 0;
+  },
+      ease = type === "out" ? easeOut : type === "in" ? function (p) {
+    return 1 - easeOut(1 - p);
+  } : _easeInOutFromOut(easeOut);
+
+  ease.config = function (overshoot) {
+    return _configBack(type, overshoot);
+  };
+
+  return ease;
+}; // a cheaper (kb and cpu) but more mild way to get a parameterized weighted ease by feeding in a value between -1 (easeIn) and 1 (easeOut) where 0 is linear.
+// _weightedEase = ratio => {
+// 	let y = 0.5 + ratio / 2;
+// 	return p => (2 * (1 - p) * p * y + p * p);
+// },
+// a stronger (but more expensive kb/cpu) parameterized weighted ease that lets you feed in a value between -1 (easeIn) and 1 (easeOut) where 0 is linear.
+// _weightedEaseStrong = ratio => {
+// 	ratio = .5 + ratio / 2;
+// 	let o = 1 / 3 * (ratio < .5 ? ratio : 1 - ratio),
+// 		b = ratio - o,
+// 		c = ratio + o;
+// 	return p => p === 1 ? p : 3 * b * (1 - p) * (1 - p) * p + 3 * c * (1 - p) * p * p + p * p * p;
+// };
+
+
+exports._ticker = _ticker;
+exports._colorStringFilter = _colorStringFilter;
+exports.splitColor = splitColor;
+exports.interpolate = interpolate;
+exports.mapRange = mapRange;
+exports._replaceRandom = _replaceRandom;
+exports.wrapYoyo = wrapYoyo;
+exports.wrap = wrap;
+exports.normalize = normalize;
+exports.unitize = unitize;
+exports.pipe = pipe;
+exports.random = random;
+exports.snap = snap;
+exports._roundModifier = _roundModifier;
+exports.distribute = distribute;
+exports.shuffle = shuffle;
+exports.toArray = toArray;
+exports.clamp = clamp;
+exports.getUnit = getUnit;
+exports._removeLinkedListItem = _removeLinkedListItem;
+exports._setDefaults = _setDefaults;
+exports._round = _round;
+exports._forEachName = _forEachName;
+exports._getProperty = _getProperty;
+exports._getCache = _getCache;
+exports._plugins = _plugins;
+exports._missingPlugin = _missingPlugin;
+exports._relExp = _relExp;
+exports._numWithUnitExp = _numWithUnitExp;
+exports._numExp = _numExp;
+exports._isUndefined = _isUndefined;
+exports._isString = _isString;
+exports._config = _config;
+
+_forEachName("Linear,Quad,Cubic,Quart,Quint,Strong", function (name, i) {
+  var power = i < 5 ? i + 1 : i;
+
+  _insertEase(name + ",Power" + (power - 1), i ? function (p) {
+    return Math.pow(p, power);
+  } : function (p) {
+    return p;
+  }, function (p) {
+    return 1 - Math.pow(1 - p, power);
+  }, function (p) {
+    return p < .5 ? Math.pow(p * 2, power) / 2 : 1 - Math.pow((1 - p) * 2, power) / 2;
+  });
+});
+
+_easeMap.Linear.easeNone = _easeMap.none = _easeMap.Linear.easeIn;
+
+_insertEase("Elastic", _configElastic("in"), _configElastic("out"), _configElastic());
+
+(function (n, c) {
+  var n1 = 1 / c,
+      n2 = 2 * n1,
+      n3 = 2.5 * n1,
+      easeOut = function easeOut(p) {
+    return p < n1 ? n * p * p : p < n2 ? n * Math.pow(p - 1.5 / c, 2) + .75 : p < n3 ? n * (p -= 2.25 / c) * p + .9375 : n * Math.pow(p - 2.625 / c, 2) + .984375;
+  };
+
+  _insertEase("Bounce", function (p) {
+    return 1 - easeOut(1 - p);
+  }, easeOut);
+})(7.5625, 2.75);
+
+_insertEase("Expo", function (p) {
+  return p ? Math.pow(2, 10 * (p - 1)) : 0;
+});
+
+_insertEase("Circ", function (p) {
+  return -(_sqrt(1 - p * p) - 1);
+});
+
+_insertEase("Sine", function (p) {
+  return -_cos(p * _HALF_PI) + 1;
+});
+
+_insertEase("Back", _configBack("in"), _configBack("out"), _configBack());
+
+_easeMap.SteppedEase = _easeMap.steps = _globals.SteppedEase = {
+  config: function config(steps, immediateStart) {
+    if (steps === void 0) {
+      steps = 1;
+    }
+
+    var p1 = 1 / steps,
+        p2 = steps + (immediateStart ? 0 : 1),
+        p3 = immediateStart ? 1 : 0,
+        max = 1 - _tinyNum;
+    return function (p) {
+      return ((p2 * _clamp(0, max, p) | 0) + p3) * p1;
+    };
+  }
+};
+_defaults.ease = _easeMap["quad.out"];
+
+_forEachName("onComplete,onUpdate,onStart,onRepeat,onReverseComplete,onInterrupt", function (name) {
+  return _callbackNames += name + "," + name + "Params,";
+});
+/*
+ * --------------------------------------------------------------------------------------
+ * CACHE
+ * --------------------------------------------------------------------------------------
+ */
+
+
+var GSCache = function GSCache(target, harness) {
+  this.id = _gsID++;
+  target._gsap = this;
+  this.target = target;
+  this.harness = harness;
+  this.get = harness ? harness.get : _getProperty;
+  this.set = harness ? harness.getSetter : _getSetter;
+};
+/*
+ * --------------------------------------------------------------------------------------
+ * ANIMATION
+ * --------------------------------------------------------------------------------------
+ */
+
+
+exports.GSCache = GSCache;
+
+var Animation = /*#__PURE__*/function () {
+  function Animation(vars, time) {
+    var parent = vars.parent || _globalTimeline;
+    this.vars = vars;
+    this._delay = +vars.delay || 0;
+
+    if (this._repeat = vars.repeat || 0) {
+      this._rDelay = vars.repeatDelay || 0;
+      this._yoyo = !!vars.yoyo || !!vars.yoyoEase;
+    }
+
+    this._ts = 1;
+
+    _setDuration(this, +vars.duration, 1);
+
+    this.data = vars.data;
+    _tickerActive || _ticker.wake();
+    parent && _addToTimeline(parent, this, time || time === 0 ? time : parent._time, 1);
+    vars.reversed && this.reverse();
+    vars.paused && this.paused(true);
+  }
+
+  var _proto = Animation.prototype;
+
+  _proto.delay = function delay(value) {
+    if (value || value === 0) {
+      this.parent && this.parent.smoothChildTiming && this.startTime(this._start + value - this._delay);
+      this._delay = value;
+      return this;
+    }
+
+    return this._delay;
+  };
+
+  _proto.duration = function duration(value) {
+    return arguments.length ? this.totalDuration(this._repeat > 0 ? value + (value + this._rDelay) * this._repeat : value) : this.totalDuration() && this._dur;
+  };
+
+  _proto.totalDuration = function totalDuration(value) {
+    if (!arguments.length) {
+      return this._tDur;
+    }
+
+    this._dirty = 0;
+    return _setDuration(this, this._repeat < 0 ? value : (value - this._repeat * this._rDelay) / (this._repeat + 1));
+  };
+
+  _proto.totalTime = function totalTime(_totalTime, suppressEvents) {
+    _wake();
+
+    if (!arguments.length) {
+      return this._tTime;
+    }
+
+    var parent = this.parent || this._dp;
+
+    if (parent && parent.smoothChildTiming && this._ts) {
+      // if (!parent._dp && parent._time === parent._dur) { // if a root timeline completes...and then a while later one of its children resumes, we must shoot the playhead forward to where it should be raw-wise, otherwise the child will jump to the end. Down side: this assumes it's using the _ticker.time as a reference.
+      // 	parent._time = _ticker.time - parent._start;
+      // }
+      this._start = _round(parent._time - (this._ts > 0 ? _totalTime / this._ts : ((this._dirty ? this.totalDuration() : this._tDur) - _totalTime) / -this._ts));
+
+      _setEnd(this);
+
+      if (!parent._dirty) {
+        //for performance improvement. If the parent's cache is already dirty, it already took care of marking the ancestors as dirty too, so skip the function call here.
+        _uncache(parent);
+      } //in case any of the ancestor timelines had completed but should now be enabled, we should reset their totalTime() which will also ensure that they're lined up properly and enabled. Skip for animations that are on the root (wasteful). Example: a TimelineLite.exportRoot() is performed when there's a paused tween on the root, the export will not complete until that tween is unpaused, but imagine a child gets restarted later, after all [unpaused] tweens have completed. The start of that child would get pushed out, but one of the ancestors may have completed.
+
+
+      while (parent.parent) {
+        if (parent.parent._time !== parent._start + (parent._ts >= 0 ? parent._tTime / parent._ts : (parent.totalDuration() - parent._tTime) / -parent._ts)) {
+          parent.totalTime(parent._tTime, true);
+        }
+
+        parent = parent.parent;
+      }
+
+      if (!this.parent && this._dp.autoRemoveChildren) {
+        //if the animation doesn't have a parent, put it back into its last parent (recorded as _dp for exactly cases like this). Limit to parents with autoRemoveChildren (like globalTimeline) so that if the user manually removes an animation from a timeline and then alters its playhead, it doesn't get added back in.
+        _addToTimeline(this._dp, this, this._start - this._delay);
+      }
+    }
+
+    if (this._tTime !== _totalTime || !this._dur && !suppressEvents || this._initted && Math.abs(this._zTime) === _tinyNum) {
+      this._ts || (this._pTime = _totalTime); // otherwise, if an animation is paused, then the playhead is moved back to zero, then resumed, it'd revert back to the original time at the pause
+
+      _lazySafeRender(this, _totalTime, suppressEvents);
+    }
+
+    return this;
+  };
+
+  _proto.time = function time(value, suppressEvents) {
+    return arguments.length ? this.totalTime(Math.min(this.totalDuration(), value + _elapsedCycleDuration(this)) % this._dur || (value ? this._dur : 0), suppressEvents) : this._time; // note: if the modulus results in 0, the playhead could be exactly at the end or the beginning, and we always defer to the END with a non-zero value, otherwise if you set the time() to the very end (duration()), it would render at the START!
+  };
+
+  _proto.totalProgress = function totalProgress(value, suppressEvents) {
+    return arguments.length ? this.totalTime(this.totalDuration() * value, suppressEvents) : this.totalDuration() ? Math.min(1, this._tTime / this._tDur) : this.ratio;
+  };
+
+  _proto.progress = function progress(value, suppressEvents) {
+    return arguments.length ? this.totalTime(this.duration() * (this._yoyo && !(this.iteration() & 1) ? 1 - value : value) + _elapsedCycleDuration(this), suppressEvents) : this.duration() ? Math.min(1, this._time / this._dur) : this.ratio;
+  };
+
+  _proto.iteration = function iteration(value, suppressEvents) {
+    var cycleDuration = this.duration() + this._rDelay;
+
+    return arguments.length ? this.totalTime(this._time + (value - 1) * cycleDuration, suppressEvents) : this._repeat ? _animationCycle(this._tTime, cycleDuration) + 1 : 1;
+  };
+
+  _proto.timeScale = function timeScale(value) {
+    if (!arguments.length) {
+      return this._rts === -_tinyNum ? 0 : this._rts; // recorded timeScale. Special case: if someone calls reverse() on an animation with timeScale of 0, we assign it -_tinyNum to remember it's reversed.
+    }
+
+    if (this._rts === value) {
+      return this;
+    }
+
+    var tTime = this.parent && this._ts ? _parentToChildTotalTime(this.parent._time, this) : this._tTime; // make sure to do the parentToChildTotalTime() BEFORE setting the new _ts because the old one must be used in that calculation.
+    // prioritize rendering where the parent's playhead lines up instead of this._tTime because there could be a tween that's animating another tween's timeScale in the same rendering loop (same parent), thus if the timeScale tween renders first, it would alter _start BEFORE _tTime was set on that tick (in the rendering loop), effectively freezing it until the timeScale tween finishes.
+
+    this._rts = +value || 0;
+    this._ts = this._ps || value === -_tinyNum ? 0 : this._rts; // _ts is the functional timeScale which would be 0 if the animation is paused.
+
+    return _recacheAncestors(this.totalTime(_clamp(0, this._tDur, tTime), true));
+  };
+
+  _proto.paused = function paused(value) {
+    if (!arguments.length) {
+      return this._ps;
+    }
+
+    if (this._ps !== value) {
+      this._ps = value;
+
+      if (value) {
+        this._pTime = this._tTime || Math.max(-this._delay, this.rawTime()); // if the pause occurs during the delay phase, make sure that's factored in when resuming.
+
+        this._ts = this._act = 0; // _ts is the functional timeScale, so a paused tween would effectively have a timeScale of 0. We record the "real" timeScale as _rts (recorded time scale)
+      } else {
+        _wake();
+
+        this._ts = this._rts; //only defer to _pTime (pauseTime) if tTime is zero. Remember, someone could pause() an animation, then scrub the playhead and resume(). If the parent doesn't have smoothChildTiming, we render at the rawTime() because the startTime won't get updated.
+
+        this.totalTime(this.parent && !this.parent.smoothChildTiming ? this.rawTime() : this._tTime || this._pTime, this.progress() === 1 && (this._tTime -= _tinyNum) && Math.abs(this._zTime) !== _tinyNum); // edge case: animation.progress(1).pause().play() wouldn't render again because the playhead is already at the end, but the call to totalTime() below will add it back to its parent...and not remove it again (since removing only happens upon rendering at a new time). Offsetting the _tTime slightly is done simply to cause the final render in totalTime() that'll pop it off its timeline (if autoRemoveChildren is true, of course). Check to make sure _zTime isn't -_tinyNum to avoid an edge case where the playhead is pushed to the end but INSIDE a tween/callback, the timeline itself is paused thus halting rendering and leaving a few unrendered. When resuming, it wouldn't render those otherwise.
+      }
+    }
+
+    return this;
+  };
+
+  _proto.startTime = function startTime(value) {
+    if (arguments.length) {
+      this._start = value;
+      var parent = this.parent || this._dp;
+      parent && (parent._sort || !this.parent) && _addToTimeline(parent, this, value - this._delay);
+      return this;
+    }
+
+    return this._start;
+  };
+
+  _proto.endTime = function endTime(includeRepeats) {
+    return this._start + (_isNotFalse(includeRepeats) ? this.totalDuration() : this.duration()) / Math.abs(this._ts);
+  };
+
+  _proto.rawTime = function rawTime(wrapRepeats) {
+    var parent = this.parent || this._dp; // _dp = detatched parent
+
+    return !parent ? this._tTime : wrapRepeats && (!this._ts || this._repeat && this._time && this.totalProgress() < 1) ? this._tTime % (this._dur + this._rDelay) : !this._ts ? this._tTime : _parentToChildTotalTime(parent.rawTime(wrapRepeats), this);
+  } // globalTime(rawTime) {
+  // 	let animation = this,
+  // 		time = arguments.length ? rawTime : animation.rawTime();
+  // 	while (animation) {
+  // 		time = animation._start + time / (animation._ts || 1);
+  // 		animation = animation.parent;
+  // 	}
+  // 	return time;
+  // }
+  ;
+
+  _proto.repeat = function repeat(value) {
+    if (arguments.length) {
+      this._repeat = value;
+      return _onUpdateTotalDuration(this);
+    }
+
+    return this._repeat;
+  };
+
+  _proto.repeatDelay = function repeatDelay(value) {
+    if (arguments.length) {
+      this._rDelay = value;
+      return _onUpdateTotalDuration(this);
+    }
+
+    return this._rDelay;
+  };
+
+  _proto.yoyo = function yoyo(value) {
+    if (arguments.length) {
+      this._yoyo = value;
+      return this;
+    }
+
+    return this._yoyo;
+  };
+
+  _proto.seek = function seek(position, suppressEvents) {
+    return this.totalTime(_parsePosition(this, position), _isNotFalse(suppressEvents));
+  };
+
+  _proto.restart = function restart(includeDelay, suppressEvents) {
+    return this.play().totalTime(includeDelay ? -this._delay : 0, _isNotFalse(suppressEvents));
+  };
+
+  _proto.play = function play(from, suppressEvents) {
+    if (from != null) {
+      this.seek(from, suppressEvents);
+    }
+
+    return this.reversed(false).paused(false);
+  };
+
+  _proto.reverse = function reverse(from, suppressEvents) {
+    if (from != null) {
+      this.seek(from || this.totalDuration(), suppressEvents);
+    }
+
+    return this.reversed(true).paused(false);
+  };
+
+  _proto.pause = function pause(atTime, suppressEvents) {
+    if (atTime != null) {
+      this.seek(atTime, suppressEvents);
+    }
+
+    return this.paused(true);
+  };
+
+  _proto.resume = function resume() {
+    return this.paused(false);
+  };
+
+  _proto.reversed = function reversed(value) {
+    if (arguments.length) {
+      if (!!value !== this.reversed()) {
+        this.timeScale(-this._rts || (value ? -_tinyNum : 0)); // in case timeScale is zero, reversing would have no effect so we use _tinyNum.
+      }
+
+      return this;
+    }
+
+    return this._rts < 0;
+  };
+
+  _proto.invalidate = function invalidate() {
+    this._initted = 0;
+    this._zTime = -_tinyNum;
+    return this;
+  };
+
+  _proto.isActive = function isActive(hasStarted) {
+    var parent = this.parent || this._dp,
+        start = this._start,
+        rawTime;
+    return !!(!parent || this._ts && (this._initted || !hasStarted) && parent.isActive(hasStarted) && (rawTime = parent.rawTime(true)) >= start && rawTime < this.endTime(true) - _tinyNum);
+  };
+
+  _proto.eventCallback = function eventCallback(type, callback, params) {
+    var vars = this.vars;
+
+    if (arguments.length > 1) {
+      if (!callback) {
+        delete vars[type];
+      } else {
+        vars[type] = callback;
+
+        if (params) {
+          vars[type + "Params"] = params;
+        }
+
+        if (type === "onUpdate") {
+          this._onUpdate = callback;
+        }
+      }
+
+      return this;
+    }
+
+    return vars[type];
+  };
+
+  _proto.then = function then(onFulfilled) {
+    var self = this;
+    return new Promise(function (resolve) {
+      var f = _isFunction(onFulfilled) ? onFulfilled : _passThrough,
+          _resolve = function _resolve() {
+        var _then = self.then;
+        self.then = null; // temporarily null the then() method to avoid an infinite loop (see https://github.com/greensock/GSAP/issues/322)
+
+        _isFunction(f) && (f = f(self)) && (f.then || f === self) && (self.then = _then);
+        resolve(f);
+        self.then = _then;
+      };
+
+      if (self._initted && self.totalProgress() === 1 && self._ts >= 0 || !self._tTime && self._ts < 0) {
+        _resolve();
+      } else {
+        self._prom = _resolve;
+      }
+    });
+  };
+
+  _proto.kill = function kill() {
+    _interrupt(this);
+  };
+
+  return Animation;
+}();
+
+exports.Animation = Animation;
+
+_setDefaults(Animation.prototype, {
+  _time: 0,
+  _start: 0,
+  _end: 0,
+  _tTime: 0,
+  _tDur: 0,
+  _dirty: 0,
+  _repeat: 0,
+  _yoyo: false,
+  parent: null,
+  _initted: false,
+  _rDelay: 0,
+  _ts: 1,
+  _dp: 0,
+  ratio: 0,
+  _zTime: -_tinyNum,
+  _prom: 0,
+  _ps: false,
+  _rts: 1
+});
+/*
+ * -------------------------------------------------
+ * TIMELINE
+ * -------------------------------------------------
+ */
+
+
+var Timeline = /*#__PURE__*/function (_Animation) {
+  _inheritsLoose(Timeline, _Animation);
+
+  function Timeline(vars, time) {
+    var _this;
+
+    if (vars === void 0) {
+      vars = {};
+    }
+
+    _this = _Animation.call(this, vars, time) || this;
+    _this.labels = {};
+    _this.smoothChildTiming = !!vars.smoothChildTiming;
+    _this.autoRemoveChildren = !!vars.autoRemoveChildren;
+    _this._sort = _isNotFalse(vars.sortChildren);
+    _this.parent && _postAddChecks(_this.parent, _assertThisInitialized(_this));
+    return _this;
+  }
+
+  var _proto2 = Timeline.prototype;
+
+  _proto2.to = function to(targets, vars, position) {
+    new Tween(targets, _parseVars(arguments, 0, this), _parsePosition(this, _isNumber(vars) ? arguments[3] : position));
+    return this;
+  };
+
+  _proto2.from = function from(targets, vars, position) {
+    new Tween(targets, _parseVars(arguments, 1, this), _parsePosition(this, _isNumber(vars) ? arguments[3] : position));
+    return this;
+  };
+
+  _proto2.fromTo = function fromTo(targets, fromVars, toVars, position) {
+    new Tween(targets, _parseVars(arguments, 2, this), _parsePosition(this, _isNumber(fromVars) ? arguments[4] : position));
+    return this;
+  };
+
+  _proto2.set = function set(targets, vars, position) {
+    vars.duration = 0;
+    vars.parent = this;
+    _inheritDefaults(vars).repeatDelay || (vars.repeat = 0);
+    vars.immediateRender = !!vars.immediateRender;
+    new Tween(targets, vars, _parsePosition(this, position), 1);
+    return this;
+  };
+
+  _proto2.call = function call(callback, params, position) {
+    return _addToTimeline(this, Tween.delayedCall(0, callback, params), _parsePosition(this, position));
+  } //ONLY for backward compatibility! Maybe delete?
+  ;
+
+  _proto2.staggerTo = function staggerTo(targets, duration, vars, stagger, position, onCompleteAll, onCompleteAllParams) {
+    vars.duration = duration;
+    vars.stagger = vars.stagger || stagger;
+    vars.onComplete = onCompleteAll;
+    vars.onCompleteParams = onCompleteAllParams;
+    vars.parent = this;
+    new Tween(targets, vars, _parsePosition(this, position));
+    return this;
+  };
+
+  _proto2.staggerFrom = function staggerFrom(targets, duration, vars, stagger, position, onCompleteAll, onCompleteAllParams) {
+    vars.runBackwards = 1;
+    _inheritDefaults(vars).immediateRender = _isNotFalse(vars.immediateRender);
+    return this.staggerTo(targets, duration, vars, stagger, position, onCompleteAll, onCompleteAllParams);
+  };
+
+  _proto2.staggerFromTo = function staggerFromTo(targets, duration, fromVars, toVars, stagger, position, onCompleteAll, onCompleteAllParams) {
+    toVars.startAt = fromVars;
+    _inheritDefaults(toVars).immediateRender = _isNotFalse(toVars.immediateRender);
+    return this.staggerTo(targets, duration, toVars, stagger, position, onCompleteAll, onCompleteAllParams);
+  };
+
+  _proto2.render = function render(totalTime, suppressEvents, force) {
+    var prevTime = this._time,
+        tDur = this._dirty ? this.totalDuration() : this._tDur,
+        dur = this._dur,
+        tTime = this !== _globalTimeline && totalTime > tDur - _tinyNum && totalTime >= 0 ? tDur : totalTime < _tinyNum ? 0 : totalTime,
+        crossingStart = this._zTime < 0 !== totalTime < 0 && (this._initted || !dur),
+        time,
+        child,
+        next,
+        iteration,
+        cycleDuration,
+        prevPaused,
+        pauseTween,
+        timeScale,
+        prevStart,
+        prevIteration,
+        yoyo,
+        isYoyo;
+
+    if (tTime !== this._tTime || force || crossingStart) {
+      if (prevTime !== this._time && dur) {
+        //if totalDuration() finds a child with a negative startTime and smoothChildTiming is true, things get shifted around internally so we need to adjust the time accordingly. For example, if a tween starts at -30 we must shift EVERYTHING forward 30 seconds and move this timeline's startTime backward by 30 seconds so that things align with the playhead (no jump).
+        tTime += this._time - prevTime;
+        totalTime += this._time - prevTime;
+      }
+
+      time = tTime;
+      prevStart = this._start;
+      timeScale = this._ts;
+      prevPaused = !timeScale;
+
+      if (crossingStart) {
+        if (!dur) {
+          prevTime = this._zTime;
+        }
+
+        if (totalTime || !suppressEvents) {
+          //when the playhead arrives at EXACTLY time 0 (right on top) of a zero-duration timeline, we need to discern if events are suppressed so that when the playhead moves again (next time), it'll trigger the callback. If events are NOT suppressed, obviously the callback would be triggered in this render. Basically, the callback should fire either when the playhead ARRIVES or LEAVES this exact spot, not both. Imagine doing a timeline.seek(0) and there's a callback that sits at 0. Since events are suppressed on that seek() by default, nothing will fire, but when the playhead moves off of that position, the callback should fire. This behavior is what people intuitively expect.
+          this._zTime = totalTime;
+        }
+      }
+
+      if (this._repeat) {
+        //adjust the time for repeats and yoyos
+        yoyo = this._yoyo;
+        cycleDuration = dur + this._rDelay;
+        time = _round(tTime % cycleDuration); //round to avoid floating point errors. (4 % 0.8 should be 0 but some browsers report it as 0.79999999!)
+
+        if (time > dur || tDur === tTime) {
+          time = dur;
+        }
+
+        iteration = ~~(tTime / cycleDuration);
+
+        if (iteration && iteration === tTime / cycleDuration) {
+          time = dur;
+          iteration--;
+        }
+
+        prevIteration = _animationCycle(this._tTime, cycleDuration);
+
+        if (yoyo && iteration & 1) {
+          time = dur - time;
+          isYoyo = 1;
+        }
+        /*
+        make sure children at the end/beginning of the timeline are rendered properly. If, for example,
+        a 3-second long timeline rendered at 2.9 seconds previously, and now renders at 3.2 seconds (which
+        would get translated to 2.8 seconds if the timeline yoyos or 0.2 seconds if it just repeats), there
+        could be a callback or a short tween that's at 2.95 or 3 seconds in which wouldn't render. So
+        we need to push the timeline to the end (and/or beginning depending on its yoyo value). Also we must
+        ensure that zero-duration tweens at the very beginning or end of the Timeline work.
+        */
+
+
+        if (iteration !== prevIteration && !this._lock) {
+          var rewinding = yoyo && prevIteration & 1,
+              doesWrap = rewinding === (yoyo && iteration & 1);
+
+          if (iteration < prevIteration) {
+            rewinding = !rewinding;
+          }
+
+          prevTime = rewinding ? 0 : dur;
+          this._lock = 1;
+          this.render(prevTime, suppressEvents, !dur)._lock = 0;
+
+          if (!suppressEvents && this.parent) {
+            _callback(this, "onRepeat");
+          }
+
+          this.vars.repeatRefresh && !isYoyo && (this.invalidate()._lock = 1);
+
+          if (prevTime !== this._time || prevPaused !== !this._ts) {
+            return this;
+          }
+
+          if (doesWrap) {
+            this._lock = 2;
+            prevTime = rewinding ? dur + 0.0001 : -0.0001;
+            this.render(prevTime, true);
+            this.vars.repeatRefresh && !isYoyo && this.invalidate();
+          }
+
+          this._lock = 0;
+
+          if (!this._ts && !prevPaused) {
+            return this;
+          } //in order for yoyoEase to work properly when there's a stagger, we must swap out the ease in each sub-tween.
+          //_propagateYoyoEase(this, isYoyo);
+
+        }
+      }
+
+      if (this._hasPause && !this._forcing && this._lock < 2) {
+        pauseTween = _findNextPauseTween(this, _round(prevTime), _round(time));
+
+        if (pauseTween) {
+          tTime -= time - (time = pauseTween._start);
+        }
+      }
+
+      this._tTime = tTime;
+      this._time = time;
+      this._act = !timeScale; //as long as it's not paused, force it to be active so that if the user renders independent of the parent timeline, it'll be forced to re-render on the next tick.
+
+      if (!this._initted) {
+        this._onUpdate = this.vars.onUpdate;
+        this._initted = 1;
+        this._zTime = totalTime;
+      }
+
+      if (!prevTime && time && !suppressEvents) {
+        _callback(this, "onStart");
+      }
+
+      if (time >= prevTime && totalTime >= 0) {
+        child = this._first;
+
+        while (child) {
+          next = child._next;
+
+          if ((child._act || time >= child._start) && child._ts && pauseTween !== child) {
+            if (child.parent !== this) {
+              // an extreme edge case - the child's render could do something like kill() the "next" one in the linked list, or reparent it. In that case we must re-initiate the whole render to be safe.
+              return this.render(totalTime, suppressEvents, force);
+            }
+
+            child.render(child._ts > 0 ? (time - child._start) * child._ts : (child._dirty ? child.totalDuration() : child._tDur) + (time - child._start) * child._ts, suppressEvents, force);
+
+            if (time !== this._time || !this._ts && !prevPaused) {
+              //in case a tween pauses or seeks the timeline when rendering, like inside of an onUpdate/onComplete
+              pauseTween = 0;
+              next && (tTime += this._zTime = -_tinyNum); // it didn't finish rendering, so flag zTime as negative so that so that the next time render() is called it'll be forced (to render any remaining children)
+
+              break;
+            }
+          }
+
+          child = next;
+        }
+      } else {
+        child = this._last;
+        var adjustedTime = totalTime < 0 ? totalTime : time; //when the playhead goes backward beyond the start of this timeline, we must pass that information down to the child animations so that zero-duration tweens know whether to render their starting or ending values.
+
+        while (child) {
+          next = child._prev;
+
+          if ((child._act || adjustedTime <= child._end) && child._ts && pauseTween !== child) {
+            if (child.parent !== this) {
+              // an extreme edge case - the child's render could do something like kill() the "next" one in the linked list, or reparent it. In that case we must re-initiate the whole render to be safe.
+              return this.render(totalTime, suppressEvents, force);
+            }
+
+            child.render(child._ts > 0 ? (adjustedTime - child._start) * child._ts : (child._dirty ? child.totalDuration() : child._tDur) + (adjustedTime - child._start) * child._ts, suppressEvents, force);
+
+            if (time !== this._time || !this._ts && !prevPaused) {
+              //in case a tween pauses or seeks the timeline when rendering, like inside of an onUpdate/onComplete
+              pauseTween = 0;
+              next && (tTime += this._zTime = adjustedTime ? -_tinyNum : _tinyNum); // it didn't finish rendering, so adjust zTime so that so that the next time render() is called it'll be forced (to render any remaining children)
+
+              break;
+            }
+          }
+
+          child = next;
+        }
+      }
+
+      if (pauseTween && !suppressEvents) {
+        this.pause();
+        pauseTween.render(time >= prevTime ? 0 : -_tinyNum)._zTime = time >= prevTime ? 1 : -1;
+
+        if (this._ts) {
+          //the callback resumed playback! So since we may have held back the playhead due to where the pause is positioned, go ahead and jump to where it's SUPPOSED to be (if no pause happened).
+          this._start = prevStart; //if the pause was at an earlier time and the user resumed in the callback, it could reposition the timeline (changing its startTime), throwing things off slightly, so we make sure the _start doesn't shift.
+
+          _setEnd(this);
+
+          return this.render(totalTime, suppressEvents, force);
+        }
+      }
+
+      if (this._onUpdate && !suppressEvents) {
+        _callback(this, "onUpdate", true);
+      }
+
+      if (tTime === tDur && tDur >= this.totalDuration() || !tTime && this._ts < 0) if (prevStart === this._start || Math.abs(timeScale) !== Math.abs(this._ts)) if (!this._lock) {
+        (totalTime || !dur) && (totalTime && this._ts > 0 || !tTime && this._ts < 0) && _removeFromParent(this, 1); // don't remove if the timeline is reversed and the playhead isn't at 0, otherwise tl.progress(1).reverse() won't work. Only remove if the playhead is at the end and timeScale is positive, or if the playhead is at 0 and the timeScale is negative.
+
+        if (!suppressEvents && !(totalTime < 0 && !prevTime)) {
+          _callback(this, tTime === tDur ? "onComplete" : "onReverseComplete", true);
+
+          this._prom && this._prom();
+        }
+      }
+    }
+
+    return this;
+  };
+
+  _proto2.add = function add(child, position) {
+    var _this2 = this;
+
+    if (!_isNumber(position)) {
+      position = _parsePosition(this, position);
+    }
+
+    if (!(child instanceof Animation)) {
+      if (_isArray(child)) {
+        child.forEach(function (obj) {
+          return _this2.add(obj, position);
+        });
+        return _uncache(this);
+      }
+
+      if (_isString(child)) {
+        return this.addLabel(child, position);
+      }
+
+      if (_isFunction(child)) {
+        child = Tween.delayedCall(0, child);
+      } else {
+        return this;
+      }
+    }
+
+    return this !== child ? _addToTimeline(this, child, position) : this; //don't allow a timeline to be added to itself as a child!
+  };
+
+  _proto2.getChildren = function getChildren(nested, tweens, timelines, ignoreBeforeTime) {
+    if (nested === void 0) {
+      nested = true;
+    }
+
+    if (tweens === void 0) {
+      tweens = true;
+    }
+
+    if (timelines === void 0) {
+      timelines = true;
+    }
+
+    if (ignoreBeforeTime === void 0) {
+      ignoreBeforeTime = -_bigNum;
+    }
+
+    var a = [],
+        child = this._first;
+
+    while (child) {
+      if (child._start >= ignoreBeforeTime) {
+        if (child instanceof Tween) {
+          if (tweens) {
+            a.push(child);
+          }
+        } else {
+          if (timelines) {
+            a.push(child);
+          }
+
+          if (nested) {
+            a.push.apply(a, child.getChildren(true, tweens, timelines));
+          }
+        }
+      }
+
+      child = child._next;
+    }
+
+    return a;
+  };
+
+  _proto2.getById = function getById(id) {
+    var animations = this.getChildren(1, 1, 1),
+        i = animations.length;
+
+    while (i--) {
+      if (animations[i].vars.id === id) {
+        return animations[i];
+      }
+    }
+  };
+
+  _proto2.remove = function remove(child) {
+    if (_isString(child)) {
+      return this.removeLabel(child);
+    }
+
+    if (_isFunction(child)) {
+      return this.killTweensOf(child);
+    }
+
+    _removeLinkedListItem(this, child);
+
+    if (child === this._recent) {
+      this._recent = this._last;
+    }
+
+    return _uncache(this);
+  };
+
+  _proto2.totalTime = function totalTime(_totalTime2, suppressEvents) {
+    if (!arguments.length) {
+      return this._tTime;
+    }
+
+    this._forcing = 1;
+
+    if (!this.parent && !this._dp && this._ts) {
+      //special case for the global timeline (or any other that has no parent or detached parent).
+      this._start = _round(_ticker.time - (this._ts > 0 ? _totalTime2 / this._ts : (this.totalDuration() - _totalTime2) / -this._ts));
+    }
+
+    _Animation.prototype.totalTime.call(this, _totalTime2, suppressEvents);
+
+    this._forcing = 0;
+    return this;
+  };
+
+  _proto2.addLabel = function addLabel(label, position) {
+    this.labels[label] = _parsePosition(this, position);
+    return this;
+  };
+
+  _proto2.removeLabel = function removeLabel(label) {
+    delete this.labels[label];
+    return this;
+  };
+
+  _proto2.addPause = function addPause(position, callback, params) {
+    var t = Tween.delayedCall(0, callback || _emptyFunc, params);
+    t.data = "isPause";
+    this._hasPause = 1;
+    return _addToTimeline(this, t, _parsePosition(this, position));
+  };
+
+  _proto2.removePause = function removePause(position) {
+    var child = this._first;
+    position = _parsePosition(this, position);
+
+    while (child) {
+      if (child._start === position && child.data === "isPause") {
+        _removeFromParent(child);
+      }
+
+      child = child._next;
+    }
+  };
+
+  _proto2.killTweensOf = function killTweensOf(targets, props, onlyActive) {
+    var tweens = this.getTweensOf(targets, onlyActive),
+        i = tweens.length;
+
+    while (i--) {
+      _overwritingTween !== tweens[i] && tweens[i].kill(targets, props);
+    }
+
+    return this;
+  };
+
+  _proto2.getTweensOf = function getTweensOf(targets, onlyActive) {
+    var a = [],
+        parsedTargets = toArray(targets),
+        child = this._first,
+        children;
+
+    while (child) {
+      if (child instanceof Tween) {
+        if (_arrayContainsAny(child._targets, parsedTargets) && (!onlyActive || child.isActive(onlyActive === "started"))) {
+          a.push(child);
+        }
+      } else if ((children = child.getTweensOf(parsedTargets, onlyActive)).length) {
+        a.push.apply(a, children);
+      }
+
+      child = child._next;
+    }
+
+    return a;
+  };
+
+  _proto2.tweenTo = function tweenTo(position, vars) {
+    vars = vars || {};
+
+    var tl = this,
+        endTime = _parsePosition(tl, position),
+        _vars = vars,
+        startAt = _vars.startAt,
+        _onStart = _vars.onStart,
+        onStartParams = _vars.onStartParams,
+        tween = Tween.to(tl, _setDefaults(vars, {
+      ease: "none",
+      lazy: false,
+      time: endTime,
+      duration: vars.duration || Math.abs((endTime - (startAt && "time" in startAt ? startAt.time : tl._time)) / tl.timeScale()) || _tinyNum,
+      onStart: function onStart() {
+        tl.pause();
+        var duration = vars.duration || Math.abs((endTime - tl._time) / tl.timeScale());
+
+        if (tween._dur !== duration) {
+          _setDuration(tween, duration).render(tween._time, true, true);
+        }
+
+        if (_onStart) {
+          //in case the user had an onStart in the vars - we don't want to overwrite it.
+          _onStart.apply(tween, onStartParams || []);
+        }
+      }
+    }));
+
+    return tween;
+  };
+
+  _proto2.tweenFromTo = function tweenFromTo(fromPosition, toPosition, vars) {
+    return this.tweenTo(toPosition, _setDefaults({
+      startAt: {
+        time: _parsePosition(this, fromPosition)
+      }
+    }, vars));
+  };
+
+  _proto2.recent = function recent() {
+    return this._recent;
+  };
+
+  _proto2.nextLabel = function nextLabel(afterTime) {
+    if (afterTime === void 0) {
+      afterTime = this._time;
+    }
+
+    return _getLabelInDirection(this, _parsePosition(this, afterTime));
+  };
+
+  _proto2.previousLabel = function previousLabel(beforeTime) {
+    if (beforeTime === void 0) {
+      beforeTime = this._time;
+    }
+
+    return _getLabelInDirection(this, _parsePosition(this, beforeTime), 1);
+  };
+
+  _proto2.currentLabel = function currentLabel(value) {
+    return arguments.length ? this.seek(value, true) : this.previousLabel(this._time + _tinyNum);
+  };
+
+  _proto2.shiftChildren = function shiftChildren(amount, adjustLabels, ignoreBeforeTime) {
+    if (ignoreBeforeTime === void 0) {
+      ignoreBeforeTime = 0;
+    }
+
+    var child = this._first,
+        labels = this.labels,
+        p;
+
+    while (child) {
+      if (child._start >= ignoreBeforeTime) {
+        child._start += amount;
+      }
+
+      child = child._next;
+    }
+
+    if (adjustLabels) {
+      for (p in labels) {
+        if (labels[p] >= ignoreBeforeTime) {
+          labels[p] += amount;
+        }
+      }
+    }
+
+    return _uncache(this);
+  };
+
+  _proto2.invalidate = function invalidate() {
+    var child = this._first;
+    this._lock = 0;
+
+    while (child) {
+      child.invalidate();
+      child = child._next;
+    }
+
+    return _Animation.prototype.invalidate.call(this);
+  };
+
+  _proto2.clear = function clear(includeLabels) {
+    if (includeLabels === void 0) {
+      includeLabels = true;
+    }
+
+    var child = this._first,
+        next;
+
+    while (child) {
+      next = child._next;
+      this.remove(child);
+      child = next;
+    }
+
+    this._time = this._tTime = 0;
+
+    if (includeLabels) {
+      this.labels = {};
+    }
+
+    return _uncache(this);
+  };
+
+  _proto2.totalDuration = function totalDuration(value) {
+    var max = 0,
+        self = this,
+        child = self._last,
+        prevStart = _bigNum,
+        prev,
+        end,
+        start,
+        parent;
+
+    if (arguments.length) {
+      return self.timeScale((self._repeat < 0 ? self.duration() : self.totalDuration()) / (self.reversed() ? -value : value));
+    }
+
+    if (self._dirty) {
+      parent = self.parent;
+
+      while (child) {
+        prev = child._prev; //record it here in case the tween changes position in the sequence...
+
+        if (child._dirty) {
+          child.totalDuration(); //could change the tween._startTime, so make sure the animation's cache is clean before analyzing it.
+        }
+
+        start = child._start;
+
+        if (start > prevStart && self._sort && child._ts && !self._lock) {
+          //in case one of the tweens shifted out of order, it needs to be re-inserted into the correct position in the sequence
+          self._lock = 1; //prevent endless recursive calls - there are methods that get triggered that check duration/totalDuration when we add().
+
+          _addToTimeline(self, child, start - child._delay, 1)._lock = 0;
+        } else {
+          prevStart = start;
+        }
+
+        if (start < 0 && child._ts) {
+          //children aren't allowed to have negative startTimes unless smoothChildTiming is true, so adjust here if one is found.
+          max -= start;
+
+          if (!parent && !self._dp || parent && parent.smoothChildTiming) {
+            self._start += start / self._ts;
+            self._time -= start;
+            self._tTime -= start;
+          }
+
+          self.shiftChildren(-start, false, -1e20);
+          prevStart = 0;
+        }
+
+        end = _setEnd(child);
+
+        if (end > max && child._ts) {
+          max = end;
+        }
+
+        child = prev;
+      }
+
+      _setDuration(self, self === _globalTimeline && self._time > max ? self._time : Math.min(_bigNum, max), 1);
+
+      self._dirty = 0;
+    }
+
+    return self._tDur;
+  };
+
+  Timeline.updateRoot = function updateRoot(time) {
+    if (_globalTimeline._ts) {
+      _lazySafeRender(_globalTimeline, _parentToChildTotalTime(time, _globalTimeline));
+
+      _lastRenderedFrame = _ticker.frame;
+    }
+
+    if (_ticker.frame >= _nextGCFrame) {
+      _nextGCFrame += _config.autoSleep || 120;
+      var child = _globalTimeline._first;
+      if (!child || !child._ts) if (_config.autoSleep && _ticker._listeners.length < 2) {
+        while (child && !child._ts) {
+          child = child._next;
+        }
+
+        if (!child) {
+          _ticker.sleep();
+        }
+      }
+    }
+  };
+
+  return Timeline;
+}(Animation);
+
+exports.TimelineLite = exports.TimelineMax = exports.Timeline = Timeline;
+
+_setDefaults(Timeline.prototype, {
+  _lock: 0,
+  _hasPause: 0,
+  _forcing: 0
+});
+
+var _addComplexStringPropTween = function _addComplexStringPropTween(target, prop, start, end, setter, stringFilter, funcParam) {
+  //note: we call _addComplexStringPropTween.call(tweenInstance...) to ensure that it's scoped properly. We may call it from within a plugin too, thus "this" would refer to the plugin.
+  var pt = new PropTween(this._pt, target, prop, 0, 1, _renderComplexString, null, setter),
+      index = 0,
+      matchIndex = 0,
+      result,
+      startNums,
+      color,
+      endNum,
+      chunk,
+      startNum,
+      hasRandom,
+      a;
+  pt.b = start;
+  pt.e = end;
+  start += ""; //ensure values are strings
+
+  end += "";
+
+  if (hasRandom = ~end.indexOf("random(")) {
+    end = _replaceRandom(end);
+  }
+
+  if (stringFilter) {
+    a = [start, end];
+    stringFilter(a, target, prop); //pass an array with the starting and ending values and let the filter do whatever it needs to the values.
+
+    start = a[0];
+    end = a[1];
+  }
+
+  startNums = start.match(_complexStringNumExp) || [];
+
+  while (result = _complexStringNumExp.exec(end)) {
+    endNum = result[0];
+    chunk = end.substring(index, result.index);
+
+    if (color) {
+      color = (color + 1) % 5;
+    } else if (chunk.substr(-5) === "rgba(") {
+      color = 1;
+    }
+
+    if (endNum !== startNums[matchIndex++]) {
+      startNum = parseFloat(startNums[matchIndex - 1]) || 0; //these nested PropTweens are handled in a special way - we'll never actually call a render or setter method on them. We'll just loop through them in the parent complex string PropTween's render method.
+
+      pt._pt = {
+        _next: pt._pt,
+        p: chunk || matchIndex === 1 ? chunk : ",",
+        //note: SVG spec allows omission of comma/space when a negative sign is wedged between two numbers, like 2.5-5.3 instead of 2.5,-5.3 but when tweening, the negative value may switch to positive, so we insert the comma just in case.
+        s: startNum,
+        c: endNum.charAt(1) === "=" ? parseFloat(endNum.substr(2)) * (endNum.charAt(0) === "-" ? -1 : 1) : parseFloat(endNum) - startNum,
+        m: color && color < 4 ? Math.round : 0
+      };
+      index = _complexStringNumExp.lastIndex;
+    }
+  }
+
+  pt.c = index < end.length ? end.substring(index, end.length) : ""; //we use the "c" of the PropTween to store the final part of the string (after the last number)
+
+  pt.fp = funcParam;
+
+  if (_relExp.test(end) || hasRandom) {
+    pt.e = 0; //if the end string contains relative values or dynamic random(...) values, delete the end it so that on the final render we don't actually set it to the string with += or -= characters (forces it to use the calculated value).
+  }
+
+  this._pt = pt; //start the linked list with this new PropTween. Remember, we call _addComplexStringPropTween.call(tweenInstance...) to ensure that it's scoped properly. We may call it from within a plugin too, thus "this" would refer to the plugin.
+
+  return pt;
+},
+    _addPropTween = function _addPropTween(target, prop, start, end, index, targets, modifier, stringFilter, funcParam) {
+  if (_isFunction(end)) {
+    end = end(index || 0, target, targets);
+  }
+
+  var currentValue = target[prop],
+      parsedStart = start !== "get" ? start : !_isFunction(currentValue) ? currentValue : funcParam ? target[prop.indexOf("set") || !_isFunction(target["get" + prop.substr(3)]) ? prop : "get" + prop.substr(3)](funcParam) : target[prop](),
+      setter = !_isFunction(currentValue) ? _setterPlain : funcParam ? _setterFuncWithParam : _setterFunc,
+      pt;
+
+  if (_isString(end)) {
+    if (~end.indexOf("random(")) {
+      end = _replaceRandom(end);
+    }
+
+    if (end.charAt(1) === "=") {
+      end = parseFloat(parsedStart) + parseFloat(end.substr(2)) * (end.charAt(0) === "-" ? -1 : 1) + (getUnit(parsedStart) || 0);
+    }
+  }
+
+  if (parsedStart !== end) {
+    if (!isNaN(parsedStart + end)) {
+      pt = new PropTween(this._pt, target, prop, +parsedStart || 0, end - (parsedStart || 0), typeof currentValue === "boolean" ? _renderBoolean : _renderPlain, 0, setter);
+
+      if (funcParam) {
+        pt.fp = funcParam;
+      }
+
+      if (modifier) {
+        pt.modifier(modifier, this, target);
+      }
+
+      return this._pt = pt;
+    }
+
+    !currentValue && !(prop in target) && _missingPlugin(prop, end);
+    return _addComplexStringPropTween.call(this, target, prop, parsedStart, end, setter, stringFilter || _config.stringFilter, funcParam);
+  }
+},
+    //creates a copy of the vars object and processes any function-based values (putting the resulting values directly into the copy) as well as strings with "random()" in them. It does NOT process relative values.
+_processVars = function _processVars(vars, index, target, targets, tween) {
+  if (_isFunction(vars)) {
+    vars = _parseFuncOrString(vars, tween, index, target, targets);
+  }
+
+  if (!_isObject(vars) || vars.style && vars.nodeType || _isArray(vars)) {
+    return _isString(vars) ? _parseFuncOrString(vars, tween, index, target, targets) : vars;
+  }
+
+  var copy = {},
+      p;
+
+  for (p in vars) {
+    copy[p] = _parseFuncOrString(vars[p], tween, index, target, targets);
+  }
+
+  return copy;
+},
+    _checkPlugin = function _checkPlugin(property, vars, tween, index, target, targets) {
+  var plugin, pt, ptLookup, i;
+
+  if (_plugins[property] && (plugin = new _plugins[property]()).init(target, plugin.rawVars ? vars[property] : _processVars(vars[property], index, target, targets, tween), tween, index, targets) !== false) {
+    tween._pt = pt = new PropTween(tween._pt, target, property, 0, 1, plugin.render, plugin, 0, plugin.priority);
+
+    if (tween !== _quickTween) {
+      ptLookup = tween._ptLookup[tween._targets.indexOf(target)]; //note: we can't use tween._ptLookup[index] because for staggered tweens, the index from the fullTargets array won't match what it is in each individual tween that spawns from the stagger.
+
+      i = plugin._props.length;
+
+      while (i--) {
+        ptLookup[plugin._props[i]] = pt;
+      }
+    }
+  }
+
+  return plugin;
+},
+    _overwritingTween,
+    //store a reference temporarily so we can avoid overwriting itself.
+_initTween = function _initTween(tween, time) {
+  var vars = tween.vars,
+      ease = vars.ease,
+      startAt = vars.startAt,
+      immediateRender = vars.immediateRender,
+      lazy = vars.lazy,
+      onUpdate = vars.onUpdate,
+      onUpdateParams = vars.onUpdateParams,
+      callbackScope = vars.callbackScope,
+      runBackwards = vars.runBackwards,
+      yoyoEase = vars.yoyoEase,
+      keyframes = vars.keyframes,
+      autoRevert = vars.autoRevert,
+      dur = tween._dur,
+      prevStartAt = tween._startAt,
+      targets = tween._targets,
+      parent = tween.parent,
+      fullTargets = parent && parent.data === "nested" ? parent.parent._targets : targets,
+      autoOverwrite = tween._overwrite === "auto",
+      tl = tween.timeline,
+      cleanVars,
+      i,
+      p,
+      pt,
+      target,
+      hasPriority,
+      gsData,
+      harness,
+      plugin,
+      ptLookup,
+      index,
+      harnessVars;
+
+  if (tl && (!keyframes || !ease)) {
+    ease = "none";
+  }
+
+  tween._ease = _parseEase(ease, _defaults.ease);
+  tween._yEase = yoyoEase ? _invertEase(_parseEase(yoyoEase === true ? ease : yoyoEase, _defaults.ease)) : 0;
+
+  if (yoyoEase && tween._yoyo && !tween._repeat) {
+    //there must have been a parent timeline with yoyo:true that is currently in its yoyo phase, so flip the eases.
+    yoyoEase = tween._yEase;
+    tween._yEase = tween._ease;
+    tween._ease = yoyoEase;
+  }
+
+  if (!tl) {
+    //if there's an internal timeline, skip all the parsing because we passed that task down the chain.
+    if (prevStartAt) {
+      prevStartAt.render(-1, true).kill();
+    }
+
+    if (startAt) {
+      _removeFromParent(tween._startAt = Tween.set(targets, _setDefaults({
+        data: "isStart",
+        overwrite: false,
+        parent: parent,
+        immediateRender: true,
+        lazy: _isNotFalse(lazy),
+        startAt: null,
+        delay: 0,
+        onUpdate: onUpdate,
+        onUpdateParams: onUpdateParams,
+        callbackScope: callbackScope,
+        stagger: 0
+      }, startAt))); //copy the properties/values into a new object to avoid collisions, like var to = {x:0}, from = {x:500}; timeline.fromTo(e, from, to).fromTo(e, to, from);
+
+
+      if (immediateRender) {
+        if (time > 0) {
+          !autoRevert && (tween._startAt = 0); //tweens that render immediately (like most from() and fromTo() tweens) shouldn't revert when their parent timeline's playhead goes backward past the startTime because the initial render could have happened anytime and it shouldn't be directly correlated to this tween's startTime. Imagine setting up a complex animation where the beginning states of various objects are rendered immediately but the tween doesn't happen for quite some time - if we revert to the starting values as soon as the playhead goes backward past the tween's startTime, it will throw things off visually. Reversion should only happen in Timeline instances where immediateRender was false or when autoRevert is explicitly set to true.
+        } else if (dur) {
+          return; //we skip initialization here so that overwriting doesn't occur until the tween actually begins. Otherwise, if you create several immediateRender:true tweens of the same target/properties to drop into a Timeline, the last one created would overwrite the first ones because they didn't get placed into the timeline yet before the first render occurs and kicks in overwriting.
+        }
+      }
+    } else if (runBackwards && dur) {
+      //from() tweens must be handled uniquely: their beginning values must be rendered but we don't want overwriting to occur yet (when time is still 0). Wait until the tween actually begins before doing all the routines like overwriting. At that time, we should render at the END of the tween to ensure that things initialize correctly (remember, from() tweens go backwards)
+      if (prevStartAt) {
+        !autoRevert && (tween._startAt = 0);
+      } else {
+        if (time) {
+          //in rare cases (like if a from() tween runs and then is invalidate()-ed), immediateRender could be true but the initial forced-render gets skipped, so there's no need to force the render in this context when the _time is greater than 0
+          immediateRender = false;
+        }
+
+        _removeFromParent(tween._startAt = Tween.set(targets, _merge(_copyExcluding(vars, _reservedProps), {
+          overwrite: false,
+          data: "isFromStart",
+          //we tag the tween with as "isFromStart" so that if [inside a plugin] we need to only do something at the very END of a tween, we have a way of identifying this tween as merely the one that's setting the beginning values for a "from()" tween. For example, clearProps in CSSPlugin should only get applied at the very END of a tween and without this tag, from(...{height:100, clearProps:"height", delay:1}) would wipe the height at the beginning of the tween and after 1 second, it'd kick back in.
+          lazy: immediateRender && _isNotFalse(lazy),
+          immediateRender: immediateRender,
+          //zero-duration tweens render immediately by default, but if we're not specifically instructed to render this tween immediately, we should skip this and merely _init() to record the starting values (rendering them immediately would push them to completion which is wasteful in that case - we'd have to render(-1) immediately after)
+          stagger: 0,
+          parent: parent //ensures that nested tweens that had a stagger are handled properly, like gsap.from(".class", {y:gsap.utils.wrap([-100,100])})
+
+        })));
+
+        if (!immediateRender) {
+          _initTween(tween._startAt, _tinyNum); //ensures that the initial values are recorded
+
+        } else if (!time) {
+          return;
+        }
+      }
+    }
+
+    cleanVars = _copyExcluding(vars, _reservedProps);
+    tween._pt = 0;
+    harness = targets[0] ? _getCache(targets[0]).harness : 0;
+    harnessVars = harness && vars[harness.prop]; //someone may need to specify CSS-specific values AND non-CSS values, like if the element has an "x" property plus it's a standard DOM element. We allow people to distinguish by wrapping plugin-specific stuff in a css:{} object for example.
+
+    lazy = dur && _isNotFalse(lazy) || lazy && !dur;
+
+    for (i = 0; i < targets.length; i++) {
+      target = targets[i];
+      gsData = target._gsap || _harness(targets)[i]._gsap;
+      tween._ptLookup[i] = ptLookup = {};
+
+      if (_lazyLookup[gsData.id]) {
+        _lazyRender(); //if other tweens of the same target have recently initted but haven't rendered yet, we've got to force the render so that the starting values are correct (imagine populating a timeline with a bunch of sequential tweens and then jumping to the end)
+
+      }
+
+      index = fullTargets === targets ? i : fullTargets.indexOf(target);
+
+      if (harness && (plugin = new harness()).init(target, harnessVars || cleanVars, tween, index, fullTargets) !== false) {
+        tween._pt = pt = new PropTween(tween._pt, target, plugin.name, 0, 1, plugin.render, plugin, 0, plugin.priority);
+
+        plugin._props.forEach(function (name) {
+          ptLookup[name] = pt;
+        });
+
+        if (plugin.priority) {
+          hasPriority = 1;
+        }
+      }
+
+      if (!harness || harnessVars) {
+        for (p in cleanVars) {
+          if (_plugins[p] && (plugin = _checkPlugin(p, cleanVars, tween, index, target, fullTargets))) {
+            if (plugin.priority) {
+              hasPriority = 1;
+            }
+          } else {
+            ptLookup[p] = pt = _addPropTween.call(tween, target, p, "get", cleanVars[p], index, fullTargets, 0, vars.stringFilter);
+          }
+        }
+      }
+
+      if (tween._op && tween._op[i]) {
+        tween.kill(target, tween._op[i]);
+      }
+
+      if (autoOverwrite && tween._pt) {
+        _overwritingTween = tween;
+
+        _globalTimeline.killTweensOf(target, ptLookup, "started"); //Also make sure the overwriting doesn't overwrite THIS tween!!!
+
+
+        _overwritingTween = 0;
+      }
+
+      if (tween._pt && lazy) {
+        _lazyLookup[gsData.id] = 1;
+      }
+    }
+
+    if (hasPriority) {
+      _sortPropTweensByPriority(tween);
+    }
+
+    if (tween._onInit) {
+      //plugins like RoundProps must wait until ALL of the PropTweens are instantiated. In the plugin's init() function, it sets the _onInit on the tween instance. May not be pretty/intuitive, but it's fast and keeps file size down.
+      tween._onInit(tween);
+    }
+  }
+
+  tween._from = !tl && !!vars.runBackwards; //nested timelines should never run backwards - the backwards-ness is in the child tweens.
+
+  tween._onUpdate = onUpdate;
+  tween._initted = 1;
+},
+    _addAliasesToVars = function _addAliasesToVars(targets, vars) {
+  var harness = targets[0] ? _getCache(targets[0]).harness : 0,
+      propertyAliases = harness && harness.aliases,
+      copy,
+      p,
+      i,
+      aliases;
+
+  if (!propertyAliases) {
+    return vars;
+  }
+
+  copy = _merge({}, vars);
+
+  for (p in propertyAliases) {
+    if (p in copy) {
+      aliases = propertyAliases[p].split(",");
+      i = aliases.length;
+
+      while (i--) {
+        copy[aliases[i]] = copy[p];
+      }
+    }
+  }
+
+  return copy;
+},
+    _parseFuncOrString = function _parseFuncOrString(value, tween, i, target, targets) {
+  return _isFunction(value) ? value.call(tween, i, target, targets) : _isString(value) && ~value.indexOf("random(") ? _replaceRandom(value) : value;
+},
+    _staggerTweenProps = _callbackNames + "repeat,repeatDelay,yoyo,repeatRefresh,yoyoEase",
+    _staggerPropsToSkip = (_staggerTweenProps + ",id,stagger,delay,duration,paused").split(",");
+/*
+ * --------------------------------------------------------------------------------------
+ * TWEEN
+ * --------------------------------------------------------------------------------------
+ */
+
+
+exports._checkPlugin = _checkPlugin;
+
+var Tween = /*#__PURE__*/function (_Animation2) {
+  _inheritsLoose(Tween, _Animation2);
+
+  function Tween(targets, vars, time, skipInherit) {
+    var _this3;
+
+    if (typeof vars === "number") {
+      time.duration = vars;
+      vars = time;
+      time = null;
+    }
+
+    _this3 = _Animation2.call(this, skipInherit ? vars : _inheritDefaults(vars), time) || this;
+    var _this3$vars = _this3.vars,
+        duration = _this3$vars.duration,
+        delay = _this3$vars.delay,
+        immediateRender = _this3$vars.immediateRender,
+        stagger = _this3$vars.stagger,
+        overwrite = _this3$vars.overwrite,
+        keyframes = _this3$vars.keyframes,
+        defaults = _this3$vars.defaults,
+        parent = _this3.parent,
+        parsedTargets = (_isArray(targets) ? _isNumber(targets[0]) : "length" in vars) ? [targets] : toArray(targets),
+        tl,
+        i,
+        copy,
+        l,
+        p,
+        curTarget,
+        staggerFunc,
+        staggerVarsToMerge;
+    _this3._targets = parsedTargets.length ? _harness(parsedTargets) : _warn("GSAP target " + targets + " not found. https://greensock.com", !_config.nullTargetWarn) || [];
+    _this3._ptLookup = []; //PropTween lookup. An array containing an object for each target, having keys for each tweening property
+
+    _this3._overwrite = overwrite;
+
+    if (keyframes || stagger || _isFuncOrString(duration) || _isFuncOrString(delay)) {
+      vars = _this3.vars;
+      tl = _this3.timeline = new Timeline({
+        data: "nested",
+        defaults: defaults || {}
+      });
+      tl.kill();
+      tl.parent = _assertThisInitialized(_this3);
+
+      if (keyframes) {
+        _setDefaults(tl.vars.defaults, {
+          ease: "none"
+        });
+
+        keyframes.forEach(function (frame) {
+          return tl.to(parsedTargets, frame, ">");
+        });
+      } else {
+        l = parsedTargets.length;
+        staggerFunc = stagger ? distribute(stagger) : _emptyFunc;
+
+        if (_isObject(stagger)) {
+          //users can pass in callbacks like onStart/onComplete in the stagger object. These should fire with each individual tween.
+          for (p in stagger) {
+            if (~_staggerTweenProps.indexOf(p)) {
+              if (!staggerVarsToMerge) {
+                staggerVarsToMerge = {};
+              }
+
+              staggerVarsToMerge[p] = stagger[p];
+            }
+          }
+        }
+
+        for (i = 0; i < l; i++) {
+          copy = {};
+
+          for (p in vars) {
+            if (_staggerPropsToSkip.indexOf(p) < 0) {
+              copy[p] = vars[p];
+            }
+          }
+
+          copy.stagger = 0;
+
+          if (staggerVarsToMerge) {
+            _merge(copy, staggerVarsToMerge);
+          }
+
+          if (vars.yoyoEase && !vars.repeat) {
+            //so that propagation works properly when a ancestor timeline yoyos
+            copy.yoyoEase = vars.yoyoEase;
+          }
+
+          curTarget = parsedTargets[i]; //don't just copy duration or delay because if they're a string or function, we'd end up in an infinite loop because _isFuncOrString() would evaluate as true in the child tweens, entering this loop, etc. So we parse the value straight from vars and default to 0.
+
+          copy.duration = +_parseFuncOrString(duration, _assertThisInitialized(_this3), i, curTarget, parsedTargets);
+          copy.delay = (+_parseFuncOrString(delay, _assertThisInitialized(_this3), i, curTarget, parsedTargets) || 0) - _this3._delay;
+
+          if (!stagger && l === 1 && copy.delay) {
+            // if someone does delay:"random(1, 5)", repeat:-1, for example, the delay shouldn't be inside the repeat.
+            _this3._delay = delay = copy.delay;
+            _this3._start += delay;
+            copy.delay = 0;
+          }
+
+          tl.to(curTarget, copy, staggerFunc(i, curTarget, parsedTargets));
+        }
+
+        duration = delay = 0;
+      }
+
+      duration || _this3.duration(duration = tl.duration());
+    } else {
+      _this3.timeline = 0; //speed optimization, faster lookups (no going up the prototype chain)
+    }
+
+    if (overwrite === true) {
+      _overwritingTween = _assertThisInitialized(_this3);
+
+      _globalTimeline.killTweensOf(parsedTargets);
+
+      _overwritingTween = 0;
+    }
+
+    parent && _postAddChecks(parent, _assertThisInitialized(_this3));
+
+    if (immediateRender || !duration && !keyframes && _this3._start === parent._time && _isNotFalse(immediateRender) && _hasNoPausedAncestors(_assertThisInitialized(_this3)) && parent.data !== "nested") {
+      _this3._tTime = -_tinyNum; //forces a render without having to set the render() "force" parameter to true because we want to allow lazying by default (using the "force" parameter always forces an immediate full render)
+
+      _this3.render(Math.max(0, -delay)); //in case delay is negative
+
+    }
+
+    return _this3;
+  }
+
+  var _proto3 = Tween.prototype;
+
+  _proto3.render = function render(totalTime, suppressEvents, force) {
+    var prevTime = this._time,
+        tDur = this._tDur,
+        dur = this._dur,
+        tTime = totalTime > tDur - _tinyNum && totalTime >= 0 ? tDur : totalTime < _tinyNum ? 0 : totalTime,
+        time,
+        pt,
+        iteration,
+        cycleDuration,
+        prevIteration,
+        isYoyo,
+        ratio,
+        timeline,
+        yoyoEase;
+
+    if (!dur) {
+      _renderZeroDurationTween(this, totalTime, suppressEvents, force);
+    } else if (tTime !== this._tTime || !totalTime || force || this._startAt && this._zTime < 0 !== totalTime < 0) {
+      //this senses if we're crossing over the start time, in which case we must record _zTime and force the render, but we do it in this lengthy conditional way for performance reasons (usually we can skip the calculations): this._initted && (this._zTime < 0) !== (totalTime < 0)
+      time = tTime;
+      timeline = this.timeline;
+
+      if (this._repeat) {
+        //adjust the time for repeats and yoyos
+        cycleDuration = dur + this._rDelay;
+        time = _round(tTime % cycleDuration); //round to avoid floating point errors. (4 % 0.8 should be 0 but some browsers report it as 0.79999999!)
+
+        if (time > dur || tDur === tTime) {
+          // the tDur === tTime is for edge cases where there's a lengthy decimal on the duration and it may reach the very end but the time is rendered as not-quite-there (remember, tDur is rounded to 4 decimals whereas dur isn't)
+          time = dur;
+        }
+
+        iteration = ~~(tTime / cycleDuration);
+
+        if (iteration && iteration === tTime / cycleDuration) {
+          time = dur;
+          iteration--;
+        }
+
+        isYoyo = this._yoyo && iteration & 1;
+
+        if (isYoyo) {
+          yoyoEase = this._yEase;
+          time = dur - time;
+        }
+
+        prevIteration = _animationCycle(this._tTime, cycleDuration);
+
+        if (time === prevTime && !force && this._initted) {
+          //could be during the repeatDelay part. No need to render and fire callbacks.
+          return this;
+        }
+
+        if (iteration !== prevIteration) {
+          //timeline && this._yEase && _propagateYoyoEase(timeline, isYoyo);
+          //repeatRefresh functionality
+          if (this.vars.repeatRefresh && !isYoyo && !this._lock) {
+            this._lock = force = 1; //force, otherwise if lazy is true, the _attemptInitTween() will return and we'll jump out and get caught bouncing on each tick.
+
+            this.render(cycleDuration * iteration, true).invalidate()._lock = 0;
+          }
+        }
+      }
+
+      if (!this._initted) {
+        if (_attemptInitTween(this, time, force, suppressEvents)) {
+          this._tTime = 0; // in constructor if immediateRender is true, we set _tTime to -_tinyNum to have the playhead cross the starting point but we can't leave _tTime as a negative number.
+
+          return this;
+        }
+
+        if (dur !== this._dur) {
+          // while initting, a plugin like InertiaPlugin might alter the duration, so rerun from the start to ensure everything renders as it should.
+          return this.render(totalTime, suppressEvents, force);
+        }
+      }
+
+      this._tTime = tTime;
+      this._time = time;
+
+      if (!this._act && this._ts) {
+        this._act = 1; //as long as it's not paused, force it to be active so that if the user renders independent of the parent timeline, it'll be forced to re-render on the next tick.
+
+        this._lazy = 0;
+      }
+
+      this.ratio = ratio = (yoyoEase || this._ease)(time / dur);
+
+      if (this._from) {
+        this.ratio = ratio = 1 - ratio;
+      }
+
+      if (!prevTime && time && !suppressEvents) {
+        _callback(this, "onStart");
+      }
+
+      pt = this._pt;
+
+      while (pt) {
+        pt.r(ratio, pt.d);
+        pt = pt._next;
+      }
+
+      timeline && timeline.render(totalTime < 0 ? totalTime : !time && isYoyo ? -_tinyNum : timeline._dur * ratio, suppressEvents, force) || this._startAt && (this._zTime = totalTime);
+
+      if (this._onUpdate && !suppressEvents) {
+        if (totalTime < 0 && this._startAt) {
+          this._startAt.render(totalTime, true, force); //note: for performance reasons, we tuck this conditional logic inside less traveled areas (most tweens don't have an onUpdate). We'd just have it at the end before the onComplete, but the values should be updated before any onUpdate is called, so we ALSO put it here and then if it's not called, we do so later near the onComplete.
+
+        }
+
+        _callback(this, "onUpdate");
+      }
+
+      if (this._repeat) if (iteration !== prevIteration && this.vars.onRepeat && !suppressEvents && this.parent) {
+        _callback(this, "onRepeat");
+      }
+
+      if ((tTime === this._tDur || !tTime) && this._tTime === tTime) {
+        if (totalTime < 0 && this._startAt && !this._onUpdate) {
+          this._startAt.render(totalTime, true, force);
+        }
+
+        (totalTime || !dur) && (totalTime && this._ts > 0 || !tTime && this._ts < 0) && _removeFromParent(this, 1); // don't remove if we're rendering at exactly a time of 0, as there could be autoRevert values that should get set on the next tick (if the playhead goes backward beyond the startTime, negative totalTime). Don't remove if the timeline is reversed and the playhead isn't at 0, otherwise tl.progress(1).reverse() won't work. Only remove if the playhead is at the end and timeScale is positive, or if the playhead is at 0 and the timeScale is negative.
+
+        if (!suppressEvents && !(totalTime < 0 && !prevTime) && !(tTime < tDur && this.timeScale() > 0)) {
+          _callback(this, tTime === tDur ? "onComplete" : "onReverseComplete", true);
+
+          this._prom && this._prom();
+        }
+      }
+    }
+
+    return this;
+  };
+
+  _proto3.targets = function targets() {
+    return this._targets;
+  };
+
+  _proto3.invalidate = function invalidate() {
+    this._pt = this._op = this._startAt = this._onUpdate = this._act = this._lazy = 0;
+    this._ptLookup = [];
+    this.timeline && this.timeline.invalidate();
+    return _Animation2.prototype.invalidate.call(this);
+  };
+
+  _proto3.kill = function kill(targets, vars) {
+    if (vars === void 0) {
+      vars = "all";
+    }
+
+    if (!targets && (!vars || vars === "all")) {
+      this._lazy = 0;
+
+      if (this.parent) {
+        return _interrupt(this);
+      }
+    }
+
+    if (this.timeline) {
+      this.timeline.killTweensOf(targets, vars, _overwritingTween && _overwritingTween.vars.overwrite !== true);
+      return this;
+    }
+
+    var parsedTargets = this._targets,
+        killingTargets = targets ? toArray(targets) : parsedTargets,
+        propTweenLookup = this._ptLookup,
+        firstPT = this._pt,
+        overwrittenProps,
+        curLookup,
+        curOverwriteProps,
+        props,
+        p,
+        pt,
+        i;
+
+    if ((!vars || vars === "all") && _arraysMatch(parsedTargets, killingTargets)) {
+      return _interrupt(this);
+    }
+
+    overwrittenProps = this._op = this._op || [];
+
+    if (vars !== "all") {
+      //so people can pass in a comma-delimited list of property names
+      if (_isString(vars)) {
+        p = {};
+
+        _forEachName(vars, function (name) {
+          return p[name] = 1;
+        });
+
+        vars = p;
+      }
+
+      vars = _addAliasesToVars(parsedTargets, vars);
+    }
+
+    i = parsedTargets.length;
+
+    while (i--) {
+      if (~killingTargets.indexOf(parsedTargets[i])) {
+        curLookup = propTweenLookup[i];
+
+        if (vars === "all") {
+          overwrittenProps[i] = vars;
+          props = curLookup;
+          curOverwriteProps = {};
+        } else {
+          curOverwriteProps = overwrittenProps[i] = overwrittenProps[i] || {};
+          props = vars;
+        }
+
+        for (p in props) {
+          pt = curLookup && curLookup[p];
+
+          if (pt) {
+            if (!("kill" in pt.d) || pt.d.kill(p) === true) {
+              _removeLinkedListItem(this, pt, "_pt");
+            }
+
+            delete curLookup[p];
+          }
+
+          if (curOverwriteProps !== "all") {
+            curOverwriteProps[p] = 1;
+          }
+        }
+      }
+    }
+
+    if (this._initted && !this._pt && firstPT) {
+      //if all tweening properties are killed, kill the tween. Without this line, if there's a tween with multiple targets and then you killTweensOf() each target individually, the tween would technically still remain active and fire its onComplete even though there aren't any more properties tweening.
+      _interrupt(this);
+    }
+
+    return this;
+  };
+
+  Tween.to = function to(targets, vars) {
+    return new Tween(targets, vars, arguments[2]);
+  };
+
+  Tween.from = function from(targets, vars) {
+    return new Tween(targets, _parseVars(arguments, 1));
+  };
+
+  Tween.delayedCall = function delayedCall(delay, callback, params, scope) {
+    return new Tween(callback, 0, {
+      immediateRender: false,
+      lazy: false,
+      overwrite: false,
+      delay: delay,
+      onComplete: callback,
+      onReverseComplete: callback,
+      onCompleteParams: params,
+      onReverseCompleteParams: params,
+      callbackScope: scope
+    });
+  };
+
+  Tween.fromTo = function fromTo(targets, fromVars, toVars) {
+    return new Tween(targets, _parseVars(arguments, 2));
+  };
+
+  Tween.set = function set(targets, vars) {
+    vars.duration = 0;
+    vars.repeatDelay || (vars.repeat = 0);
+    return new Tween(targets, vars);
+  };
+
+  Tween.killTweensOf = function killTweensOf(targets, props, onlyActive) {
+    return _globalTimeline.killTweensOf(targets, props, onlyActive);
+  };
+
+  return Tween;
+}(Animation);
+
+exports.TweenLite = exports.TweenMax = exports.Tween = Tween;
+
+_setDefaults(Tween.prototype, {
+  _targets: [],
+  _lazy: 0,
+  _startAt: 0,
+  _op: 0,
+  _onInit: 0
+}); //add the pertinent timeline methods to Tween instances so that users can chain conveniently and create a timeline automatically. (removed due to concerns that it'd ultimately add to more confusion especially for beginners)
+// _forEachName("to,from,fromTo,set,call,add,addLabel,addPause", name => {
+// 	Tween.prototype[name] = function() {
+// 		let tl = new Timeline();
+// 		return _addToTimeline(tl, this)[name].apply(tl, toArray(arguments));
+// 	}
+// });
+//for backward compatibility. Leverage the timeline calls.
+
+
+_forEachName("staggerTo,staggerFrom,staggerFromTo", function (name) {
+  Tween[name] = function () {
+    var tl = new Timeline(),
+        params = _slice.call(arguments, 0);
+
+    params.splice(name === "staggerFromTo" ? 5 : 4, 0, 0);
+    return tl[name].apply(tl, params);
+  };
+});
+/*
+ * --------------------------------------------------------------------------------------
+ * PROPTWEEN
+ * --------------------------------------------------------------------------------------
+ */
+
+
+var _setterPlain = function _setterPlain(target, property, value) {
+  return target[property] = value;
+},
+    _setterFunc = function _setterFunc(target, property, value) {
+  return target[property](value);
+},
+    _setterFuncWithParam = function _setterFuncWithParam(target, property, value, data) {
+  return target[property](data.fp, value);
+},
+    _setterAttribute = function _setterAttribute(target, property, value) {
+  return target.setAttribute(property, value);
+},
+    _getSetter = function _getSetter(target, property) {
+  return _isFunction(target[property]) ? _setterFunc : _isUndefined(target[property]) && target.setAttribute ? _setterAttribute : _setterPlain;
+},
+    _renderPlain = function _renderPlain(ratio, data) {
+  return data.set(data.t, data.p, Math.round((data.s + data.c * ratio) * 10000) / 10000, data);
+},
+    _renderBoolean = function _renderBoolean(ratio, data) {
+  return data.set(data.t, data.p, !!(data.s + data.c * ratio), data);
+},
+    _renderComplexString = function _renderComplexString(ratio, data) {
+  var pt = data._pt,
+      s = "";
+
+  if (!ratio && data.b) {
+    //b = beginning string
+    s = data.b;
+  } else if (ratio === 1 && data.e) {
+    //e = ending string
+    s = data.e;
+  } else {
+    while (pt) {
+      s = pt.p + (pt.m ? pt.m(pt.s + pt.c * ratio) : Math.round((pt.s + pt.c * ratio) * 10000) / 10000) + s; //we use the "p" property for the text inbetween (like a suffix). And in the context of a complex string, the modifier (m) is typically just Math.round(), like for RGB colors.
+
+      pt = pt._next;
+    }
+
+    s += data.c; //we use the "c" of the PropTween to store the final chunk of non-numeric text.
+  }
+
+  data.set(data.t, data.p, s, data);
+},
+    _renderPropTweens = function _renderPropTweens(ratio, data) {
+  var pt = data._pt;
+
+  while (pt) {
+    pt.r(ratio, pt.d);
+    pt = pt._next;
+  }
+},
+    _addPluginModifier = function _addPluginModifier(modifier, tween, target, property) {
+  var pt = this._pt,
+      next;
+
+  while (pt) {
+    next = pt._next;
+
+    if (pt.p === property) {
+      pt.modifier(modifier, tween, target);
+    }
+
+    pt = next;
+  }
+},
+    _killPropTweensOf = function _killPropTweensOf(property) {
+  var pt = this._pt,
+      hasNonDependentRemaining,
+      next;
+
+  while (pt) {
+    next = pt._next;
+
+    if (pt.p === property && !pt.op || pt.op === property) {
+      _removeLinkedListItem(this, pt, "_pt");
+    } else if (!pt.dep) {
+      hasNonDependentRemaining = 1;
+    }
+
+    pt = next;
+  }
+
+  return !hasNonDependentRemaining;
+},
+    _setterWithModifier = function _setterWithModifier(target, property, value, data) {
+  data.mSet(target, property, data.m.call(data.tween, value, data.mt), data);
+},
+    _sortPropTweensByPriority = function _sortPropTweensByPriority(parent) {
+  var pt = parent._pt,
+      next,
+      pt2,
+      first,
+      last; //sorts the PropTween linked list in order of priority because some plugins need to do their work after ALL of the PropTweens were created (like RoundPropsPlugin and ModifiersPlugin)
+
+  while (pt) {
+    next = pt._next;
+    pt2 = first;
+
+    while (pt2 && pt2.pr > pt.pr) {
+      pt2 = pt2._next;
+    }
+
+    if (pt._prev = pt2 ? pt2._prev : last) {
+      pt._prev._next = pt;
+    } else {
+      first = pt;
+    }
+
+    if (pt._next = pt2) {
+      pt2._prev = pt;
+    } else {
+      last = pt;
+    }
+
+    pt = next;
+  }
+
+  parent._pt = first;
+}; //PropTween key: t = target, p = prop, r = renderer, d = data, s = start, c = change, op = overwriteProperty (ONLY populated when it's different than p), pr = priority, _next/_prev for the linked list siblings, set = setter, m = modifier, mSet = modifierSetter (the original setter, before a modifier was added)
+
+
+exports._sortPropTweensByPriority = _sortPropTweensByPriority;
+exports._renderComplexString = _renderComplexString;
+exports._getSetter = _getSetter;
+
+var PropTween = /*#__PURE__*/function () {
+  function PropTween(next, target, prop, start, change, renderer, data, setter, priority) {
+    this.t = target;
+    this.s = start;
+    this.c = change;
+    this.p = prop;
+    this.r = renderer || _renderPlain;
+    this.d = data || this;
+    this.set = setter || _setterPlain;
+    this.pr = priority || 0;
+    this._next = next;
+
+    if (next) {
+      next._prev = this;
+    }
+  }
+
+  var _proto4 = PropTween.prototype;
+
+  _proto4.modifier = function modifier(func, tween, target) {
+    this.mSet = this.mSet || this.set; //in case it was already set (a PropTween can only have one modifier)
+
+    this.set = _setterWithModifier;
+    this.m = func;
+    this.mt = target; //modifier target
+
+    this.tween = tween;
+  };
+
+  return PropTween;
+}(); //Initialization tasks
+
+
+exports.PropTween = PropTween;
+
+_forEachName(_callbackNames + "parent,duration,ease,delay,overwrite,runBackwards,startAt,yoyo,immediateRender,repeat,repeatDelay,data,paused,reversed,lazy,callbackScope,stringFilter,id,yoyoEase,stagger,inherit,repeatRefresh,keyframes,autoRevert", function (name) {
+  return _reservedProps[name] = 1;
+});
+
+_globals.TweenMax = _globals.TweenLite = Tween;
+_globals.TimelineLite = _globals.TimelineMax = Timeline;
+_globalTimeline = new Timeline({
+  sortChildren: false,
+  defaults: _defaults,
+  autoRemoveChildren: true,
+  id: "root",
+  smoothChildTiming: true
+});
+_config.stringFilter = _colorStringFilter;
+/*
+ * --------------------------------------------------------------------------------------
+ * GSAP
+ * --------------------------------------------------------------------------------------
+ */
+
+var _gsap = {
+  registerPlugin: function registerPlugin() {
+    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
+    }
+
+    args.forEach(function (config) {
+      return _createPlugin(config);
+    });
+  },
+  timeline: function timeline(vars) {
+    return new Timeline(vars);
+  },
+  getTweensOf: function getTweensOf(targets, onlyActive) {
+    return _globalTimeline.getTweensOf(targets, onlyActive);
+  },
+  getProperty: function getProperty(target, property, unit, uncache) {
+    if (_isString(target)) {
+      //in case selector text or an array is passed in
+      target = toArray(target)[0];
+    }
+
+    var getter = _getCache(target || {}).get,
+        format = unit ? _passThrough : _numericIfPossible;
+
+    if (unit === "native") {
+      unit = "";
+    }
+
+    return !target ? target : !property ? function (property, unit, uncache) {
+      return format((_plugins[property] && _plugins[property].get || getter)(target, property, unit, uncache));
+    } : format((_plugins[property] && _plugins[property].get || getter)(target, property, unit, uncache));
+  },
+  quickSetter: function quickSetter(target, property, unit) {
+    target = toArray(target);
+
+    if (target.length > 1) {
+      var setters = target.map(function (t) {
+        return gsap.quickSetter(t, property, unit);
+      }),
+          l = setters.length;
+      return function (value) {
+        var i = l;
+
+        while (i--) {
+          setters[i](value);
+        }
+      };
+    }
+
+    target = target[0] || {};
+
+    var Plugin = _plugins[property],
+        cache = _getCache(target),
+        setter = Plugin ? function (value) {
+      var p = new Plugin();
+      _quickTween._pt = 0;
+      p.init(target, unit ? value + unit : value, _quickTween, 0, [target]);
+      p.render(1, p);
+      _quickTween._pt && _renderPropTweens(1, _quickTween);
+    } : cache.set(target, property);
+
+    return Plugin ? setter : function (value) {
+      return setter(target, property, unit ? value + unit : value, cache, 1);
+    };
+  },
+  isTweening: function isTweening(targets) {
+    return _globalTimeline.getTweensOf(targets, true).length > 0;
+  },
+  defaults: function defaults(value) {
+    if (value && value.ease) {
+      value.ease = _parseEase(value.ease, _defaults.ease);
+    }
+
+    return _mergeDeep(_defaults, value || {});
+  },
+  config: function config(value) {
+    return _mergeDeep(_config, value || {});
+  },
+  registerEffect: function registerEffect(_ref) {
+    var name = _ref.name,
+        effect = _ref.effect,
+        plugins = _ref.plugins,
+        defaults = _ref.defaults,
+        extendTimeline = _ref.extendTimeline;
+    (plugins || "").split(",").forEach(function (pluginName) {
+      return pluginName && !_plugins[pluginName] && !_globals[pluginName] && _warn(name + " effect requires " + pluginName + " plugin.");
+    });
+
+    _effects[name] = function (targets, vars, tl) {
+      return effect(toArray(targets), _setDefaults(vars || {}, defaults), tl);
+    };
+
+    if (extendTimeline) {
+      Timeline.prototype[name] = function (targets, vars, position) {
+        return this.add(_effects[name](targets, _isObject(vars) ? vars : (position = vars) && {}, this), position);
+      };
+    }
+  },
+  registerEase: function registerEase(name, ease) {
+    _easeMap[name] = _parseEase(ease);
+  },
+  parseEase: function parseEase(ease, defaultEase) {
+    return arguments.length ? _parseEase(ease, defaultEase) : _easeMap;
+  },
+  getById: function getById(id) {
+    return _globalTimeline.getById(id);
+  },
+  exportRoot: function exportRoot(vars, includeDelayedCalls) {
+    if (vars === void 0) {
+      vars = {};
+    }
+
+    var tl = new Timeline(vars),
+        child,
+        next;
+    tl.smoothChildTiming = _isNotFalse(vars.smoothChildTiming);
+
+    _globalTimeline.remove(tl);
+
+    tl._dp = 0; //otherwise it'll get re-activated when adding children and be re-introduced into _globalTimeline's linked list (then added to itself).
+
+    tl._time = tl._tTime = _globalTimeline._time;
+    child = _globalTimeline._first;
+
+    while (child) {
+      next = child._next;
+
+      if (includeDelayedCalls || !(!child._dur && child instanceof Tween && child.vars.onComplete === child._targets[0])) {
+        _addToTimeline(tl, child, child._start - child._delay);
+      }
+
+      child = next;
+    }
+
+    _addToTimeline(_globalTimeline, tl, 0);
+
+    return tl;
+  },
+  utils: {
+    wrap: wrap,
+    wrapYoyo: wrapYoyo,
+    distribute: distribute,
+    random: random,
+    snap: snap,
+    normalize: normalize,
+    getUnit: getUnit,
+    clamp: clamp,
+    splitColor: splitColor,
+    toArray: toArray,
+    mapRange: mapRange,
+    pipe: pipe,
+    unitize: unitize,
+    interpolate: interpolate,
+    shuffle: shuffle
+  },
+  install: _install,
+  effects: _effects,
+  ticker: _ticker,
+  updateRoot: Timeline.updateRoot,
+  plugins: _plugins,
+  globalTimeline: _globalTimeline,
+  core: {
+    PropTween: PropTween,
+    globals: _addGlobal,
+    Tween: Tween,
+    Timeline: Timeline,
+    Animation: Animation,
+    getCache: _getCache,
+    _removeLinkedListItem: _removeLinkedListItem
+  }
+};
+
+_forEachName("to,from,fromTo,delayedCall,set,killTweensOf", function (name) {
+  return _gsap[name] = Tween[name];
+});
+
+_ticker.add(Timeline.updateRoot);
+
+_quickTween = _gsap.to({}, {
+  duration: 0
+}); // ---- EXTRA PLUGINS --------------------------------------------------------
+
+var _getPluginPropTween = function _getPluginPropTween(plugin, prop) {
+  var pt = plugin._pt;
+
+  while (pt && pt.p !== prop && pt.op !== prop && pt.fp !== prop) {
+    pt = pt._next;
+  }
+
+  return pt;
+},
+    _addModifiers = function _addModifiers(tween, modifiers) {
+  var targets = tween._targets,
+      p,
+      i,
+      pt;
+
+  for (p in modifiers) {
+    i = targets.length;
+
+    while (i--) {
+      pt = tween._ptLookup[i][p];
+
+      if (pt && (pt = pt.d)) {
+        if (pt._pt) {
+          // is a plugin
+          pt = _getPluginPropTween(pt, p);
+        }
+
+        pt && pt.modifier && pt.modifier(modifiers[p], tween, targets[i], p);
+      }
+    }
+  }
+},
+    _buildModifierPlugin = function _buildModifierPlugin(name, modifier) {
+  return {
+    name: name,
+    rawVars: 1,
+    //don't pre-process function-based values or "random()" strings.
+    init: function init(target, vars, tween) {
+      tween._onInit = function (tween) {
+        var temp, p;
+
+        if (_isString(vars)) {
+          temp = {};
+
+          _forEachName(vars, function (name) {
+            return temp[name] = 1;
+          }); //if the user passes in a comma-delimited list of property names to roundProps, like "x,y", we round to whole numbers.
+
+
+          vars = temp;
+        }
+
+        if (modifier) {
+          temp = {};
+
+          for (p in vars) {
+            temp[p] = modifier(vars[p]);
+          }
+
+          vars = temp;
+        }
+
+        _addModifiers(tween, vars);
+      };
+    }
+  };
+}; //register core plugins
+
+
+var gsap = _gsap.registerPlugin({
+  name: "attr",
+  init: function init(target, vars, tween, index, targets) {
+    for (var p in vars) {
+      this.add(target, "setAttribute", (target.getAttribute(p) || 0) + "", vars[p], index, targets, 0, 0, p); //this.add(target, "setAttribute", (target.getAttribute((p in target.dataset ? (p = "data-" + p) : p)) || 0) + "", vars[p], index, targets, 0, 0, p);
+
+      this._props.push(p);
+    }
+  }
+}, {
+  name: "endArray",
+  init: function init(target, value) {
+    var i = value.length;
+
+    while (i--) {
+      this.add(target, i, target[i] || 0, value[i]);
+    }
+  }
+}, _buildModifierPlugin("roundProps", _roundModifier), _buildModifierPlugin("modifiers"), _buildModifierPlugin("snap", snap)) || _gsap; //to prevent the core plugins from being dropped via aggressive tree shaking, we must include them in the variable declaration in this way.
+
+
+exports.default = exports.gsap = gsap;
+Tween.version = Timeline.version = gsap.version = "3.2.6";
+_coreReady = 1;
+
+if (_windowExists()) {
+  _wake();
+}
+
+var Power0 = _easeMap.Power0,
+    Power1 = _easeMap.Power1,
+    Power2 = _easeMap.Power2,
+    Power3 = _easeMap.Power3,
+    Power4 = _easeMap.Power4,
+    Linear = _easeMap.Linear,
+    Quad = _easeMap.Quad,
+    Cubic = _easeMap.Cubic,
+    Quart = _easeMap.Quart,
+    Quint = _easeMap.Quint,
+    Strong = _easeMap.Strong,
+    Elastic = _easeMap.Elastic,
+    Back = _easeMap.Back,
+    SteppedEase = _easeMap.SteppedEase,
+    Bounce = _easeMap.Bounce,
+    Sine = _easeMap.Sine,
+    Expo = _easeMap.Expo,
+    Circ = _easeMap.Circ;
+exports.Circ = Circ;
+exports.Expo = Expo;
+exports.Sine = Sine;
+exports.Bounce = Bounce;
+exports.SteppedEase = SteppedEase;
+exports.Back = Back;
+exports.Elastic = Elastic;
+exports.Strong = Strong;
+exports.Quint = Quint;
+exports.Quart = Quart;
+exports.Cubic = Cubic;
+exports.Quad = Quad;
+exports.Linear = Linear;
+exports.Power4 = Power4;
+exports.Power3 = Power3;
+exports.Power2 = Power2;
+exports.Power1 = Power1;
+exports.Power0 = Power0;
+},{}],"bp4Z":[function(require,module,exports) {
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.checkPrefix = exports._createElement = exports._getBBox = exports.default = exports.CSSPlugin = void 0;
+
+var _gsapCore = require("./gsap-core.js");
+
+/*!
+ * CSSPlugin 3.2.6
+ * https://greensock.com
+ *
+ * Copyright 2008-2020, GreenSock. All rights reserved.
+ * Subject to the terms at https://greensock.com/standard-license or for
+ * Club GreenSock members, the agreement issued with that membership.
+ * @author: Jack Doyle, jack@greensock.com
+*/
+
+/* eslint-disable */
+var _win,
+    _doc,
+    _docElement,
+    _pluginInitted,
+    _tempDiv,
+    _tempDivStyler,
+    _recentSetterPlugin,
+    _windowExists = function _windowExists() {
+  return typeof window !== "undefined";
+},
+    _transformProps = {},
+    _RAD2DEG = 180 / Math.PI,
+    _DEG2RAD = Math.PI / 180,
+    _atan2 = Math.atan2,
+    _bigNum = 1e8,
+    _capsExp = /([A-Z])/g,
+    _horizontalExp = /(?:left|right|width|margin|padding|x)/i,
+    _complexExp = /[\s,\(]\S/,
+    _propertyAliases = {
+  autoAlpha: "opacity,visibility",
+  scale: "scaleX,scaleY",
+  alpha: "opacity"
+},
+    _renderCSSProp = function _renderCSSProp(ratio, data) {
+  return data.set(data.t, data.p, Math.round((data.s + data.c * ratio) * 10000) / 10000 + data.u, data);
+},
+    _renderPropWithEnd = function _renderPropWithEnd(ratio, data) {
+  return data.set(data.t, data.p, ratio === 1 ? data.e : Math.round((data.s + data.c * ratio) * 10000) / 10000 + data.u, data);
+},
+    _renderCSSPropWithBeginning = function _renderCSSPropWithBeginning(ratio, data) {
+  return data.set(data.t, data.p, ratio ? Math.round((data.s + data.c * ratio) * 10000) / 10000 + data.u : data.b, data);
+},
+    //if units change, we need a way to render the original unit/value when the tween goes all the way back to the beginning (ratio:0)
+_renderRoundedCSSProp = function _renderRoundedCSSProp(ratio, data) {
+  var value = data.s + data.c * ratio;
+  data.set(data.t, data.p, ~~(value + (value < 0 ? -.5 : .5)) + data.u, data);
+},
+    _renderNonTweeningValue = function _renderNonTweeningValue(ratio, data) {
+  return data.set(data.t, data.p, ratio ? data.e : data.b, data);
+},
+    _renderNonTweeningValueOnlyAtEnd = function _renderNonTweeningValueOnlyAtEnd(ratio, data) {
+  return data.set(data.t, data.p, ratio !== 1 ? data.b : data.e, data);
+},
+    _setterCSSStyle = function _setterCSSStyle(target, property, value) {
+  return target.style[property] = value;
+},
+    _setterCSSProp = function _setterCSSProp(target, property, value) {
+  return target.style.setProperty(property, value);
+},
+    _setterTransform = function _setterTransform(target, property, value) {
+  return target._gsap[property] = value;
+},
+    _setterScale = function _setterScale(target, property, value) {
+  return target._gsap.scaleX = target._gsap.scaleY = value;
+},
+    _setterScaleWithRender = function _setterScaleWithRender(target, property, value, data, ratio) {
+  var cache = target._gsap;
+  cache.scaleX = cache.scaleY = value;
+  cache.renderTransform(ratio, cache);
+},
+    _setterTransformWithRender = function _setterTransformWithRender(target, property, value, data, ratio) {
+  var cache = target._gsap;
+  cache[property] = value;
+  cache.renderTransform(ratio, cache);
+},
+    _transformProp = "transform",
+    _transformOriginProp = _transformProp + "Origin",
+    _supports3D,
+    _createElement = function _createElement(type, ns) {
+  var e = _doc.createElementNS ? _doc.createElementNS((ns || "http://www.w3.org/1999/xhtml").replace(/^https/, "http"), type) : _doc.createElement(type); //some servers swap in https for http in the namespace which can break things, making "style" inaccessible.
+
+  return e.style ? e : _doc.createElement(type); //some environments won't allow access to the element's style when created with a namespace in which case we default to the standard createElement() to work around the issue. Also note that when GSAP is embedded directly inside an SVG file, createElement() won't allow access to the style object in Firefox (see https://greensock.com/forums/topic/20215-problem-using-tweenmax-in-standalone-self-containing-svg-file-err-cannot-set-property-csstext-of-undefined/).
+},
+    _getComputedProperty = function _getComputedProperty(target, property, skipPrefixFallback) {
+  var cs = getComputedStyle(target);
+  return cs[property] || cs.getPropertyValue(property.replace(_capsExp, "-$1").toLowerCase()) || cs.getPropertyValue(property) || !skipPrefixFallback && _getComputedProperty(target, _checkPropPrefix(property) || property, 1) || ""; //css variables may not need caps swapped out for dashes and lowercase.
+},
+    _prefixes = "O,Moz,ms,Ms,Webkit".split(","),
+    _checkPropPrefix = function _checkPropPrefix(property, element, preferPrefix) {
+  var e = element || _tempDiv,
+      s = e.style,
+      i = 5;
+
+  if (property in s && !preferPrefix) {
+    return property;
+  }
+
+  property = property.charAt(0).toUpperCase() + property.substr(1);
+
+  while (i-- && !(_prefixes[i] + property in s)) {}
+
+  return i < 0 ? null : (i === 3 ? "ms" : i >= 0 ? _prefixes[i] : "") + property;
+},
+    _initCore = function _initCore() {
+  if (_windowExists()) {
+    _win = window;
+    _doc = _win.document;
+    _docElement = _doc.documentElement;
+    _tempDiv = _createElement("div") || {
+      style: {}
+    };
+    _tempDivStyler = _createElement("div");
+    _transformProp = _checkPropPrefix(_transformProp);
+    _transformOriginProp = _checkPropPrefix(_transformOriginProp);
+    _tempDiv.style.cssText = "border-width:0;line-height:0;position:absolute;padding:0"; //make sure to override certain properties that may contaminate measurements, in case the user has overreaching style sheets.
+
+    _supports3D = !!_checkPropPrefix("perspective");
+    _pluginInitted = 1;
+  }
+},
+    _getBBoxHack = function _getBBoxHack(swapIfPossible) {
+  //works around issues in some browsers (like Firefox) that don't correctly report getBBox() on SVG elements inside a <defs> element and/or <mask>. We try creating an SVG, adding it to the documentElement and toss the element in there so that it's definitely part of the rendering tree, then grab the bbox and if it works, we actually swap out the original getBBox() method for our own that does these extra steps whenever getBBox is needed. This helps ensure that performance is optimal (only do all these extra steps when absolutely necessary...most elements don't need it).
+  var svg = _createElement("svg", this.ownerSVGElement && this.ownerSVGElement.getAttribute("xmlns") || "http://www.w3.org/2000/svg"),
+      oldParent = this.parentNode,
+      oldSibling = this.nextSibling,
+      oldCSS = this.style.cssText,
+      bbox;
+
+  _docElement.appendChild(svg);
+
+  svg.appendChild(this);
+  this.style.display = "block";
+
+  if (swapIfPossible) {
+    try {
+      bbox = this.getBBox();
+      this._gsapBBox = this.getBBox; //store the original
+
+      this.getBBox = _getBBoxHack;
+    } catch (e) {}
+  } else if (this._gsapBBox) {
+    bbox = this._gsapBBox();
+  }
+
+  if (oldParent) {
+    if (oldSibling) {
+      oldParent.insertBefore(this, oldSibling);
+    } else {
+      oldParent.appendChild(this);
+    }
+  }
+
+  _docElement.removeChild(svg);
+
+  this.style.cssText = oldCSS;
+  return bbox;
+},
+    _getAttributeFallbacks = function _getAttributeFallbacks(target, attributesArray) {
+  var i = attributesArray.length;
+
+  while (i--) {
+    if (target.hasAttribute(attributesArray[i])) {
+      return target.getAttribute(attributesArray[i]);
+    }
+  }
+},
+    _getBBox = function _getBBox(target) {
+  var bounds;
+
+  try {
+    bounds = target.getBBox(); //Firefox throws errors if you try calling getBBox() on an SVG element that's not rendered (like in a <symbol> or <defs>). https://bugzilla.mozilla.org/show_bug.cgi?id=612118
+  } catch (error) {
+    bounds = _getBBoxHack.call(target, true);
+  }
+
+  bounds && (bounds.width || bounds.height) || target.getBBox === _getBBoxHack || (bounds = _getBBoxHack.call(target, true)); //some browsers (like Firefox) misreport the bounds if the element has zero width and height (it just assumes it's at x:0, y:0), thus we need to manually grab the position in that case.
+
+  return bounds && !bounds.width && !bounds.x && !bounds.y ? {
+    x: +_getAttributeFallbacks(target, ["x", "cx", "x1"]) || 0,
+    y: +_getAttributeFallbacks(target, ["y", "cy", "y1"]) || 0,
+    width: 0,
+    height: 0
+  } : bounds;
+},
+    _isSVG = function _isSVG(e) {
+  return !!(e.getCTM && (!e.parentNode || e.ownerSVGElement) && _getBBox(e));
+},
+    //reports if the element is an SVG on which getBBox() actually works
+_removeProperty = function _removeProperty(target, property) {
+  if (property) {
+    var style = target.style;
+
+    if (property in _transformProps) {
+      property = _transformProp;
+    }
+
+    if (style.removeProperty) {
+      if (property.substr(0, 2) === "ms" || property.substr(0, 6) === "webkit") {
+        //Microsoft and some Webkit browsers don't conform to the standard of capitalizing the first prefix character, so we adjust so that when we prefix the caps with a dash, it's correct (otherwise it'd be "ms-transform" instead of "-ms-transform" for IE9, for example)
+        property = "-" + property;
+      }
+
+      style.removeProperty(property.replace(_capsExp, "-$1").toLowerCase());
+    } else {
+      //note: old versions of IE use "removeAttribute()" instead of "removeProperty()"
+      style.removeAttribute(property);
+    }
+  }
+},
+    _addNonTweeningPT = function _addNonTweeningPT(plugin, target, property, beginning, end, onlySetAtEnd) {
+  var pt = new _gsapCore.PropTween(plugin._pt, target, property, 0, 1, onlySetAtEnd ? _renderNonTweeningValueOnlyAtEnd : _renderNonTweeningValue);
+  plugin._pt = pt;
+  pt.b = beginning;
+  pt.e = end;
+
+  plugin._props.push(property);
+
+  return pt;
+},
+    _nonConvertibleUnits = {
+  deg: 1,
+  rad: 1,
+  turn: 1
+},
+    //takes a single value like 20px and converts it to the unit specified, like "%", returning only the numeric amount.
+_convertToUnit = function _convertToUnit(target, property, value, unit) {
+  var curValue = parseFloat(value) || 0,
+      curUnit = (value + "").trim().substr((curValue + "").length) || "px",
+      // some browsers leave extra whitespace at the beginning of CSS variables, hence the need to trim()
+  style = _tempDiv.style,
+      horizontal = _horizontalExp.test(property),
+      isRootSVG = target.tagName.toLowerCase() === "svg",
+      measureProperty = (isRootSVG ? "client" : "offset") + (horizontal ? "Width" : "Height"),
+      amount = 100,
+      toPixels = unit === "px",
+      toPercent = unit === "%",
+      px,
+      parent,
+      cache,
+      isSVG;
+
+  if (unit === curUnit || !curValue || _nonConvertibleUnits[unit] || _nonConvertibleUnits[curUnit]) {
+    return curValue;
+  }
+
+  curUnit !== "px" && !toPixels && (curValue = _convertToUnit(target, property, value, "px"));
+  isSVG = target.getCTM && _isSVG(target);
+
+  if (toPercent && (_transformProps[property] || ~property.indexOf("adius"))) {
+    //transforms and borderRadius are relative to the size of the element itself!
+    return (0, _gsapCore._round)(curValue / (isSVG ? target.getBBox()[horizontal ? "width" : "height"] : target[measureProperty]) * amount);
+  }
+
+  style[horizontal ? "width" : "height"] = amount + (toPixels ? curUnit : unit);
+  parent = ~property.indexOf("adius") || unit === "em" && target.appendChild && !isRootSVG ? target : target.parentNode;
+
+  if (isSVG) {
+    parent = (target.ownerSVGElement || {}).parentNode;
+  }
+
+  if (!parent || parent === _doc || !parent.appendChild) {
+    parent = _doc.body;
+  }
+
+  cache = parent._gsap;
+
+  if (cache && toPercent && cache.width && horizontal && cache.time === _gsapCore._ticker.time) {
+    return (0, _gsapCore._round)(curValue / cache.width * amount);
+  } else {
+    (toPercent || curUnit === "%") && (style.position = _getComputedProperty(target, "position"));
+    parent === target && (style.position = "static"); // like for borderRadius, if it's a % we must have it relative to the target itself but that may not have position: relative or position: absolute in which case it'd go up the chain until it finds its offsetParent (bad). position: static protects against that.
+
+    parent.appendChild(_tempDiv);
+    px = _tempDiv[measureProperty];
+    parent.removeChild(_tempDiv);
+    style.position = "absolute";
+
+    if (horizontal && toPercent) {
+      cache = (0, _gsapCore._getCache)(parent);
+      cache.time = _gsapCore._ticker.time;
+      cache.width = parent[measureProperty];
+    }
+  }
+
+  return (0, _gsapCore._round)(toPixels ? px * curValue / amount : px && curValue ? amount / px * curValue : 0);
+},
+    _get = function _get(target, property, unit, uncache) {
+  var value;
+
+  if (!_pluginInitted) {
+    _initCore();
+  }
+
+  if (property in _propertyAliases && property !== "transform") {
+    property = _propertyAliases[property];
+
+    if (~property.indexOf(",")) {
+      property = property.split(",")[0];
+    }
+  }
+
+  if (_transformProps[property] && property !== "transform") {
+    value = _parseTransform(target, uncache);
+    value = property !== "transformOrigin" ? value[property] : _firstTwoOnly(_getComputedProperty(target, _transformOriginProp)) + " " + value.zOrigin + "px";
+  } else {
+    value = target.style[property];
+
+    if (!value || value === "auto" || uncache || ~(value + "").indexOf("calc(")) {
+      value = _specialProps[property] && _specialProps[property](target, property, unit) || _getComputedProperty(target, property) || (0, _gsapCore._getProperty)(target, property) || (property === "opacity" ? 1 : 0); // note: some browsers, like Firefox, don't report borderRadius correctly! Instead, it only reports every corner like  borderTopLeftRadius
+    }
+  }
+
+  return unit && !~(value + "").indexOf(" ") ? _convertToUnit(target, property, value, unit) + unit : value;
+},
+    _tweenComplexCSSString = function _tweenComplexCSSString(target, prop, start, end) {
+  //note: we call _tweenComplexCSSString.call(pluginInstance...) to ensure that it's scoped properly. We may call it from within a plugin too, thus "this" would refer to the plugin.
+  if (!start || start === "none") {
+    // some browsers like Safari actually PREFER the prefixed property and mis-report the unprefixed value like clipPath (BUG). In other words, even though clipPath exists in the style ("clipPath" in target.style) and it's set in the CSS properly (along with -webkit-clip-path), Safari reports clipPath as "none" whereas WebkitClipPath reports accurately like "ellipse(100% 0% at 50% 0%)", so in this case we must SWITCH to using the prefixed property instead. See https://greensock.com/forums/topic/18310-clippath-doesnt-work-on-ios/
+    var p = _checkPropPrefix(prop, target, 1),
+        s = p && _getComputedProperty(target, p, 1);
+
+    if (s && s !== start) {
+      prop = p;
+      start = s;
+    }
+  }
+
+  var pt = new _gsapCore.PropTween(this._pt, target.style, prop, 0, 1, _gsapCore._renderComplexString),
+      index = 0,
+      matchIndex = 0,
+      a,
+      result,
+      startValues,
+      startNum,
+      color,
+      startValue,
+      endValue,
+      endNum,
+      chunk,
+      endUnit,
+      startUnit,
+      relative,
+      endValues;
+  pt.b = start;
+  pt.e = end;
+  start += ""; //ensure values are strings
+
+  end += "";
+
+  if (end === "auto") {
+    target.style[prop] = end;
+    end = _getComputedProperty(target, prop) || end;
+    target.style[prop] = start;
+  }
+
+  a = [start, end];
+  (0, _gsapCore._colorStringFilter)(a); //pass an array with the starting and ending values and let the filter do whatever it needs to the values. If colors are found, it returns true and then we must match where the color shows up order-wise because for things like boxShadow, sometimes the browser provides the computed values with the color FIRST, but the user provides it with the color LAST, so flip them if necessary. Same for drop-shadow().
+
+  start = a[0];
+  end = a[1];
+  startValues = start.match(_gsapCore._numWithUnitExp) || [];
+  endValues = end.match(_gsapCore._numWithUnitExp) || [];
+
+  if (endValues.length) {
+    while (result = _gsapCore._numWithUnitExp.exec(end)) {
+      endValue = result[0];
+      chunk = end.substring(index, result.index);
+
+      if (color) {
+        color = (color + 1) % 5;
+      } else if (chunk.substr(-5) === "rgba(" || chunk.substr(-5) === "hsla(") {
+        color = 1;
+      }
+
+      if (endValue !== (startValue = startValues[matchIndex++] || "")) {
+        startNum = parseFloat(startValue) || 0;
+        startUnit = startValue.substr((startNum + "").length);
+        relative = endValue.charAt(1) === "=" ? +(endValue.charAt(0) + "1") : 0;
+
+        if (relative) {
+          endValue = endValue.substr(2);
+        }
+
+        endNum = parseFloat(endValue);
+        endUnit = endValue.substr((endNum + "").length);
+        index = _gsapCore._numWithUnitExp.lastIndex - endUnit.length;
+
+        if (!endUnit) {
+          //if something like "perspective:300" is passed in and we must add a unit to the end
+          endUnit = endUnit || _gsapCore._config.units[prop] || startUnit;
+
+          if (index === end.length) {
+            end += endUnit;
+            pt.e += endUnit;
+          }
+        }
+
+        if (startUnit !== endUnit) {
+          startNum = _convertToUnit(target, prop, startValue, endUnit) || 0;
+        } //these nested PropTweens are handled in a special way - we'll never actually call a render or setter method on them. We'll just loop through them in the parent complex string PropTween's render method.
+
+
+        pt._pt = {
+          _next: pt._pt,
+          p: chunk || matchIndex === 1 ? chunk : ",",
+          //note: SVG spec allows omission of comma/space when a negative sign is wedged between two numbers, like 2.5-5.3 instead of 2.5,-5.3 but when tweening, the negative value may switch to positive, so we insert the comma just in case.
+          s: startNum,
+          c: relative ? relative * endNum : endNum - startNum,
+          m: color && color < 4 ? Math.round : 0
+        };
+      }
+    }
+
+    pt.c = index < end.length ? end.substring(index, end.length) : ""; //we use the "c" of the PropTween to store the final part of the string (after the last number)
+  } else {
+    pt.r = prop === "display" && end === "none" ? _renderNonTweeningValueOnlyAtEnd : _renderNonTweeningValue;
+  }
+
+  if (_gsapCore._relExp.test(end)) {
+    pt.e = 0; //if the end string contains relative values or dynamic random(...) values, delete the end it so that on the final render we don't actually set it to the string with += or -= characters (forces it to use the calculated value).
+  }
+
+  this._pt = pt; //start the linked list with this new PropTween. Remember, we call _tweenComplexCSSString.call(pluginInstance...) to ensure that it's scoped properly. We may call it from within another plugin too, thus "this" would refer to the plugin.
+
+  return pt;
+},
+    _keywordToPercent = {
+  top: "0%",
+  bottom: "100%",
+  left: "0%",
+  right: "100%",
+  center: "50%"
+},
+    _convertKeywordsToPercentages = function _convertKeywordsToPercentages(value) {
+  var split = value.split(" "),
+      x = split[0],
+      y = split[1] || "50%";
+
+  if (x === "top" || x === "bottom" || y === "left" || y === "right") {
+    //the user provided them in the wrong order, so flip them
+    value = x;
+    x = y;
+    y = value;
+  }
+
+  split[0] = _keywordToPercent[x] || x;
+  split[1] = _keywordToPercent[y] || y;
+  return split.join(" ");
+},
+    _renderClearProps = function _renderClearProps(ratio, data) {
+  if (data.tween && data.tween._time === data.tween._dur) {
+    var target = data.t,
+        style = target.style,
+        props = data.u,
+        cache = target._gsap,
+        prop,
+        clearTransforms,
+        i;
+
+    if (props === "all" || props === true) {
+      style.cssText = "";
+      clearTransforms = 1;
+    } else {
+      props = props.split(",");
+      i = props.length;
+
+      while (--i > -1) {
+        prop = props[i];
+
+        if (_transformProps[prop]) {
+          clearTransforms = 1;
+          prop = prop === "transformOrigin" ? _transformOriginProp : _transformProp;
+        }
+
+        _removeProperty(target, prop);
+      }
+    }
+
+    if (clearTransforms) {
+      _removeProperty(target, _transformProp);
+
+      if (cache) {
+        cache.svg && target.removeAttribute("transform");
+
+        _parseTransform(target, 1); // force all the cached values back to "normal"/identity, otherwise if there's another tween that's already set to render transforms on this element, it could display the wrong values.
+
+
+        cache.uncache = 1;
+      }
+    }
+  }
+},
+    // note: specialProps should return 1 if (and only if) they have a non-zero priority. It indicates we need to sort the linked list.
+_specialProps = {
+  clearProps: function clearProps(plugin, target, property, endValue, tween) {
+    if (tween.data !== "isFromStart") {
+      var pt = plugin._pt = new _gsapCore.PropTween(plugin._pt, target, property, 0, 0, _renderClearProps);
+      pt.u = endValue;
+      pt.pr = -10;
+      pt.tween = tween;
+
+      plugin._props.push(property);
+
+      return 1;
+    }
+  }
+  /* className feature (about 0.4kb gzipped).
+  , className(plugin, target, property, endValue, tween) {
+  	let _renderClassName = (ratio, data) => {
+  			data.css.render(ratio, data.css);
+  			if (!ratio || ratio === 1) {
+  				let inline = data.rmv,
+  					target = data.t,
+  					p;
+  				target.setAttribute("class", ratio ? data.e : data.b);
+  				for (p in inline) {
+  					_removeProperty(target, p);
+  				}
+  			}
+  		},
+  		_getAllStyles = (target) => {
+  			let styles = {},
+  				computed = getComputedStyle(target),
+  				p;
+  			for (p in computed) {
+  				if (isNaN(p) && p !== "cssText" && p !== "length") {
+  					styles[p] = computed[p];
+  				}
+  			}
+  			_setDefaults(styles, _parseTransform(target, 1));
+  			return styles;
+  		},
+  		startClassList = target.getAttribute("class"),
+  		style = target.style,
+  		cssText = style.cssText,
+  		cache = target._gsap,
+  		classPT = cache.classPT,
+  		inlineToRemoveAtEnd = {},
+  		data = {t:target, plugin:plugin, rmv:inlineToRemoveAtEnd, b:startClassList, e:(endValue.charAt(1) !== "=") ? endValue : startClassList.replace(new RegExp("(?:\\s|^)" + endValue.substr(2) + "(?![\\w-])"), "") + ((endValue.charAt(0) === "+") ? " " + endValue.substr(2) : "")},
+  		changingVars = {},
+  		startVars = _getAllStyles(target),
+  		transformRelated = /(transform|perspective)/i,
+  		endVars, p;
+  	if (classPT) {
+  		classPT.r(1, classPT.d);
+  		_removeLinkedListItem(classPT.d.plugin, classPT, "_pt");
+  	}
+  	target.setAttribute("class", data.e);
+  	endVars = _getAllStyles(target, true);
+  	target.setAttribute("class", startClassList);
+  	for (p in endVars) {
+  		if (endVars[p] !== startVars[p] && !transformRelated.test(p)) {
+  			changingVars[p] = endVars[p];
+  			if (!style[p] && style[p] !== "0") {
+  				inlineToRemoveAtEnd[p] = 1;
+  			}
+  		}
+  	}
+  	cache.classPT = plugin._pt = new PropTween(plugin._pt, target, "className", 0, 0, _renderClassName, data, 0, -11);
+  	if (style.cssText !== cssText) { //only apply if things change. Otherwise, in cases like a background-image that's pulled dynamically, it could cause a refresh. See https://greensock.com/forums/topic/20368-possible-gsap-bug-switching-classnames-in-chrome/.
+  		style.cssText = cssText; //we recorded cssText before we swapped classes and ran _getAllStyles() because in cases when a className tween is overwritten, we remove all the related tweening properties from that class change (otherwise class-specific stuff can't override properties we've directly set on the target's style object due to specificity).
+  	}
+  	_parseTransform(target, true); //to clear the caching of transforms
+  	data.css = new gsap.plugins.css();
+  	data.css.init(target, changingVars, tween);
+  	plugin._props.push(...data.css._props);
+  	return 1;
+  }
+  */
+
+},
+
+/*
+ * --------------------------------------------------------------------------------------
+ * TRANSFORMS
+ * --------------------------------------------------------------------------------------
+ */
+_identity2DMatrix = [1, 0, 0, 1, 0, 0],
+    _rotationalProperties = {},
+    _isNullTransform = function _isNullTransform(value) {
+  return value === "matrix(1, 0, 0, 1, 0, 0)" || value === "none" || !value;
+},
+    _getComputedTransformMatrixAsArray = function _getComputedTransformMatrixAsArray(target) {
+  var matrixString = _getComputedProperty(target, _transformProp);
+
+  return _isNullTransform(matrixString) ? _identity2DMatrix : matrixString.substr(7).match(_gsapCore._numExp).map(_gsapCore._round);
+},
+    _getMatrix = function _getMatrix(target, force2D) {
+  var cache = target._gsap || (0, _gsapCore._getCache)(target),
+      style = target.style,
+      matrix = _getComputedTransformMatrixAsArray(target),
+      parent,
+      nextSibling,
+      temp,
+      addedToDOM;
+
+  if (cache.svg && target.getAttribute("transform")) {
+    temp = target.transform.baseVal.consolidate().matrix; //ensures that even complex values like "translate(50,60) rotate(135,0,0)" are parsed because it mashes it into a matrix.
+
+    matrix = [temp.a, temp.b, temp.c, temp.d, temp.e, temp.f];
+    return matrix.join(",") === "1,0,0,1,0,0" ? _identity2DMatrix : matrix;
+  } else if (matrix === _identity2DMatrix && !target.offsetParent && target !== _docElement && !cache.svg) {
+    //note: if offsetParent is null, that means the element isn't in the normal document flow, like if it has display:none or one of its ancestors has display:none). Firefox returns null for getComputedStyle() if the element is in an iframe that has display:none. https://bugzilla.mozilla.org/show_bug.cgi?id=548397
+    //browsers don't report transforms accurately unless the element is in the DOM and has a display value that's not "none". Firefox and Microsoft browsers have a partial bug where they'll report transforms even if display:none BUT not any percentage-based values like translate(-50%, 8px) will be reported as if it's translate(0, 8px).
+    temp = style.display;
+    style.display = "block";
+    parent = target.parentNode;
+
+    if (!parent || !target.offsetParent) {
+      addedToDOM = 1; //flag
+
+      nextSibling = target.nextSibling;
+
+      _docElement.appendChild(target); //we must add it to the DOM in order to get values properly
+
+    }
+
+    matrix = _getComputedTransformMatrixAsArray(target);
+
+    if (temp) {
+      style.display = temp;
+    } else {
+      _removeProperty(target, "display");
+    }
+
+    if (addedToDOM) {
+      if (nextSibling) {
+        parent.insertBefore(target, nextSibling);
+      } else if (parent) {
+        parent.appendChild(target);
+      } else {
+        _docElement.removeChild(target);
+      }
+    }
+  }
+
+  return force2D && matrix.length > 6 ? [matrix[0], matrix[1], matrix[4], matrix[5], matrix[12], matrix[13]] : matrix;
+},
+    _applySVGOrigin = function _applySVGOrigin(target, origin, originIsAbsolute, smooth, matrixArray, pluginToAddPropTweensTo) {
+  var cache = target._gsap,
+      matrix = matrixArray || _getMatrix(target, true),
+      xOriginOld = cache.xOrigin || 0,
+      yOriginOld = cache.yOrigin || 0,
+      xOffsetOld = cache.xOffset || 0,
+      yOffsetOld = cache.yOffset || 0,
+      a = matrix[0],
+      b = matrix[1],
+      c = matrix[2],
+      d = matrix[3],
+      tx = matrix[4],
+      ty = matrix[5],
+      originSplit = origin.split(" "),
+      xOrigin = parseFloat(originSplit[0]) || 0,
+      yOrigin = parseFloat(originSplit[1]) || 0,
+      bounds,
+      determinant,
+      x,
+      y;
+
+  if (!originIsAbsolute) {
+    bounds = _getBBox(target);
+    xOrigin = bounds.x + (~originSplit[0].indexOf("%") ? xOrigin / 100 * bounds.width : xOrigin);
+    yOrigin = bounds.y + (~(originSplit[1] || originSplit[0]).indexOf("%") ? yOrigin / 100 * bounds.height : yOrigin);
+  } else if (matrix !== _identity2DMatrix && (determinant = a * d - b * c)) {
+    //if it's zero (like if scaleX and scaleY are zero), skip it to avoid errors with dividing by zero.
+    x = xOrigin * (d / determinant) + yOrigin * (-c / determinant) + (c * ty - d * tx) / determinant;
+    y = xOrigin * (-b / determinant) + yOrigin * (a / determinant) - (a * ty - b * tx) / determinant;
+    xOrigin = x;
+    yOrigin = y;
+  }
+
+  if (smooth || smooth !== false && cache.smooth) {
+    tx = xOrigin - xOriginOld;
+    ty = yOrigin - yOriginOld;
+    cache.xOffset = xOffsetOld + (tx * a + ty * c) - tx;
+    cache.yOffset = yOffsetOld + (tx * b + ty * d) - ty;
+  } else {
+    cache.xOffset = cache.yOffset = 0;
+  }
+
+  cache.xOrigin = xOrigin;
+  cache.yOrigin = yOrigin;
+  cache.smooth = !!smooth;
+  cache.origin = origin;
+  cache.originIsAbsolute = !!originIsAbsolute;
+  target.style[_transformOriginProp] = "0px 0px"; //otherwise, if someone sets  an origin via CSS, it will likely interfere with the SVG transform attribute ones (because remember, we're baking the origin into the matrix() value).
+
+  if (pluginToAddPropTweensTo) {
+    _addNonTweeningPT(pluginToAddPropTweensTo, cache, "xOrigin", xOriginOld, xOrigin);
+
+    _addNonTweeningPT(pluginToAddPropTweensTo, cache, "yOrigin", yOriginOld, yOrigin);
+
+    _addNonTweeningPT(pluginToAddPropTweensTo, cache, "xOffset", xOffsetOld, cache.xOffset);
+
+    _addNonTweeningPT(pluginToAddPropTweensTo, cache, "yOffset", yOffsetOld, cache.yOffset);
+  }
+
+  target.setAttribute("data-svg-origin", xOrigin + " " + yOrigin);
+},
+    _parseTransform = function _parseTransform(target, uncache) {
+  var cache = target._gsap || new _gsapCore.GSCache(target);
+
+  if ("x" in cache && !uncache && !cache.uncache) {
+    return cache;
+  }
+
+  var style = target.style,
+      invertedScaleX = cache.scaleX < 0,
+      px = "px",
+      deg = "deg",
+      origin = _getComputedProperty(target, _transformOriginProp) || "0",
+      x,
+      y,
+      z,
+      scaleX,
+      scaleY,
+      rotation,
+      rotationX,
+      rotationY,
+      skewX,
+      skewY,
+      perspective,
+      xOrigin,
+      yOrigin,
+      matrix,
+      angle,
+      cos,
+      sin,
+      a,
+      b,
+      c,
+      d,
+      a12,
+      a22,
+      t1,
+      t2,
+      t3,
+      a13,
+      a23,
+      a33,
+      a42,
+      a43,
+      a32;
+  x = y = z = rotation = rotationX = rotationY = skewX = skewY = perspective = 0;
+  scaleX = scaleY = 1;
+  cache.svg = !!(target.getCTM && _isSVG(target));
+  matrix = _getMatrix(target, cache.svg);
+
+  if (cache.svg) {
+    t1 = !cache.uncache && target.getAttribute("data-svg-origin");
+
+    _applySVGOrigin(target, t1 || origin, !!t1 || cache.originIsAbsolute, cache.smooth !== false, matrix);
+  }
+
+  xOrigin = cache.xOrigin || 0;
+  yOrigin = cache.yOrigin || 0;
+
+  if (matrix !== _identity2DMatrix) {
+    a = matrix[0]; //a11
+
+    b = matrix[1]; //a21
+
+    c = matrix[2]; //a31
+
+    d = matrix[3]; //a41
+
+    x = a12 = matrix[4];
+    y = a22 = matrix[5]; //2D matrix
+
+    if (matrix.length === 6) {
+      scaleX = Math.sqrt(a * a + b * b);
+      scaleY = Math.sqrt(d * d + c * c);
+      rotation = a || b ? _atan2(b, a) * _RAD2DEG : 0; //note: if scaleX is 0, we cannot accurately measure rotation. Same for skewX with a scaleY of 0. Therefore, we default to the previously recorded value (or zero if that doesn't exist).
+
+      skewX = c || d ? _atan2(c, d) * _RAD2DEG + rotation : 0;
+      skewX && (scaleY *= Math.cos(skewX * _DEG2RAD));
+
+      if (cache.svg) {
+        x -= xOrigin - (xOrigin * a + yOrigin * c);
+        y -= yOrigin - (xOrigin * b + yOrigin * d);
+      } //3D matrix
+
+    } else {
+      a32 = matrix[6];
+      a42 = matrix[7];
+      a13 = matrix[8];
+      a23 = matrix[9];
+      a33 = matrix[10];
+      a43 = matrix[11];
+      x = matrix[12];
+      y = matrix[13];
+      z = matrix[14];
+      angle = _atan2(a32, a33);
+      rotationX = angle * _RAD2DEG; //rotationX
+
+      if (angle) {
+        cos = Math.cos(-angle);
+        sin = Math.sin(-angle);
+        t1 = a12 * cos + a13 * sin;
+        t2 = a22 * cos + a23 * sin;
+        t3 = a32 * cos + a33 * sin;
+        a13 = a12 * -sin + a13 * cos;
+        a23 = a22 * -sin + a23 * cos;
+        a33 = a32 * -sin + a33 * cos;
+        a43 = a42 * -sin + a43 * cos;
+        a12 = t1;
+        a22 = t2;
+        a32 = t3;
+      } //rotationY
+
+
+      angle = _atan2(-c, a33);
+      rotationY = angle * _RAD2DEG;
+
+      if (angle) {
+        cos = Math.cos(-angle);
+        sin = Math.sin(-angle);
+        t1 = a * cos - a13 * sin;
+        t2 = b * cos - a23 * sin;
+        t3 = c * cos - a33 * sin;
+        a43 = d * sin + a43 * cos;
+        a = t1;
+        b = t2;
+        c = t3;
+      } //rotationZ
+
+
+      angle = _atan2(b, a);
+      rotation = angle * _RAD2DEG;
+
+      if (angle) {
+        cos = Math.cos(angle);
+        sin = Math.sin(angle);
+        t1 = a * cos + b * sin;
+        t2 = a12 * cos + a22 * sin;
+        b = b * cos - a * sin;
+        a22 = a22 * cos - a12 * sin;
+        a = t1;
+        a12 = t2;
+      }
+
+      if (rotationX && Math.abs(rotationX) + Math.abs(rotation) > 359.9) {
+        //when rotationY is set, it will often be parsed as 180 degrees different than it should be, and rotationX and rotation both being 180 (it looks the same), so we adjust for that here.
+        rotationX = rotation = 0;
+        rotationY = 180 - rotationY;
+      }
+
+      scaleX = (0, _gsapCore._round)(Math.sqrt(a * a + b * b + c * c));
+      scaleY = (0, _gsapCore._round)(Math.sqrt(a22 * a22 + a32 * a32));
+      angle = _atan2(a12, a22);
+      skewX = Math.abs(angle) > 0.0002 ? angle * _RAD2DEG : 0;
+      perspective = a43 ? 1 / (a43 < 0 ? -a43 : a43) : 0;
+    }
+
+    if (cache.svg) {
+      //sense if there are CSS transforms applied on an SVG element in which case we must overwrite them when rendering. The transform attribute is more reliable cross-browser, but we can't just remove the CSS ones because they may be applied in a CSS rule somewhere (not just inline).
+      matrix = target.getAttribute("transform");
+      cache.forceCSS = target.setAttribute("transform", "") || !_isNullTransform(_getComputedProperty(target, _transformProp));
+      matrix && target.setAttribute("transform", matrix);
+    }
+  }
+
+  if (Math.abs(skewX) > 90 && Math.abs(skewX) < 270) {
+    if (invertedScaleX) {
+      scaleX *= -1;
+      skewX += rotation <= 0 ? 180 : -180;
+      rotation += rotation <= 0 ? 180 : -180;
+    } else {
+      scaleY *= -1;
+      skewX += skewX <= 0 ? 180 : -180;
+    }
+  }
+
+  cache.x = ((cache.xPercent = x && Math.round(target.offsetWidth / 2) === Math.round(-x) ? -50 : 0) ? 0 : x) + px;
+  cache.y = ((cache.yPercent = y && Math.round(target.offsetHeight / 2) === Math.round(-y) ? -50 : 0) ? 0 : y) + px;
+  cache.z = z + px;
+  cache.scaleX = (0, _gsapCore._round)(scaleX);
+  cache.scaleY = (0, _gsapCore._round)(scaleY);
+  cache.rotation = (0, _gsapCore._round)(rotation) + deg;
+  cache.rotationX = (0, _gsapCore._round)(rotationX) + deg;
+  cache.rotationY = (0, _gsapCore._round)(rotationY) + deg;
+  cache.skewX = skewX + deg;
+  cache.skewY = skewY + deg;
+  cache.transformPerspective = perspective + px;
+
+  if (cache.zOrigin = parseFloat(origin.split(" ")[2]) || 0) {
+    style[_transformOriginProp] = _firstTwoOnly(origin);
+  }
+
+  cache.xOffset = cache.yOffset = 0;
+  cache.force3D = _gsapCore._config.force3D;
+  cache.renderTransform = cache.svg ? _renderSVGTransforms : _supports3D ? _renderCSSTransforms : _renderNon3DTransforms;
+  cache.uncache = 0;
+  return cache;
+},
+    _firstTwoOnly = function _firstTwoOnly(value) {
+  return (value = value.split(" "))[0] + " " + value[1];
+},
+    //for handling transformOrigin values, stripping out the 3rd dimension
+_addPxTranslate = function _addPxTranslate(target, start, value) {
+  var unit = (0, _gsapCore.getUnit)(start);
+  return (0, _gsapCore._round)(parseFloat(start) + parseFloat(_convertToUnit(target, "x", value + "px", unit))) + unit;
+},
+    _renderNon3DTransforms = function _renderNon3DTransforms(ratio, cache) {
+  cache.z = "0px";
+  cache.rotationY = cache.rotationX = "0deg";
+  cache.force3D = 0;
+
+  _renderCSSTransforms(ratio, cache);
+},
+    _zeroDeg = "0deg",
+    _zeroPx = "0px",
+    _endParenthesis = ") ",
+    _renderCSSTransforms = function _renderCSSTransforms(ratio, cache) {
+  var _ref = cache || this,
+      xPercent = _ref.xPercent,
+      yPercent = _ref.yPercent,
+      x = _ref.x,
+      y = _ref.y,
+      z = _ref.z,
+      rotation = _ref.rotation,
+      rotationY = _ref.rotationY,
+      rotationX = _ref.rotationX,
+      skewX = _ref.skewX,
+      skewY = _ref.skewY,
+      scaleX = _ref.scaleX,
+      scaleY = _ref.scaleY,
+      transformPerspective = _ref.transformPerspective,
+      force3D = _ref.force3D,
+      target = _ref.target,
+      zOrigin = _ref.zOrigin,
+      transforms = "",
+      use3D = force3D === "auto" && ratio && ratio !== 1 || force3D === true; // Safari has a bug that causes it not to render 3D transform-origin values properly, so we force the z origin to 0, record it in the cache, and then do the math here to offset the translate values accordingly (basically do the 3D transform-origin part manually)
+
+
+  if (zOrigin && (rotationX !== _zeroDeg || rotationY !== _zeroDeg)) {
+    var angle = parseFloat(rotationY) * _DEG2RAD,
+        a13 = Math.sin(angle),
+        a33 = Math.cos(angle),
+        cos;
+
+    angle = parseFloat(rotationX) * _DEG2RAD;
+    cos = Math.cos(angle);
+    x = _addPxTranslate(target, x, a13 * cos * -zOrigin);
+    y = _addPxTranslate(target, y, -Math.sin(angle) * -zOrigin);
+    z = _addPxTranslate(target, z, a33 * cos * -zOrigin + zOrigin);
+  }
+
+  if (transformPerspective !== _zeroPx) {
+    transforms += "perspective(" + transformPerspective + _endParenthesis;
+  }
+
+  if (xPercent || yPercent) {
+    transforms += "translate(" + xPercent + "%, " + yPercent + "%) ";
+  }
+
+  if (use3D || x !== _zeroPx || y !== _zeroPx || z !== _zeroPx) {
+    transforms += z !== _zeroPx || use3D ? "translate3d(" + x + ", " + y + ", " + z + ") " : "translate(" + x + ", " + y + _endParenthesis;
+  }
+
+  if (rotation !== _zeroDeg) {
+    transforms += "rotate(" + rotation + _endParenthesis;
+  }
+
+  if (rotationY !== _zeroDeg) {
+    transforms += "rotateY(" + rotationY + _endParenthesis;
+  }
+
+  if (rotationX !== _zeroDeg) {
+    transforms += "rotateX(" + rotationX + _endParenthesis;
+  }
+
+  if (skewX !== _zeroDeg || skewY !== _zeroDeg) {
+    transforms += "skew(" + skewX + ", " + skewY + _endParenthesis;
+  }
+
+  if (scaleX !== 1 || scaleY !== 1) {
+    transforms += "scale(" + scaleX + ", " + scaleY + _endParenthesis;
+  }
+
+  target.style[_transformProp] = transforms || "translate(0, 0)";
+},
+    _renderSVGTransforms = function _renderSVGTransforms(ratio, cache) {
+  var _ref2 = cache || this,
+      xPercent = _ref2.xPercent,
+      yPercent = _ref2.yPercent,
+      x = _ref2.x,
+      y = _ref2.y,
+      rotation = _ref2.rotation,
+      skewX = _ref2.skewX,
+      skewY = _ref2.skewY,
+      scaleX = _ref2.scaleX,
+      scaleY = _ref2.scaleY,
+      target = _ref2.target,
+      xOrigin = _ref2.xOrigin,
+      yOrigin = _ref2.yOrigin,
+      xOffset = _ref2.xOffset,
+      yOffset = _ref2.yOffset,
+      forceCSS = _ref2.forceCSS,
+      tx = parseFloat(x),
+      ty = parseFloat(y),
+      a11,
+      a21,
+      a12,
+      a22,
+      temp;
+
+  rotation = parseFloat(rotation);
+  skewX = parseFloat(skewX);
+  skewY = parseFloat(skewY);
+
+  if (skewY) {
+    //for performance reasons, we combine all skewing into the skewX and rotation values. Remember, a skewY of 10 degrees looks the same as a rotation of 10 degrees plus a skewX of 10 degrees.
+    skewY = parseFloat(skewY);
+    skewX += skewY;
+    rotation += skewY;
+  }
+
+  if (rotation || skewX) {
+    rotation *= _DEG2RAD;
+    skewX *= _DEG2RAD;
+    a11 = Math.cos(rotation) * scaleX;
+    a21 = Math.sin(rotation) * scaleX;
+    a12 = Math.sin(rotation - skewX) * -scaleY;
+    a22 = Math.cos(rotation - skewX) * scaleY;
+
+    if (skewX) {
+      skewY *= _DEG2RAD;
+      temp = Math.tan(skewX - skewY);
+      temp = Math.sqrt(1 + temp * temp);
+      a12 *= temp;
+      a22 *= temp;
+
+      if (skewY) {
+        temp = Math.tan(skewY);
+        temp = Math.sqrt(1 + temp * temp);
+        a11 *= temp;
+        a21 *= temp;
+      }
+    }
+
+    a11 = (0, _gsapCore._round)(a11);
+    a21 = (0, _gsapCore._round)(a21);
+    a12 = (0, _gsapCore._round)(a12);
+    a22 = (0, _gsapCore._round)(a22);
+  } else {
+    a11 = scaleX;
+    a22 = scaleY;
+    a21 = a12 = 0;
+  }
+
+  if (tx && !~(x + "").indexOf("px") || ty && !~(y + "").indexOf("px")) {
+    tx = _convertToUnit(target, "x", x, "px");
+    ty = _convertToUnit(target, "y", y, "px");
+  }
+
+  if (xOrigin || yOrigin || xOffset || yOffset) {
+    tx = (0, _gsapCore._round)(tx + xOrigin - (xOrigin * a11 + yOrigin * a12) + xOffset);
+    ty = (0, _gsapCore._round)(ty + yOrigin - (xOrigin * a21 + yOrigin * a22) + yOffset);
+  }
+
+  if (xPercent || yPercent) {
+    //The SVG spec doesn't support percentage-based translation in the "transform" attribute, so we merge it into the translation to simulate it.
+    temp = target.getBBox();
+    tx = (0, _gsapCore._round)(tx + xPercent / 100 * temp.width);
+    ty = (0, _gsapCore._round)(ty + yPercent / 100 * temp.height);
+  }
+
+  temp = "matrix(" + a11 + "," + a21 + "," + a12 + "," + a22 + "," + tx + "," + ty + ")";
+  target.setAttribute("transform", temp);
+
+  if (forceCSS) {
+    //some browsers prioritize CSS transforms over the transform attribute. When we sense that the user has CSS transforms applied, we must overwrite them this way (otherwise some browser simply won't render the  transform attribute changes!)
+    target.style[_transformProp] = temp;
+  }
+},
+    _addRotationalPropTween = function _addRotationalPropTween(plugin, target, property, startNum, endValue, relative) {
+  var cap = 360,
+      isString = (0, _gsapCore._isString)(endValue),
+      endNum = parseFloat(endValue) * (isString && ~endValue.indexOf("rad") ? _RAD2DEG : 1),
+      change = relative ? endNum * relative : endNum - startNum,
+      finalValue = startNum + change + "deg",
+      direction,
+      pt;
+
+  if (isString) {
+    direction = endValue.split("_")[1];
+
+    if (direction === "short") {
+      change %= cap;
+
+      if (change !== change % (cap / 2)) {
+        change += change < 0 ? cap : -cap;
+      }
+    }
+
+    if (direction === "cw" && change < 0) {
+      change = (change + cap * _bigNum) % cap - ~~(change / cap) * cap;
+    } else if (direction === "ccw" && change > 0) {
+      change = (change - cap * _bigNum) % cap - ~~(change / cap) * cap;
+    }
+  }
+
+  plugin._pt = pt = new _gsapCore.PropTween(plugin._pt, target, property, startNum, change, _renderPropWithEnd);
+  pt.e = finalValue;
+  pt.u = "deg";
+
+  plugin._props.push(property);
+
+  return pt;
+},
+    _addRawTransformPTs = function _addRawTransformPTs(plugin, transforms, target) {
+  //for handling cases where someone passes in a whole transform string, like transform: "scale(2, 3) rotate(20deg) translateY(30em)"
+  var style = _tempDivStyler.style,
+      startCache = target._gsap,
+      exclude = "perspective,force3D,transformOrigin,svgOrigin",
+      endCache,
+      p,
+      startValue,
+      endValue,
+      startNum,
+      endNum,
+      startUnit,
+      endUnit;
+  style.cssText = getComputedStyle(target).cssText + ";position:absolute;display:block;"; //%-based translations will fail unless we set the width/height to match the original target (and padding/borders can affect it)
+
+  style[_transformProp] = transforms;
+
+  _doc.body.appendChild(_tempDivStyler);
+
+  endCache = _parseTransform(_tempDivStyler, 1);
+
+  for (p in _transformProps) {
+    startValue = startCache[p];
+    endValue = endCache[p];
+
+    if (startValue !== endValue && exclude.indexOf(p) < 0) {
+      //tweening to no perspective gives very unintuitive results - just keep the same perspective in that case.
+      startUnit = (0, _gsapCore.getUnit)(startValue);
+      endUnit = (0, _gsapCore.getUnit)(endValue);
+      startNum = startUnit !== endUnit ? _convertToUnit(target, p, startValue, endUnit) : parseFloat(startValue);
+      endNum = parseFloat(endValue);
+      plugin._pt = new _gsapCore.PropTween(plugin._pt, startCache, p, startNum, endNum - startNum, _renderCSSProp);
+      plugin._pt.u = endUnit || 0;
+
+      plugin._props.push(p);
+    }
+  }
+
+  _doc.body.removeChild(_tempDivStyler);
+}; // handle splitting apart padding, margin, borderWidth, and borderRadius into their 4 components. Firefox, for example, won't report borderRadius correctly - it will only do borderTopLeftRadius and the other corners. We also want to handle paddingTop, marginLeft, borderRightWidth, etc.
+
+
+exports._getBBox = _getBBox;
+exports.checkPrefix = _checkPropPrefix;
+exports._createElement = _createElement;
+(0, _gsapCore._forEachName)("padding,margin,Width,Radius", function (name, index) {
+  var t = "Top",
+      r = "Right",
+      b = "Bottom",
+      l = "Left",
+      props = (index < 3 ? [t, r, b, l] : [t + l, t + r, b + r, b + l]).map(function (side) {
+    return index < 2 ? name + side : "border" + side + name;
+  });
+
+  _specialProps[index > 1 ? "border" + name : name] = function (plugin, target, property, endValue, tween) {
+    var a, vars;
+
+    if (arguments.length < 4) {
+      // getter, passed target, property, and unit (from _get())
+      a = props.map(function (prop) {
+        return _get(plugin, prop, property);
+      });
+      vars = a.join(" ");
+      return vars.split(a[0]).length === 5 ? a[0] : vars;
+    }
+
+    a = (endValue + "").split(" ");
+    vars = {};
+    props.forEach(function (prop, i) {
+      return vars[prop] = a[i] = a[i] || a[(i - 1) / 2 | 0];
+    });
+    plugin.init(target, vars, tween);
+  };
+});
+var CSSPlugin = {
+  name: "css",
+  register: _initCore,
+  targetTest: function targetTest(target) {
+    return target.style && target.nodeType;
+  },
+  init: function init(target, vars, tween, index, targets) {
+    var props = this._props,
+        style = target.style,
+        startValue,
+        endValue,
+        endNum,
+        startNum,
+        type,
+        specialProp,
+        p,
+        startUnit,
+        endUnit,
+        relative,
+        isTransformRelated,
+        transformPropTween,
+        cache,
+        smooth,
+        hasPriority;
+
+    if (!_pluginInitted) {
+      _initCore();
+    }
+
+    for (p in vars) {
+      if (p === "autoRound") {
+        continue;
+      }
+
+      endValue = vars[p];
+
+      if (_gsapCore._plugins[p] && (0, _gsapCore._checkPlugin)(p, vars, tween, index, target, targets)) {
+        //plugins
+        continue;
+      }
+
+      type = typeof endValue;
+      specialProp = _specialProps[p];
+
+      if (type === "function") {
+        endValue = endValue.call(tween, index, target, targets);
+        type = typeof endValue;
+      }
+
+      if (type === "string" && ~endValue.indexOf("random(")) {
+        endValue = (0, _gsapCore._replaceRandom)(endValue);
+      }
+
+      if (specialProp) {
+        if (specialProp(this, target, p, endValue, tween)) {
+          hasPriority = 1;
+        }
+      } else if (p.substr(0, 2) === "--") {
+        //CSS variable
+        this.add(style, "setProperty", getComputedStyle(target).getPropertyValue(p) + "", endValue + "", index, targets, 0, 0, p);
+      } else {
+        startValue = _get(target, p);
+        startNum = parseFloat(startValue);
+        relative = type === "string" && endValue.charAt(1) === "=" ? +(endValue.charAt(0) + "1") : 0;
+
+        if (relative) {
+          endValue = endValue.substr(2);
+        }
+
+        endNum = parseFloat(endValue);
+
+        if (p in _propertyAliases) {
+          if (p === "autoAlpha") {
+            //special case where we control the visibility along with opacity. We still allow the opacity value to pass through and get tweened.
+            if (startNum === 1 && _get(target, "visibility") === "hidden" && endNum) {
+              //if visibility is initially set to "hidden", we should interpret that as intent to make opacity 0 (a convenience)
+              startNum = 0;
+            }
+
+            _addNonTweeningPT(this, style, "visibility", startNum ? "inherit" : "hidden", endNum ? "inherit" : "hidden", !endNum);
+          }
+
+          if (p !== "scale" && p !== "transform") {
+            p = _propertyAliases[p];
+
+            if (~p.indexOf(",")) {
+              p = p.split(",")[0];
+            }
+          }
+        }
+
+        isTransformRelated = p in _transformProps; //--- TRANSFORM-RELATED ---
+
+        if (isTransformRelated) {
+          if (!transformPropTween) {
+            cache = target._gsap;
+            cache.renderTransform || _parseTransform(target); // if, for example, gsap.set(... {transform:"translateX(50vw)"}), the _get() call doesn't parse the transform, thus cache.renderTransform won't be set yet so force the parsing of the transform here.
+
+            smooth = vars.smoothOrigin !== false && cache.smooth;
+            transformPropTween = this._pt = new _gsapCore.PropTween(this._pt, style, _transformProp, 0, 1, cache.renderTransform, cache, 0, -1); //the first time through, create the rendering PropTween so that it runs LAST (in the linked list, we keep adding to the beginning)
+
+            transformPropTween.dep = 1; //flag it as dependent so that if things get killed/overwritten and this is the only PropTween left, we can safely kill the whole tween.
+          }
+
+          if (p === "scale") {
+            this._pt = new _gsapCore.PropTween(this._pt, cache, "scaleY", cache.scaleY, relative ? relative * endNum : endNum - cache.scaleY);
+            props.push("scaleY", p);
+            p += "X";
+          } else if (p === "transformOrigin") {
+            endValue = _convertKeywordsToPercentages(endValue); //in case something like "left top" or "bottom right" is passed in. Convert to percentages.
+
+            if (cache.svg) {
+              _applySVGOrigin(target, endValue, 0, smooth, 0, this);
+            } else {
+              endUnit = parseFloat(endValue.split(" ")[2]) || 0; //handle the zOrigin separately!
+
+              if (endUnit !== cache.zOrigin) {
+                _addNonTweeningPT(this, cache, "zOrigin", cache.zOrigin, endUnit);
+              }
+
+              _addNonTweeningPT(this, style, p, _firstTwoOnly(startValue), _firstTwoOnly(endValue));
+            }
+
+            continue;
+          } else if (p === "svgOrigin") {
+            _applySVGOrigin(target, endValue, 1, smooth, 0, this);
+
+            continue;
+          } else if (p in _rotationalProperties) {
+            _addRotationalPropTween(this, cache, p, startNum, endValue, relative);
+
+            continue;
+          } else if (p === "smoothOrigin") {
+            _addNonTweeningPT(this, cache, "smooth", cache.smooth, endValue);
+
+            continue;
+          } else if (p === "force3D") {
+            cache[p] = endValue;
+            continue;
+          } else if (p === "transform") {
+            _addRawTransformPTs(this, endValue, target);
+
+            continue;
+          }
+        } else if (!(p in style)) {
+          p = _checkPropPrefix(p) || p;
+        }
+
+        if (isTransformRelated || (endNum || endNum === 0) && (startNum || startNum === 0) && !_complexExp.test(endValue) && p in style) {
+          startUnit = (startValue + "").substr((startNum + "").length);
+          endNum || (endNum = 0); // protect against NaN
+
+          endUnit = (endValue + "").substr((endNum + "").length) || (p in _gsapCore._config.units ? _gsapCore._config.units[p] : startUnit);
+
+          if (startUnit !== endUnit) {
+            startNum = _convertToUnit(target, p, startValue, endUnit);
+          }
+
+          this._pt = new _gsapCore.PropTween(this._pt, isTransformRelated ? cache : style, p, startNum, relative ? relative * endNum : endNum - startNum, endUnit === "px" && vars.autoRound !== false && !isTransformRelated ? _renderRoundedCSSProp : _renderCSSProp);
+          this._pt.u = endUnit || 0;
+
+          if (startUnit !== endUnit) {
+            //when the tween goes all the way back to the beginning, we need to revert it to the OLD/ORIGINAL value (with those units). We record that as a "b" (beginning) property and point to a render method that handles that. (performance optimization)
+            this._pt.b = startValue;
+            this._pt.r = _renderCSSPropWithBeginning;
+          }
+        } else if (!(p in style)) {
+          if (p in target) {
+            //maybe it's not a style - it could be a property added directly to an element in which case we'll try to animate that.
+            this.add(target, p, target[p], endValue, index, targets);
+          } else {
+            (0, _gsapCore._missingPlugin)(p, endValue);
+            continue;
+          }
+        } else {
+          _tweenComplexCSSString.call(this, target, p, startValue, endValue);
+        }
+
+        props.push(p);
+      }
+    }
+
+    if (hasPriority) {
+      (0, _gsapCore._sortPropTweensByPriority)(this);
+    }
+  },
+  get: _get,
+  aliases: _propertyAliases,
+  getSetter: function getSetter(target, property, plugin) {
+    //returns a setter function that accepts target, property, value and applies it accordingly. Remember, properties like "x" aren't as simple as target.style.property = value because they've got to be applied to a proxy object and then merged into a transform string in a renderer.
+    var p = _propertyAliases[property];
+    p && p.indexOf(",") < 0 && (property = p);
+    return property in _transformProps && property !== _transformOriginProp && (target._gsap.x || _get(target, "x")) ? plugin && _recentSetterPlugin === plugin ? property === "scale" ? _setterScale : _setterTransform : (_recentSetterPlugin = plugin || {}) && (property === "scale" ? _setterScaleWithRender : _setterTransformWithRender) : target.style && !(0, _gsapCore._isUndefined)(target.style[property]) ? _setterCSSStyle : ~property.indexOf("-") ? _setterCSSProp : (0, _gsapCore._getSetter)(target, property);
+  },
+  core: {
+    _removeProperty: _removeProperty,
+    _getMatrix: _getMatrix
+  }
+};
+exports.default = exports.CSSPlugin = CSSPlugin;
+_gsapCore.gsap.utils.checkPrefix = _checkPropPrefix;
+
+(function (positionAndScale, rotation, others, aliases) {
+  var all = (0, _gsapCore._forEachName)(positionAndScale + "," + rotation + "," + others, function (name) {
+    _transformProps[name] = 1;
+  });
+  (0, _gsapCore._forEachName)(rotation, function (name) {
+    _gsapCore._config.units[name] = "deg";
+    _rotationalProperties[name] = 1;
+  });
+  _propertyAliases[all[13]] = positionAndScale + "," + rotation;
+  (0, _gsapCore._forEachName)(aliases, function (name) {
+    var split = name.split(":");
+    _propertyAliases[split[1]] = all[split[0]];
+  });
+})("x,y,z,scale,scaleX,scaleY,xPercent,yPercent", "rotation,rotationX,rotationY,skewX,skewY", "transform,transformOrigin,svgOrigin,force3D,smoothOrigin,transformPerspective", "0:translateX,1:translateY,2:translateZ,8:rotate,8:rotationZ,8:rotateZ,9:rotateX,10:rotateY");
+
+(0, _gsapCore._forEachName)("x,y,z,top,right,bottom,left,width,height,fontSize,padding,margin,perspective", function (name) {
+  _gsapCore._config.units[name] = "px";
+});
+
+_gsapCore.gsap.registerPlugin(CSSPlugin);
+},{"./gsap-core.js":"TNS6"}],"TpQl":[function(require,module,exports) {
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Power0", {
+  enumerable: true,
+  get: function () {
+    return _gsapCore.Power0;
+  }
+});
+Object.defineProperty(exports, "Power1", {
+  enumerable: true,
+  get: function () {
+    return _gsapCore.Power1;
+  }
+});
+Object.defineProperty(exports, "Power2", {
+  enumerable: true,
+  get: function () {
+    return _gsapCore.Power2;
+  }
+});
+Object.defineProperty(exports, "Power3", {
+  enumerable: true,
+  get: function () {
+    return _gsapCore.Power3;
+  }
+});
+Object.defineProperty(exports, "Power4", {
+  enumerable: true,
+  get: function () {
+    return _gsapCore.Power4;
+  }
+});
+Object.defineProperty(exports, "Linear", {
+  enumerable: true,
+  get: function () {
+    return _gsapCore.Linear;
+  }
+});
+Object.defineProperty(exports, "Quad", {
+  enumerable: true,
+  get: function () {
+    return _gsapCore.Quad;
+  }
+});
+Object.defineProperty(exports, "Cubic", {
+  enumerable: true,
+  get: function () {
+    return _gsapCore.Cubic;
+  }
+});
+Object.defineProperty(exports, "Quart", {
+  enumerable: true,
+  get: function () {
+    return _gsapCore.Quart;
+  }
+});
+Object.defineProperty(exports, "Quint", {
+  enumerable: true,
+  get: function () {
+    return _gsapCore.Quint;
+  }
+});
+Object.defineProperty(exports, "Strong", {
+  enumerable: true,
+  get: function () {
+    return _gsapCore.Strong;
+  }
+});
+Object.defineProperty(exports, "Elastic", {
+  enumerable: true,
+  get: function () {
+    return _gsapCore.Elastic;
+  }
+});
+Object.defineProperty(exports, "Back", {
+  enumerable: true,
+  get: function () {
+    return _gsapCore.Back;
+  }
+});
+Object.defineProperty(exports, "SteppedEase", {
+  enumerable: true,
+  get: function () {
+    return _gsapCore.SteppedEase;
+  }
+});
+Object.defineProperty(exports, "Bounce", {
+  enumerable: true,
+  get: function () {
+    return _gsapCore.Bounce;
+  }
+});
+Object.defineProperty(exports, "Sine", {
+  enumerable: true,
+  get: function () {
+    return _gsapCore.Sine;
+  }
+});
+Object.defineProperty(exports, "Expo", {
+  enumerable: true,
+  get: function () {
+    return _gsapCore.Expo;
+  }
+});
+Object.defineProperty(exports, "Circ", {
+  enumerable: true,
+  get: function () {
+    return _gsapCore.Circ;
+  }
+});
+Object.defineProperty(exports, "TweenLite", {
+  enumerable: true,
+  get: function () {
+    return _gsapCore.TweenLite;
+  }
+});
+Object.defineProperty(exports, "TimelineLite", {
+  enumerable: true,
+  get: function () {
+    return _gsapCore.TimelineLite;
+  }
+});
+Object.defineProperty(exports, "TimelineMax", {
+  enumerable: true,
+  get: function () {
+    return _gsapCore.TimelineMax;
+  }
+});
+Object.defineProperty(exports, "CSSPlugin", {
+  enumerable: true,
+  get: function () {
+    return _CSSPlugin.CSSPlugin;
+  }
+});
+exports.TweenMax = exports.default = exports.gsap = void 0;
+
+var _gsapCore = require("./gsap-core.js");
+
+var _CSSPlugin = require("./CSSPlugin.js");
+
+var gsapWithCSS = _gsapCore.gsap.registerPlugin(_CSSPlugin.CSSPlugin) || _gsapCore.gsap,
+    // to protect from tree shaking
+TweenMaxWithCSS = gsapWithCSS.core.Tween;
+
+exports.TweenMax = TweenMaxWithCSS;
+exports.default = exports.gsap = gsapWithCSS;
+},{"./gsap-core.js":"TNS6","./CSSPlugin.js":"bp4Z"}],"AHog":[function(require,module,exports) {
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _gsap = require("gsap");
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(n); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+var MenuItem = /*#__PURE__*/function () {
+  function MenuItem(el) {
+    _classCallCheck(this, MenuItem);
+
+    this.DOM = {
+      el: el
+    };
+    this.DOM.textsGroupEl = this.DOM.el.querySelector('svg > g');
+    this.filterId = this.DOM.el.querySelector('svg filter').id;
+
+    var _this$DOM$textsGroupE = this.DOM.textsGroupEl.querySelectorAll('text');
+
+    var _this$DOM$textsGroupE2 = _slicedToArray(_this$DOM$textsGroupE, 2);
+
+    this.DOM.text_1 = _this$DOM$textsGroupE2[0];
+    this.DOM.text_2 = _this$DOM$textsGroupE2[1];
+    this.DOM.feBlur = document.querySelector("#".concat(this.filterId, " > feGaussianBlur"));
+    this.primitiveValues = {
+      stdDeviation: 0
+    };
+    this.createTimeline();
+    this.initEvents();
+  }
+
+  _createClass(MenuItem, [{
+    key: "initEvents",
+    value: function initEvents() {
+      var _this = this;
+
+      this.onMouseEnterFn = function () {
+        _this.DOM.textsGroupEl.style.filter = "url(#".concat(_this.filterId, ")");
+
+        _this.tl.play();
+      };
+
+      this.onMouseLeaveFn = function () {
+        _this.DOM.textsGroupEl.style.filter = "url(#".concat(_this.filterId, ")");
+
+        _this.tl.reverse();
+      };
+
+      this.DOM.el.addEventListener('mouseenter', this.onMouseEnterFn);
+      this.DOM.el.addEventListener('mouseleave', this.onMouseLeaveFn);
+    }
+  }, {
+    key: "createTimeline",
+    value: function createTimeline() {
+      var _this2 = this;
+
+      // init timeline
+      this.tl = _gsap.gsap.timeline({
+        paused: true,
+        onComplete: function onComplete() {
+          _this2.DOM.textsGroupEl.style.filter = 'none';
+        },
+        onReverseComplete: function onReverseComplete() {
+          _this2.DOM.textsGroupEl.style.filter = 'none';
+        },
+        onUpdate: function onUpdate() {
+          _this2.DOM.feBlur.setAttribute('stdDeviation', _this2.primitiveValues.stdDeviation);
+        }
+      }).to(this.primitiveValues, {
+        duration: 0.4,
+        ease: "none",
+        startAt: {
+          stdDeviation: 0
+        },
+        stdDeviation: 1
+      }, 0).to(this.primitiveValues, {
+        duration: 0.4,
+        ease: "none",
+        stdDeviation: 0
+      }).to(this.DOM.text_1, {
+        duration: 0.8,
+        ease: "none",
+        // Power1.easeInOut
+        opacity: 0
+      }, 0).to(this.DOM.text_2, {
+        duration: 0.8,
+        ease: "none",
+        // Power1.easeInOut
+        opacity: 1
+      }, 0).to(this.DOM.text_1, {
+        duration: 0.8,
+        ease: "Power1.easeInOut",
+        y: -5
+      }, 0).to(this.DOM.text_2, {
+        duration: 0.8,
+        ease: "Power1.easeInOut",
+        startAt: {
+          y: 5
+        },
+        y: 0
+      }, 0);
+    }
+  }]);
+
+  return MenuItem;
+}();
+
+exports.default = MenuItem;
+},{"gsap":"TpQl"}],"CLsk":[function(require,module,exports) {
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _menuItem = _interopRequireDefault(require("./menuItem"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(n); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+var Menu = function Menu(el) {
+  var _this = this;
+
+  _classCallCheck(this, Menu);
+
+  this.DOM = {
+    el: el
+  };
+  this.items = [];
+
+  _toConsumableArray(this.DOM.el.querySelectorAll('.menu__item')).forEach(function (item) {
+    return _this.items.push(new _menuItem.default(item));
+  });
+};
+
+exports.default = Menu;
+},{"./menuItem":"AHog"}],"MgTz":[function(require,module,exports) {
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.preloadFonts = void 0;
+
+// Preload images
+var preloadFonts = function preloadFonts(id) {
+  return new Promise(function (resolve, reject) {
+    WebFont.load({
+      typekit: {
+        id: id
+      },
+      active: resolve
+    });
+  });
+};
+
+exports.preloadFonts = preloadFonts;
+},{}],"toeh":[function(require,module,exports) {
+"use strict";
+
+var _menu = _interopRequireDefault(require("./menu"));
+
+var _utils = require("../utils");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// Preload typekit fonts
+(0, _utils.preloadFonts)('dba6omz').then(function () {
+  document.body.classList.remove('loading');
+});
+var menu = new _menu.default(document.querySelector('nav.menu'));
+},{"./menu":"CLsk","../utils":"MgTz"}]},{},["toeh"], null)
\ No newline at end of file
diff --git a/public/favicon.ico b/public/favicon.ico
new file mode 100644
index 00000000..2a904e4c
Binary files /dev/null and b/public/favicon.ico differ
diff --git a/public/index.html b/public/index.html
index 1faa911c..86f5fe12 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,89 +1,89 @@
 <!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
+<html lang="en" class="no-js">
+
+<head>
+    <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Welcome to Firebase Hosting</title>
+    <title>Kafka Archives - Millions of text and audiobooks</title>
+    <meta name="description" content="Millions of text and audiobooks, all free and open source">
+    <meta name="keywords" content="Audiobooks, pdf, books, internet archive, archive.org, Kafka archives">
+    <meta name="author" content="Codrops">
+    <link rel="shortcut icon" href="favicon.ico">
+    <link rel="stylesheet" href="https://use.typekit.net/dba6omz.css">
+    <link rel="stylesheet" type="text/css" href="/style.css">
+    <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
+    <script>document.documentElement.className = "js";
 
-    <!-- update the version number as needed -->
-    <script defer src="/__/firebase/10.5.0/firebase-app-compat.js"></script>
-    <!-- include only the Firebase features as you need -->
-    <script defer src="/__/firebase/10.5.0/firebase-auth-compat.js"></script>
-    <script defer src="/__/firebase/10.5.0/firebase-database-compat.js"></script>
-    <script defer src="/__/firebase/10.5.0/firebase-firestore-compat.js"></script>
-    <script defer src="/__/firebase/10.5.0/firebase-functions-compat.js"></script>
-    <script defer src="/__/firebase/10.5.0/firebase-messaging-compat.js"></script>
-    <script defer src="/__/firebase/10.5.0/firebase-storage-compat.js"></script>
-    <script defer src="/__/firebase/10.5.0/firebase-analytics-compat.js"></script>
-    <script defer src="/__/firebase/10.5.0/firebase-remote-config-compat.js"></script>
-    <script defer src="/__/firebase/10.5.0/firebase-performance-compat.js"></script>
-    <!-- 
-      initialize the SDK after all desired features are loaded, set useEmulator to false
-      to avoid connecting the SDK to running emulators.
-    -->
-    <script defer src="/__/firebase/init.js?useEmulator=true"></script>
+var supportsCssVars = function supportsCssVars() {
+  var e,
+      t = document.createElement("style");
+  return t.innerHTML = "root: { --tmp-var: bold; }", document.head.appendChild(t), e = !!(window.CSS && window.CSS.supports && window.CSS.supports("font-weight", "var(--tmp-var)")), t.parentNode.removeChild(t), e;
+};
 
-    <style media="screen">
-      body { background: #ECEFF1; color: rgba(0,0,0,0.87); font-family: Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; }
-      #message { background: white; max-width: 360px; margin: 100px auto 16px; padding: 32px 24px; border-radius: 3px; }
-      #message h2 { color: #ffa100; font-weight: bold; font-size: 16px; margin: 0 0 8px; }
-      #message h1 { font-size: 22px; font-weight: 300; color: rgba(0,0,0,0.6); margin: 0 0 16px;}
-      #message p { line-height: 140%; margin: 16px 0 24px; font-size: 14px; }
-      #message a { display: block; text-align: center; background: #039be5; text-transform: uppercase; text-decoration: none; color: white; padding: 16px; border-radius: 4px; }
-      #message, #message a { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
-      #load { color: rgba(0,0,0,0.4); text-align: center; font-size: 13px; }
-      @media (max-width: 600px) {
-        body, #message { margin-top: 0; background: white; box-shadow: none; }
-        body { border-top: 16px solid #ffa100; }
-      }
-    </style>
-  </head>
-  <body>
-    <div id="message">
-      <h2>Welcome</h2>
-      <h1>Firebase Hosting Setup Complete</h1>
-      <p>You're seeing this because you've successfully setup Firebase Hosting. Now it's time to go build something extraordinary!</p>
-      <a target="_blank" href="https://firebase.google.com/docs/hosting/">Open Hosting Documentation</a>
-    </div>
-    <p id="load">Firebase SDK Loading&hellip;</p>
+supportsCssVars() || alert("Please view this demo in a modern browser that supports CSS Variables.");</script>
+</head>
 
-    <script>
-      document.addEventListener('DOMContentLoaded', function() {
-        const loadEl = document.querySelector('#load');
-        // // 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
-        // // The Firebase SDK is initialized and available here!
-        //
-        // firebase.auth().onAuthStateChanged(user => { });
-        // firebase.database().ref('/path/to/ref').on('value', snapshot => { });
-        // firebase.firestore().doc('/foo/bar').get().then(() => { });
-        // firebase.functions().httpsCallable('yourFunction')().then(() => { });
-        // firebase.messaging().requestPermission().then(() => { });
-        // firebase.storage().ref('/path/to/ref').getDownloadURL().then(() => { });
-        // firebase.analytics(); // call to activate
-        // firebase.analytics().logEvent('tutorial_completed');
-        // firebase.performance(); // call to activate
-        //
-        // // 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
+<body class="demo-3 loading">
+<main>
+    <h1 class="title">Kafka Archives</h1>
+    <nav class="menu">
+        <a class="menu__item" href="https://play.google.com/store/apps/details?id=com.kafka.user">
+            <svg class="menu__text" viewBox="0 0 150 20" preserveAspectRatio="xMinYMid meet">
+                <defs>
+                    <filter id="goo-1">
+                        <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="blur"></feGaussianBlur>
+                        <feColorMatrix in="blur" mode="matrix" values="	1 0 0 0 0
+																			0 1 0 0 0  
+																			1 0 1 0 0  
+																			0 0 0 18 -8" result="goo"></feColorMatrix>
+                        <feComposite in="SourceGraphic" in2="goo" operator="atop"></feComposite>
+                    </filter>
+                </defs>
+                <g>
+                    <text x="0" y="15">Download Kafka</text>
+                    <text x="0" y="15">Play Store</text>
+                </g>
+            </svg>
+        </a>
+        <a class="menu__item" href="https://www.kafkaarchives.com">
+            <svg class="menu__text" viewBox="0 0 150 20" preserveAspectRatio="xMinYMid meet">
+                <defs>
+                    <filter id="goo-2">
+                        <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="blur"></feGaussianBlur>
+                        <feColorMatrix in="blur" mode="matrix" values="	1 0 0 0 0
+																			0 1 0 0 0  
+																			1 0 1 0 0  
+																			0 0 0 18 -8" result="goo"></feColorMatrix>
+                        <feComposite in="SourceGraphic" in2="goo" operator="atop"></feComposite>
+                    </filter>
+                </defs>
+                <g>
+                    <text x="0" y="15">Visit</text>
+                    <text x="0" y="15">Website</text>
+                </g>
+            </svg>
+        </a>
+        <a class="menu__item" href="https://github.com/vipulyaara/Kafka">
+            <svg class="menu__text" viewBox="0 0 150 20" preserveAspectRatio="xMinYMid meet">
+                <defs>
+                    <filter id="goo-3">
+                        <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="blur"></feGaussianBlur>
+                        <feColorMatrix in="blur" mode="matrix" values="	1 0 0 0 0
+																			0 1 0 0 0  
+																			1 0 1 0 0  
+																			0 0 0 18 -8" result="goo"></feColorMatrix>
+                        <feComposite in="SourceGraphic" in2="goo" operator="atop"></feComposite>
+                    </filter>
+                </defs>
+                <g>
+                    <text x="0" y="15">See Code</text>
+                    <text x="0" y="15">Github</text>
+                </g>
+            </svg>
+        </a>
+    </nav>
+</main>
+<script src="/demo.js"></script>
+</body>
 
-        try {
-          let app = firebase.app();
-          let features = [
-            'auth', 
-            'database', 
-            'firestore',
-            'functions',
-            'messaging', 
-            'storage', 
-            'analytics', 
-            'remoteConfig',
-            'performance',
-          ].filter(feature => typeof app[feature] === 'function');
-          loadEl.textContent = `Firebase SDK loaded with ${features.join(', ')}`;
-        } catch (e) {
-          console.error(e);
-          loadEl.textContent = 'Error loading the Firebase SDK, check the console.';
-        }
-      });
-    </script>
-  </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/public/style.css b/public/style.css
new file mode 100644
index 00000000..bdf6c1c0
--- /dev/null
+++ b/public/style.css
@@ -0,0 +1,220 @@
+*,
+*::after,
+*::before {
+	box-sizing: border-box;
+}
+
+:root {
+	font-size: 18px;
+}
+
+body {
+	margin: 0;
+	--color-text: #fff;
+	--color-bg: #c2c6c9;
+	--color-link: #000;
+	--color-link-hover: #000;
+	--color-menu: #000;
+	--fontsize-menu: 16px;
+	--font-menu: titling-gothic-fb, sans-serif;
+	color: var(--color-text);
+	background-color: var(--color-bg);
+	font-family: nimbus-sans-extended, sans-serif;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	overflow-x: hidden;
+}
+
+.demo-3 {
+	--color-text: #fff;
+	--color-bg: #000;
+	--color-link: #fff;
+	--color-link-hover: #fff;
+	--color-menu: #fff;
+	--font-menu: laca-text, sans-serif;
+	--fontsize-menu: 18px;
+}
+
+/* Page Loader */
+.js .loading::before,
+.js .loading::after {
+    content: '';
+    position: fixed;
+    z-index: 1000;
+}
+
+.js .loading::before {
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: var(--color-bg);
+}
+
+.js .loading::after {
+    top: 50%;
+    left: 50%;
+    width: 60px;
+    height: 60px;
+    margin: -30px 0 0 -30px;
+    border-radius: 50%;
+    opacity: 0.4;
+    background: var(--color-link);
+    animation: loaderAnim 0.7s linear infinite alternate forwards;
+
+}
+
+@keyframes loaderAnim {
+    to {
+        opacity: 1;
+        transform: scale3d(0.5, 0.5, 1);
+    }
+}
+
+.hidden {
+	opacity: 0;
+	position: absolute;
+	pointer-events: none;
+	z-index: -1;
+}
+
+a {
+	text-decoration: none;
+	color: var(--color-link);
+	outline: none;
+	border-bottom: 2px solid;
+	transition: border-color 0.1s;
+}
+
+a:hover,
+a:focus {
+	color: var(--color-link-hover);
+	outline: none;
+	border-color: transparent;
+}
+
+main {
+	padding: 3rem 5vw;
+	position: relative;
+	z-index: 1000;
+}
+
+.title {
+	font-size: 1rem;
+	margin: 0 0 1rem;
+	font-weight: normal;
+}
+
+.links {
+	display: inline;
+}
+
+.demos {
+	margin: 1rem 0;
+}
+
+.demo--current,
+.demo--current:hover {
+	border-color: transparent;
+}
+
+.text--menu {
+	border: none;
+	color: var(--color-link);
+	margin: 1rem 0;
+}
+
+.credits a {
+	color: currentColor;
+}
+
+.menu {
+	width: 100%;
+	min-height: 400px;
+	display: grid;
+}
+
+.menu__item {
+    border: none;
+    transition: none;
+    cursor: pointer;
+    position: relative;
+}
+
+.menu__text {
+	font-size: var(--fontsize-menu);
+	fill: var(--color-menu);
+    display: block;
+    font-family: var(--font-menu);
+	font-weight: 700;
+    position: absolute;
+    height: 120%;
+    width: 100%;
+    pointer-events: none;
+}
+
+.menu__text text {
+	transform-origin: 50% 50%;
+	transform-box: view-box;
+}
+
+.menu__text text:nth-child(2) { 
+	opacity: 0;
+}
+
+@media screen and (min-width: 53em) {
+	main {
+		position: fixed;
+		z-index: 100;
+		top: 0;
+		left: 0;
+		display: grid;
+		justify-items: start;
+		width: 100%;
+		height: 100vh;
+		padding: 2rem 3rem;
+		grid-template-columns: 30% 30% 40%;
+		grid-template-rows: auto 10vh auto 2fr 5rem;
+		grid-template-areas: 'title text-menu text-subscribe'
+							'... ... ...'
+							'links menu menu'
+							'demos menu menu'
+							'credits ... ...';
+	}
+	.title {
+		grid-area: title;
+		margin: 0;
+	}
+	.demos {
+		margin: 0;
+		grid-area: demos;
+		display: flex;
+		flex-direction: column;
+	}
+	.demo, .links a {
+		margin-bottom: 0.5rem;
+	}
+	.links {
+		grid-area: links;
+		display: flex;
+		flex-direction: column;
+		margin-bottom: 3rem;
+		padding-top: 0.5rem;
+	}
+	.credits {
+		margin: 0;
+		grid-area: credits;
+		align-self: end;
+	}
+	.text--menu {
+		grid-area: text-menu;
+		margin: 0;
+	}
+	.text--subscribe {
+		grid-area: text-subscribe;
+		justify-self: end;
+	}
+	.menu {
+		grid-area: menu;
+	}
+}
diff --git a/settings.gradle b/settings.gradle
index 0e386159..bf852b2c 100644
--- a/settings.gradle
+++ b/settings.gradle
@@ -9,6 +9,7 @@ pluginManagement {
 
 plugins {
     id("com.gradle.enterprise") version "3.13"
+    id("org.gradle.toolchains.foojay-resolver-convention") version "0.7.0"
 }
 
 gradleEnterprise {
diff --git a/spotless/copyright.txt b/spotless/copyright.txt
new file mode 100644
index 00000000..53312e2b
--- /dev/null
+++ b/spotless/copyright.txt
@@ -0,0 +1,3 @@
+// Copyright $YEAR, Vipul Kumar and Kafka contributors
+// SPDX-License-Identifier: Apache-2.0
+
diff --git a/spotless/spotless.gradle b/spotless/spotless.gradle
new file mode 100644
index 00000000..640aea71
--- /dev/null
+++ b/spotless/spotless.gradle
@@ -0,0 +1,18 @@
+apply plugin:  "com.diffplug.spotless"
+spotless {
+    java {
+        target '**/*.java'
+        googleJavaFormat().aosp()
+        removeUnusedImports()
+        trimTrailingWhitespace()
+        indentWithSpaces()
+        endWithNewline()
+    }
+    kotlin {
+        target "**/*.kt"
+        trimTrailingWhitespace()
+        ktlint()
+        indentWithSpaces()
+        endWithNewline()
+    }
+}
\ No newline at end of file
diff --git a/ui/auth/build.gradle b/ui/auth/build.gradle
index 3e91492b..0a991d97 100644
--- a/ui/auth/build.gradle
+++ b/ui/auth/build.gradle
@@ -23,6 +23,7 @@ dependencies {
     implementation project(':data:repo')
     implementation project(':domain')
     implementation project(':navigation')
+    implementation project(':core:remote-config')
     implementation project(':ui:common')
     implementation project(':ui:components')
     implementation libs.accompanist.placeholder
diff --git a/ui/auth/src/main/java/org/rekhta/ui/auth/AuthViewModel.kt b/ui/auth/src/main/java/org/rekhta/ui/auth/AuthViewModel.kt
index eaf6124b..517c5b17 100644
--- a/ui/auth/src/main/java/org/rekhta/ui/auth/AuthViewModel.kt
+++ b/ui/auth/src/main/java/org/rekhta/ui/auth/AuthViewModel.kt
@@ -1,9 +1,15 @@
 package org.rekhta.ui.auth
 
+import android.content.Intent
 import android.util.Patterns
+import androidx.activity.compose.ManagedActivityResultLauncher
+import androidx.activity.result.ActivityResult
+import androidx.activity.result.IntentSenderRequest
 import androidx.lifecycle.ViewModel
 import androidx.lifecycle.viewModelScope
 import com.kafka.data.entities.User
+import com.kafka.remote.config.RemoteConfig
+import com.kafka.remote.config.isGoogleLoginEnabled
 import dagger.hilt.android.lifecycle.HiltViewModel
 import kotlinx.coroutines.flow.StateFlow
 import kotlinx.coroutines.flow.combine
@@ -11,13 +17,17 @@ import kotlinx.coroutines.launch
 import org.kafka.analytics.logger.Analytics
 import org.kafka.auth.R
 import org.kafka.base.domain.InvokeSuccess
+import org.kafka.base.domain.onException
 import org.kafka.base.extensions.stateInDefault
 import org.kafka.common.ObservableLoadingCounter
 import org.kafka.common.collectStatus
 import org.kafka.common.snackbar.SnackbarManager
 import org.kafka.common.snackbar.UiMessage
+import org.kafka.common.snackbar.toUiMessage
+import org.kafka.domain.interactors.account.HandleGoogleCredentials
 import org.kafka.domain.interactors.account.ResetPassword
 import org.kafka.domain.interactors.account.SignInUser
+import org.kafka.domain.interactors.account.SignInWithGoogle
 import org.kafka.domain.interactors.account.SignUpUser
 import org.kafka.domain.observers.ObserveUser
 import javax.inject.Inject
@@ -26,18 +36,26 @@ import javax.inject.Inject
 class AuthViewModel @Inject constructor(
     private val signInUser: SignInUser,
     private val signUpUser: SignUpUser,
+    private val signInWithGoogle: SignInWithGoogle,
+    private val handleGoogleCredentials: HandleGoogleCredentials,
     private val resetPassword: ResetPassword,
     private val snackbarManager: SnackbarManager,
     private val analytics: Analytics,
+    private val remoteConfig: RemoteConfig,
     observeUser: ObserveUser
 ) : ViewModel() {
     private val loadingCounter = ObservableLoadingCounter()
 
     val state: StateFlow<AuthViewState> = combine(
         observeUser.flow,
+        signInWithGoogle.inProgress,
         loadingCounter.observable,
-    ) { user, isLoading ->
-        AuthViewState(currentUser = user, isLoading = isLoading)
+    ) { user, signInWithGoogleLoading, isLoading ->
+        AuthViewState(
+            currentUser = user,
+            isLoading = isLoading || signInWithGoogleLoading,
+            isGoogleLoginEnabled = remoteConfig.isGoogleLoginEnabled()
+        )
     }.stateInDefault(
         scope = viewModelScope,
         initialValue = AuthViewState(),
@@ -47,6 +65,25 @@ class AuthViewModel @Inject constructor(
         observeUser(ObserveUser.Params())
     }
 
+    fun signInWithGoogle(launcher: ManagedActivityResultLauncher<IntentSenderRequest, ActivityResult>) {
+        viewModelScope.launch {
+            val result = signInWithGoogle(Unit)
+            result.onException { exception ->
+                snackbarManager.addMessage(exception.toUiMessage())
+            }
+            result.getOrNull()?.let { intentSender ->
+                launcher.launch(IntentSenderRequest.Builder(intentSender).build())
+            }
+        }
+    }
+
+    fun handleGoogleCredentials(data: Intent?) {
+        viewModelScope.launch {
+            handleGoogleCredentials.invoke(data)
+                .collectStatus(loadingCounter, snackbarManager)
+        }
+    }
+
     fun login(email: String, password: String) {
         when {
             !email.isValidEmail() ->
@@ -107,5 +144,6 @@ class AuthViewModel @Inject constructor(
 
 data class AuthViewState(
     val currentUser: User? = null,
-    val isLoading: Boolean = false
+    val isLoading: Boolean = false,
+    val isGoogleLoginEnabled: Boolean = false
 )
diff --git a/ui/auth/src/main/java/org/rekhta/ui/auth/LoginScreen.kt b/ui/auth/src/main/java/org/rekhta/ui/auth/LoginScreen.kt
index a64d76fe..a93f028e 100644
--- a/ui/auth/src/main/java/org/rekhta/ui/auth/LoginScreen.kt
+++ b/ui/auth/src/main/java/org/rekhta/ui/auth/LoginScreen.kt
@@ -1,5 +1,9 @@
 package org.rekhta.ui.auth
 
+import android.app.Activity
+import androidx.activity.compose.rememberLauncherForActivityResult
+import androidx.activity.result.ActivityResult
+import androidx.activity.result.contract.ActivityResultContracts
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
@@ -9,8 +13,10 @@ import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
+import androidx.compose.material3.Button
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
@@ -23,13 +29,18 @@ import androidx.compose.ui.focus.FocusState
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.ColorFilter
 import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextDecoration
 import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
+import compose.icons.FontAwesomeIcons
+import compose.icons.fontawesomeicons.Brands
+import compose.icons.fontawesomeicons.brands.Google
 import org.kafka.auth.R
 import org.kafka.common.extensions.AnimatedVisibilityFade
 import org.kafka.common.extensions.rememberSavableMutableState
 import org.kafka.common.simpleClickable
+import org.kafka.common.widgets.IconResource
 import org.kafka.navigation.LocalNavigator
 import org.kafka.ui.components.ProvideScaffoldPadding
 import org.kafka.ui.components.material.BackButton
@@ -50,6 +61,14 @@ fun LoginScreen() {
     val authViewState by authViewModel.state.collectAsStateWithLifecycle()
     val navigator = LocalNavigator.current
 
+    val launcher = rememberLauncherForActivityResult(
+        ActivityResultContracts.StartIntentSenderForResult()
+    ) { result: ActivityResult ->
+        if (result.resultCode == Activity.RESULT_OK) {
+            authViewModel.handleGoogleCredentials(result.data)
+        }
+    }
+
     if (authViewState.currentUser != null) {
         navigator.goBack()
     }
@@ -66,9 +85,11 @@ fun LoginScreen() {
             if (authViewState.currentUser == null) {
                 Login(
                     modifier = Modifier,
+                    isGoogleLoginEnabled = authViewState.isGoogleLoginEnabled,
                     login = authViewModel::login,
                     signup = authViewModel::signup,
-                    forgotPassword = authViewModel::forgotPassword
+                    forgotPassword = authViewModel::forgotPassword,
+                    signInWithGoogle = { authViewModel.signInWithGoogle(launcher) }
                 )
             }
 
@@ -81,13 +102,15 @@ fun LoginScreen() {
 
 @Composable
 private fun Login(
+    isGoogleLoginEnabled: Boolean,
     login: (email: String, password: String) -> Unit,
     signup: (email: String, password: String) -> Unit,
     forgotPassword: (email: String) -> Unit,
+    signInWithGoogle: () -> Unit,
     modifier: Modifier = Modifier,
 ) {
     var loginState by rememberSavableMutableState { LoginState.Login }
-    val onFocusChanged: (FocusState) -> Unit = {  }
+    val onFocusChanged: (FocusState) -> Unit = { }
 
     Column(
         modifier = modifier
@@ -118,7 +141,13 @@ private fun Login(
             forgotPassword = { email -> forgotPassword(email) }
         )
 
-        Spacer(modifier = Modifier.weight(0.4f))
+        Spacer(modifier = Modifier.weight(0.2f))
+
+        if (isGoogleLoginEnabled) {
+            SignInWithGoogle(onClick = signInWithGoogle)
+        }
+
+        Spacer(modifier = Modifier.weight(0.2f))
 
         SignupPrompt(loginState) {
             loginState = if (loginState.isLogin) LoginState.Signup else LoginState.Login
@@ -128,6 +157,21 @@ private fun Login(
     }
 }
 
+@Composable
+private fun SignInWithGoogle(onClick: () -> Unit) {
+    Button(onClick = onClick) {
+        IconResource(
+            imageVector = FontAwesomeIcons.Brands.Google,
+            modifier = Modifier.size(Dimens.Spacing24)
+        )
+        Spacer(modifier = Modifier.width(Dimens.Spacing16))
+        Text(
+            text = stringResource(R.string.continue_with_google),
+            style = MaterialTheme.typography.titleSmall
+        )
+    }
+}
+
 @Composable
 private fun LoginLogo(modifier: Modifier = Modifier) {
     Box(modifier = modifier) {
diff --git a/ui/auth/src/main/java/org/rekhta/ui/auth/profile/ProfileMenu.kt b/ui/auth/src/main/java/org/rekhta/ui/auth/profile/ProfileMenu.kt
index b51e16e7..73c0a4c5 100644
--- a/ui/auth/src/main/java/org/rekhta/ui/auth/profile/ProfileMenu.kt
+++ b/ui/auth/src/main/java/org/rekhta/ui/auth/profile/ProfileMenu.kt
@@ -11,6 +11,7 @@ import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Switch
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
@@ -20,6 +21,7 @@ import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.res.stringResource
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import org.kafka.auth.R
+import org.kafka.common.extensions.ProvideInteractiveEnforcement
 import org.kafka.common.image.Icons
 import ui.common.theme.theme.Dimens
 
@@ -30,9 +32,44 @@ internal fun ProfileMenu(profileViewModel: ProfileViewModel) {
     Column {
         MenuItem(
             text = stringResource(id = R.string.change_theme),
-            subtitle = state.theme.name.lowercase(),
             icon = Icons.Moon,
-            onClick = { profileViewModel.toggleTheme() }
+            onClick = { profileViewModel.toggleTheme() },
+            endContent = { SubtitleEndContent(subtitle = state.theme.name.lowercase()) }
+        )
+
+        if (trueContrastPrefEnabled) {
+            MenuItem(
+                text = stringResource(R.string.true_contrast),
+                icon = Icons.Sun,
+                onClick = { profileViewModel.toggleTrueContrast() },
+                endContent = {
+                    ProvideInteractiveEnforcement(false) {
+                        Switch(
+                            checked = state.trueContrast,
+                            onCheckedChange = { profileViewModel.toggleTrueContrast() })
+                    }
+                }
+            )
+        }
+
+        val adultContentDescription = if (state.safeMode) {
+            stringResource(R.string.adult_content_is_hidden)
+        } else {
+            stringResource(R.string.adult_content_is_shown)
+        }
+
+        MenuItem(
+            text = stringResource(R.string.safe_mode),
+            description = adultContentDescription,
+            icon = Icons.SafeMode,
+            onClick = { profileViewModel.toggleSafeMode() },
+            endContent = {
+                ProvideInteractiveEnforcement(false) {
+                    Switch(
+                        checked = state.safeMode,
+                        onCheckedChange = { profileViewModel.toggleSafeMode() })
+                }
+            }
         )
 
         MenuItem(
@@ -56,9 +93,10 @@ private fun MenuItem(
     text: String,
     icon: ImageVector,
     modifier: Modifier = Modifier,
-    subtitle: String? = null,
+    description: String? = null,
     contentDescription: String? = null,
-    onClick: () -> Unit
+    onClick: () -> Unit,
+    endContent: @Composable (() -> Unit)? = null
 ) {
     Row(
         horizontalArrangement = Arrangement.spacedBy(Dimens.Spacing04),
@@ -76,19 +114,34 @@ private fun MenuItem(
         )
         Spacer(modifier = Modifier.width(Dimens.Spacing16))
 
-        Text(
-            text = text,
-            style = MaterialTheme.typography.titleSmall,
-            color = MaterialTheme.colorScheme.onSurface
-        )
-
-        subtitle?.let {
-            Spacer(modifier = Modifier.weight(1f))
+        Column(verticalArrangement = Arrangement.spacedBy(Dimens.Spacing04)) {
             Text(
-                text = subtitle,
-                style = MaterialTheme.typography.labelSmall,
-                color = MaterialTheme.colorScheme.tertiary
+                text = text,
+                style = MaterialTheme.typography.titleSmall,
+                color = MaterialTheme.colorScheme.onSurface
             )
+
+            description?.let {
+                Text(
+                    text = description,
+                    style = MaterialTheme.typography.bodySmall,
+                    color = MaterialTheme.colorScheme.secondary
+                )
+            }
+        }
+
+        endContent?.let { content ->
+            Spacer(modifier = Modifier.weight(1f))
+            content()
         }
     }
 }
+
+@Composable
+private fun SubtitleEndContent(subtitle: String) {
+    Text(
+        text = subtitle,
+        style = MaterialTheme.typography.labelSmall,
+        color = MaterialTheme.colorScheme.tertiary
+    )
+}
diff --git a/ui/auth/src/main/java/org/rekhta/ui/auth/profile/ProfileViewModel.kt b/ui/auth/src/main/java/org/rekhta/ui/auth/profile/ProfileViewModel.kt
index b1cb73f8..0f5b7cca 100644
--- a/ui/auth/src/main/java/org/rekhta/ui/auth/profile/ProfileViewModel.kt
+++ b/ui/auth/src/main/java/org/rekhta/ui/auth/profile/ProfileViewModel.kt
@@ -7,9 +7,15 @@ import androidx.lifecycle.ViewModel
 import androidx.lifecycle.viewModelScope
 import com.kafka.data.entities.User
 import com.kafka.data.prefs.PreferencesStore
+import com.kafka.data.prefs.SAFE_MODE
+import com.kafka.data.prefs.SAFE_MODE_DEFAULT
 import com.kafka.data.prefs.THEME
+import com.kafka.data.prefs.TRUE_CONTRAST
+import com.kafka.data.prefs.TRUE_CONTRAST_DEFAULT
 import com.kafka.data.prefs.Theme
+import com.kafka.data.prefs.observeSafeMode
 import com.kafka.data.prefs.observeTheme
+import com.kafka.data.prefs.observeTrueContrast
 import dagger.hilt.android.lifecycle.HiltViewModel
 import kotlinx.coroutines.flow.StateFlow
 import kotlinx.coroutines.flow.combine
@@ -44,11 +50,15 @@ class ProfileViewModel @Inject constructor(
     val state: StateFlow<ProfileViewState> = combine(
         observeUser.flow,
         preferencesStore.observeTheme(),
+        preferencesStore.observeTrueContrast(),
+        preferencesStore.observeSafeMode(),
         loadingCounter.observable,
-    ) { user, theme, isLoading ->
+    ) { user, theme, trueContrast, safeMode, isLoading ->
         ProfileViewState(
             currentUser = user,
             theme = theme,
+            trueContrast = trueContrast,
+            safeMode = safeMode,
             appVersion = getVersionName(),
             isLoading = isLoading
         )
@@ -74,6 +84,20 @@ class ProfileViewModel @Inject constructor(
         }
     }
 
+    fun toggleTrueContrast() {
+        viewModelScope.launch {
+            preferencesStore.save(TRUE_CONTRAST, !state.value.trueContrast)
+            analytics.log { trueContrastChanged(!state.value.trueContrast) }
+        }
+    }
+
+    fun toggleSafeMode() {
+        viewModelScope.launch {
+            preferencesStore.save(SAFE_MODE, !state.value.safeMode)
+            analytics.log { safeModeChanged(!state.value.safeMode) }
+        }
+    }
+
     fun logout(onLogout: () -> Unit = { navigator.goBack() }) {
         analytics.log { logoutClicked() }
         viewModelScope.launch {
@@ -114,9 +138,10 @@ class ProfileViewModel @Inject constructor(
 data class ProfileViewState(
     val currentUser: User? = null,
     val theme: Theme = Theme.DEFAULT,
+    val trueContrast: Boolean = TRUE_CONTRAST_DEFAULT,
+    val safeMode: Boolean = SAFE_MODE_DEFAULT,
     val appVersion: String? = null,
     val isLoading: Boolean = true
-) {
-    val userName: String
-        get() = currentUser?.displayName.takeIf { it?.isNotEmpty() == true } ?: "Profile"
-}
+)
+
+const val trueContrastPrefEnabled = false
\ No newline at end of file
diff --git a/ui/auth/src/main/res/values/strings.xml b/ui/auth/src/main/res/values/strings.xml
index 838b9a46..760d05c8 100644
--- a/ui/auth/src/main/res/values/strings.xml
+++ b/ui/auth/src/main/res/values/strings.xml
@@ -9,8 +9,13 @@
     <string name="logged_out" translatable="false">Logged out successfully</string>
     <string name="send_feedback" translatable="false">Send Feedback</string>
     <string name="change_theme" translatable="false">App Theme</string>
+    <string name="true_contrast" translatable="false">True Contrast Color</string>
     <string name="logout" translatable="false">Logout</string>
     <string name="app_version" translatable="false">app version %1$s</string>
     <string name="go_to_favorites" translatable="false">Go to Favorites</string>
     <string name="login_rationale" translatable="false">Login to sync profile across devices and installs</string>
+    <string name="continue_with_google" translatable="false">Continue with Google</string>
+    <string name="safe_mode" translatable="false">Safe Mode</string>
+    <string name="adult_content_is_shown" translatable="false">Adult content is shown</string>
+    <string name="adult_content_is_hidden" translatable="false">Adult content is hidden</string>
 </resources>
diff --git a/ui/common/build.gradle b/ui/common/build.gradle
index 00c0d511..6a6ea0c6 100644
--- a/ui/common/build.gradle
+++ b/ui/common/build.gradle
@@ -21,7 +21,6 @@ dependencies {
     api project(':ui:theme')
 
     implementation libs.accompanist.flowlayout
-    implementation libs.accompanist.navigation.animation
     implementation libs.accompanist.navigation.material
     implementation libs.accompanist.systemuicontroller
     api libs.androidx.core
diff --git a/ui/common/src/main/java/org/kafka/common/extensions/ComposeExtensions.kt b/ui/common/src/main/java/org/kafka/common/extensions/ComposeExtensions.kt
index 17fad2a5..a44fc4a0 100644
--- a/ui/common/src/main/java/org/kafka/common/extensions/ComposeExtensions.kt
+++ b/ui/common/src/main/java/org/kafka/common/extensions/ComposeExtensions.kt
@@ -5,7 +5,9 @@ import androidx.compose.animation.EnterTransition
 import androidx.compose.animation.ExitTransition
 import androidx.compose.animation.fadeIn
 import androidx.compose.animation.fadeOut
+import androidx.compose.material3.LocalMinimumInteractiveComponentEnforcement
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.DisallowComposableCalls
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.mutableStateOf
@@ -66,3 +68,11 @@ fun <T> collectEvent(
         }
     }
 }
+
+@Composable
+fun ProvideInteractiveEnforcement(enforce: Boolean = true, content: @Composable () -> Unit) {
+    CompositionLocalProvider(
+        LocalMinimumInteractiveComponentEnforcement provides enforce,
+        content = content
+    )
+}
\ No newline at end of file
diff --git a/ui/common/src/main/java/org/kafka/common/extensions/Elevation.kt b/ui/common/src/main/java/org/kafka/common/extensions/Elevation.kt
new file mode 100644
index 00000000..53085b16
--- /dev/null
+++ b/ui/common/src/main/java/org/kafka/common/extensions/Elevation.kt
@@ -0,0 +1,41 @@
+package org.kafka.common.extensions
+
+import androidx.compose.foundation.ScrollState
+import androidx.compose.foundation.lazy.LazyListState
+import androidx.compose.foundation.lazy.grid.LazyGridState
+import androidx.compose.runtime.derivedStateOf
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import ui.common.theme.theme.Dimens
+
+val ScrollState.elevation
+    get() = derivedStateOf {
+        this.run { ((value / 100) * 2).coerceAtMost(MaxElevation).dp } ?: 0.dp
+    }
+
+val LazyListState.elevation: Dp
+    get() = if (firstVisibleItemIndex == 0) {
+        // For the first element, use the minimum of scroll offset and default elevation
+        // i.e. a value between 0 and 4.dp
+        minOf(firstVisibleItemScrollOffset.toFloat().dp, 24.dp)
+    } else {
+        // If not the first element, always set elevation and show the shadow
+        24.dp
+    }
+
+
+val LazyListState?.elevation
+    get() = derivedStateOf {
+        if (this?.firstVisibleItemIndex == 0) {
+            minOf(firstVisibleItemScrollOffset.toFloat().dp, MaxElevation.dp)
+        } else {
+            Dimens.Spacing20
+        }
+    }
+
+
+fun LazyGridState.elevation(maxElevation: Int = 40) = derivedStateOf {
+    this.run { firstVisibleItemScrollOffset.coerceAtMost(maxElevation) }.dp
+}
+
+private const val MaxElevation = 20
diff --git a/ui/common/src/main/java/org/kafka/common/image/CoilAppInitializer.kt b/ui/common/src/main/java/org/kafka/common/image/CoilAppInitializer.kt
index 140ab7ce..69803aa9 100644
--- a/ui/common/src/main/java/org/kafka/common/image/CoilAppInitializer.kt
+++ b/ui/common/src/main/java/org/kafka/common/image/CoilAppInitializer.kt
@@ -5,9 +5,9 @@ import android.content.Context
 import coil.Coil
 import coil.ImageLoader
 import coil.disk.DiskCache
-import org.kafka.base.AppInitializer
 import dagger.hilt.android.qualifiers.ApplicationContext
 import okhttp3.OkHttpClient
+import org.kafka.base.AppInitializer
 import org.kafka.base.CoroutineDispatchers
 import java.io.File
 import javax.inject.Inject
diff --git a/ui/common/src/main/java/org/kafka/common/image/Icons.kt b/ui/common/src/main/java/org/kafka/common/image/Icons.kt
index 2b2ff168..41929408 100644
--- a/ui/common/src/main/java/org/kafka/common/image/Icons.kt
+++ b/ui/common/src/main/java/org/kafka/common/image/Icons.kt
@@ -24,6 +24,7 @@ import compose.icons.tablericons.ChevronUpLeft
 import compose.icons.tablericons.CircleCheck
 import compose.icons.tablericons.CircleX
 import compose.icons.tablericons.Clock
+import compose.icons.tablericons.Copy
 import compose.icons.tablericons.Download
 import compose.icons.tablericons.Eye
 import compose.icons.tablericons.EyeOff
@@ -40,7 +41,9 @@ import compose.icons.tablericons.PlayerPause
 import compose.icons.tablericons.PlayerPlay
 import compose.icons.tablericons.Search
 import compose.icons.tablericons.Share
+import compose.icons.tablericons.Sun
 import compose.icons.tablericons.Trash
+import compose.icons.tablericons.Umbrella
 import compose.icons.tablericons.World
 import compose.icons.tablericons.X
 import org.kafka.common.image.kafkaicons.Vinyl
@@ -49,6 +52,7 @@ object Icons {
     val Home: ImageVector = TablerIcons.Home
     val HomeActive: ImageVector = TablerIcons.Home2
     val Search: ImageVector = TablerIcons.Search
+    val Copy: ImageVector = TablerIcons.Copy
     val Check: ImageVector = TablerIcons.CircleCheck
     val SearchActive: ImageVector = FeatherIcons.Search
     val Library: ImageVector = TablerIcons.Bookmark
@@ -85,6 +89,8 @@ object Icons {
     val ArrowForward = TablerIcons.ArrowRight
     val Vinyl = KafkaIcons.Vinyl
     val Moon = TablerIcons.Moon
+    val Sun = TablerIcons.Sun
     val Logout = TablerIcons.Logout
     val Feedback = TablerIcons.Message
+    val SafeMode = TablerIcons.Umbrella
 }
diff --git a/ui/common/src/main/java/org/kafka/common/image/__KafkaIcons.kt b/ui/common/src/main/java/org/kafka/common/image/KafkaIcons.kt
similarity index 100%
rename from ui/common/src/main/java/org/kafka/common/image/__KafkaIcons.kt
rename to ui/common/src/main/java/org/kafka/common/image/KafkaIcons.kt
diff --git a/ui/common/src/main/java/org/kafka/common/widgets/IconButton.kt b/ui/common/src/main/java/org/kafka/common/widgets/IconButton.kt
index 415cf74c..294f22ca 100644
--- a/ui/common/src/main/java/org/kafka/common/widgets/IconButton.kt
+++ b/ui/common/src/main/java/org/kafka/common/widgets/IconButton.kt
@@ -22,6 +22,7 @@ private val IconButtonSizeModifier = Modifier.size(48.dp)
 
 @Composable
 fun IconButton(
+    imageVector: ImageVector,
     onClick: () -> Unit,
     modifier: Modifier = Modifier,
     enabled: Boolean = true,
@@ -30,7 +31,6 @@ fun IconButton(
     interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
     tint: Color = MaterialTheme.colorScheme.onBackground,
     contentDescription: String? = null,
-    imageVector: ImageVector
 ) {
     IconButton(
         onClick = onClick,
diff --git a/ui/components/src/main/java/org/kafka/ui/components/Components.kt b/ui/components/src/main/java/org/kafka/ui/components/Components.kt
index aba6ac52..8c04566a 100644
--- a/ui/components/src/main/java/org/kafka/ui/components/Components.kt
+++ b/ui/components/src/main/java/org/kafka/ui/components/Components.kt
@@ -4,7 +4,6 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.Stable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
 
@@ -18,4 +17,4 @@ fun LabelMedium(text: String, modifier: Modifier = Modifier) {
 }
 
 @Composable
-fun Modifier.paddingLabelMedium() = padding(12.dp)
+fun Modifier.paddingLabelMedium() = this then Modifier.padding(12.dp)
diff --git a/ui/components/src/main/java/org/kafka/ui/components/MessageBox.kt b/ui/components/src/main/java/org/kafka/ui/components/MessageBox.kt
index dab230eb..99abbd79 100644
--- a/ui/components/src/main/java/org/kafka/ui/components/MessageBox.kt
+++ b/ui/components/src/main/java/org/kafka/ui/components/MessageBox.kt
@@ -6,6 +6,7 @@ import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Surface
@@ -23,7 +24,8 @@ fun MessageBox(
     text: String,
     modifier: Modifier = Modifier,
     icon: ImageVector? = null,
-    onClick: () -> Unit = {}
+    onClick: () -> Unit = {},
+    onIconClick: () -> Unit = {}
 ) {
     Surface(
         modifier = modifier,
@@ -38,7 +40,7 @@ fun MessageBox(
             modifier = Modifier
                 .fillMaxWidth()
                 .clickable { onClick() }
-                .padding(Dimens.Spacing20),
+                .padding(Dimens.Spacing16),
             horizontalArrangement = Arrangement.SpaceBetween,
             verticalAlignment = Alignment.CenterVertically
         ) {
@@ -49,7 +51,12 @@ fun MessageBox(
             )
 
             if (icon != null) {
-                IconResource(imageVector = icon, tint = MaterialTheme.colorScheme.primary)
+                IconResource(
+                    imageVector = icon,
+                    modifier = Modifier.size(Dimens.Spacing20),
+                    tint = MaterialTheme.colorScheme.primary,
+                    onClick = onIconClick
+                )
             }
         }
     }
diff --git a/ui/components/src/main/java/org/kafka/ui/components/item/FeaturedItem.kt b/ui/components/src/main/java/org/kafka/ui/components/item/FeaturedItem.kt
index 4456e458..f0373d9f 100644
--- a/ui/components/src/main/java/org/kafka/ui/components/item/FeaturedItem.kt
+++ b/ui/components/src/main/java/org/kafka/ui/components/item/FeaturedItem.kt
@@ -24,6 +24,7 @@ import com.kafka.data.entities.Item
 import org.kafka.common.image.Icons
 import org.kafka.ui.components.placeholder.placeholderDefault
 import ui.common.theme.theme.Dimens
+import ui.common.theme.theme.LocalThemeColor
 
 @Composable
 fun FeaturedItem(
@@ -33,6 +34,14 @@ fun FeaturedItem(
     imageUrl: String? = null,
     onClick: () -> Unit = {}
 ) {
+    val scrim = scrim(
+        if (LocalThemeColor.current.isDark) {
+            MaterialTheme.colorScheme.background
+        } else {
+            Color.Black
+        }
+    )
+
     Surface(
         modifier = modifier
             .fillMaxWidth()
@@ -52,7 +61,7 @@ fun FeaturedItem(
                 modifier = Modifier
                     .fillMaxWidth()
                     .align(Alignment.BottomStart)
-                    .background(Scrim)
+                    .background(scrim)
                     .padding(Dimens.Gutter)
             ) {
                 Text(
@@ -95,6 +104,6 @@ fun FeaturedItemPlaceholder() {
     )
 }
 
-private val Scrim = Brush.verticalGradient(
-    listOf(Color.Transparent, Color.Black.copy(alpha = 0.6f), Color.Black)
+private fun scrim(color: Color) = Brush.verticalGradient(
+    listOf(Color.Transparent, color.copy(alpha = 0.6f), color)
 )
diff --git a/ui/components/src/main/java/org/kafka/ui/components/item/LibraryItem.kt b/ui/components/src/main/java/org/kafka/ui/components/item/LibraryItem.kt
index 34575fdd..e7cf45ed 100644
--- a/ui/components/src/main/java/org/kafka/ui/components/item/LibraryItem.kt
+++ b/ui/components/src/main/java/org/kafka/ui/components/item/LibraryItem.kt
@@ -9,30 +9,43 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.RectangleShape
-import androidx.compose.ui.text.style.TextOverflow
 import com.kafka.data.entities.Item
 import org.kafka.common.widgets.LoadImage
 import org.kafka.common.widgets.shadowMaterial
 import ui.common.theme.theme.Dimens
 
+@Composable
+fun LibraryItem(item: Item, modifier: Modifier = Modifier, openItemDetail: (String) -> Unit) {
+    LibraryItem(
+        itemId = item.itemId,
+        coverImage = item.coverImage,
+        title = item.title,
+        creator = item.creator?.name,
+        modifier = modifier,
+        openItemDetail = openItemDetail
+    )
+}
+
 @Composable
 fun LibraryItem(
-    item: Item,
+    itemId: String,
+    coverImage: String?,
+    title: String?,
+    creator: String?,
     modifier: Modifier = Modifier,
     openItemDetail: (String) -> Unit
 ) {
     Column(
         modifier = modifier
             .fillMaxWidth()
-            .clickable { openItemDetail(item.itemId) }
+            .clickable { openItemDetail(itemId) }
             .padding(Dimens.Spacing08)
     ) {
         LoadImage(
-            data = item.coverImage,
+            data = coverImage,
             modifier = Modifier
                 .fillMaxWidth()
                 .aspectRatio(1f)
@@ -46,9 +59,9 @@ fun LibraryItem(
                 horizontal = Dimens.Spacing04
             )
         ) {
-            ItemTitleMedium(title = item.title.orEmpty())
+            ItemTitleMedium(title = title.orEmpty())
             Spacer(modifier = Modifier.height(Dimens.Spacing02))
-            ItemCreator(creator = item.creator?.name.orEmpty())
+            ItemCreator(creator = creator.orEmpty())
         }
     }
 }
diff --git a/ui/components/src/main/java/org/kafka/ui/components/material/TopBar.kt b/ui/components/src/main/java/org/kafka/ui/components/material/TopBar.kt
index ef908da0..6f00b82c 100644
--- a/ui/components/src/main/java/org/kafka/ui/components/material/TopBar.kt
+++ b/ui/components/src/main/java/org/kafka/ui/components/material/TopBar.kt
@@ -43,11 +43,10 @@ fun TopBar(
     )
 }
 
-
 @Composable
-fun BackButton(modifier: Modifier = Modifier, goBack: () -> Unit) {
+fun BackButton(modifier: Modifier = Modifier, onClick: () -> Unit) {
     IconButton(
-        onClick = { goBack() },
+        onClick = { onClick() },
         modifier = modifier
     ) {
         IconResource(
@@ -57,3 +56,17 @@ fun BackButton(modifier: Modifier = Modifier, goBack: () -> Unit) {
         )
     }
 }
+
+@Composable
+fun CloseButton(modifier: Modifier = Modifier, onClick: () -> Unit) {
+    IconButton(
+        onClick = { onClick() },
+        modifier = modifier
+    ) {
+        IconResource(
+            imageVector = Icons.X,
+            tint = MaterialTheme.colorScheme.primary,
+            contentDescription = stringResource(R.string.cd_back)
+        )
+    }
+}
diff --git a/ui/components/src/main/java/org/kafka/ui/components/snackbar/DismissableSnackbar.kt b/ui/components/src/main/java/org/kafka/ui/components/snackbar/DismissableSnackbar.kt
index 620cb4f6..b83981cf 100644
--- a/ui/components/src/main/java/org/kafka/ui/components/snackbar/DismissableSnackbar.kt
+++ b/ui/components/src/main/java/org/kafka/ui/components/snackbar/DismissableSnackbar.kt
@@ -4,15 +4,15 @@
  */
 package org.kafka.ui.components.snackbar
 
-import androidx.compose.material3.DismissDirection
-import androidx.compose.material3.DismissValue
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Snackbar
 import androidx.compose.material3.SnackbarData
 import androidx.compose.material3.SnackbarHost
 import androidx.compose.material3.SnackbarHostState
 import androidx.compose.material3.SwipeToDismiss
-import androidx.compose.material3.rememberDismissState
+import androidx.compose.material3.SwipeToDismissBox
+import androidx.compose.material3.SwipeToDismissBoxValue
+import androidx.compose.material3.rememberSwipeToDismissBoxState
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 
@@ -51,24 +51,17 @@ fun SwipeDismissSnackbar(
 }
 
 @Composable
-fun Dismissable(
-    onDismiss: () -> Unit,
-    directions: Set<DismissDirection> = setOf(
-        DismissDirection.StartToEnd,
-        DismissDirection.EndToStart
-    ),
-    content: @Composable () -> Unit
-) {
-    val dismissState = rememberDismissState(confirmValueChange = {
-        if (it != DismissValue.Default) {
+fun Dismissable(onDismiss: () -> Unit, content: @Composable () -> Unit) {
+    val dismissState = rememberSwipeToDismissBoxState(confirmValueChange = {
+        if (it != SwipeToDismissBoxValue.Settled) {
             onDismiss.invoke()
         }
         true
     })
-    SwipeToDismiss(
+
+    SwipeToDismissBox(
         state = dismissState,
-        directions = directions,
-        background = {},
-        dismissContent = { content() }
+        backgroundContent = {},
+        content = { content() }
     )
 }
diff --git a/ui/homepage/src/main/java/org/kafka/homepage/Homepage.kt b/ui/homepage/src/main/java/org/kafka/homepage/Homepage.kt
index 58a07a84..f8a67701 100644
--- a/ui/homepage/src/main/java/org/kafka/homepage/Homepage.kt
+++ b/ui/homepage/src/main/java/org/kafka/homepage/Homepage.kt
@@ -74,7 +74,8 @@ fun Homepage(viewModel: HomepageViewModel = hiltViewModel()) {
                         removeRecentItem = viewModel::removeRecentItem,
                         goToSearch = viewModel::openSearch,
                         goToSubject = viewModel::openSubject,
-                        onBannerClick = viewModel::onBannerClick
+                        onBannerClick = viewModel::onBannerClick,
+                        openRecentItems = viewModel::openRecentItems
                     )
                 }
 
@@ -102,7 +103,8 @@ private fun HomepageFeedItems(
     removeRecentItem: (String) -> Unit,
     goToSearch: () -> Unit,
     goToSubject: (String) -> Unit,
-    onBannerClick: (HomepageBanner) -> Unit
+    onBannerClick: (HomepageBanner) -> Unit,
+    openRecentItems: () -> Unit
 ) {
     LazyColumn(
         modifier = Modifier.testTag("homepage_feed_items"),
@@ -122,7 +124,8 @@ private fun HomepageFeedItems(
                             readingList = homepage.continueReadingItems,
                             openItemDetail = openRecentItemDetail,
                             removeRecentItem = removeRecentItem,
-                            modifier = Modifier.padding(top = Dimens.Gutter)
+                            modifier = Modifier.padding(top = Dimens.Gutter),
+                            openRecentItems = openRecentItems
                         )
                     }
                 }
diff --git a/ui/homepage/src/main/java/org/kafka/homepage/HomepageViewModel.kt b/ui/homepage/src/main/java/org/kafka/homepage/HomepageViewModel.kt
index c647e08d..194b5eae 100644
--- a/ui/homepage/src/main/java/org/kafka/homepage/HomepageViewModel.kt
+++ b/ui/homepage/src/main/java/org/kafka/homepage/HomepageViewModel.kt
@@ -97,6 +97,11 @@ class HomepageViewModel @Inject constructor(
         navigator.navigate(Screen.Search.createRoute(RootScreen.Search))
     }
 
+    fun openRecentItems() {
+        analytics.log { this.openRecentItems() }
+        navigator.navigate(Screen.RecentItems.createRoute(RootScreen.Home))
+    }
+
     fun onBannerClick(banner: HomepageBanner) {
         when (banner.action) {
             HomepageBanner.Action.Search -> navigator.navigate(
diff --git a/ui/homepage/src/main/java/org/kafka/homepage/components/ContinueReading.kt b/ui/homepage/src/main/java/org/kafka/homepage/components/ContinueReading.kt
index 3fc579e8..11460172 100644
--- a/ui/homepage/src/main/java/org/kafka/homepage/components/ContinueReading.kt
+++ b/ui/homepage/src/main/java/org/kafka/homepage/components/ContinueReading.kt
@@ -32,6 +32,7 @@ import androidx.compose.material3.LinearProgressIndicator
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
+import androidx.compose.material3.TextButton
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.derivedStateOf
 import androidx.compose.runtime.getValue
@@ -64,13 +65,35 @@ internal fun ContinueReading(
     readingList: ImmutableList<RecentItemWithProgress>,
     modifier: Modifier = Modifier,
     openItemDetail: (String) -> Unit,
-    removeRecentItem: (String) -> Unit
+    removeRecentItem: (String) -> Unit,
+    openRecentItems: () -> Unit
 ) {
+    val showAllAction = remember(readingList) { readingList.size > 2 }
+
     Column(modifier = modifier) {
-        LabelMedium(
-            text = stringResource(id = R.string.continue_reading),
-            modifier = Modifier.padding(horizontal = Dimens.Gutter)
-        )
+        Row(
+            modifier = Modifier.fillMaxWidth(),
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.SpaceBetween
+        ) {
+            LabelMedium(
+                text = stringResource(id = R.string.continue_reading),
+                modifier = Modifier.padding(horizontal = Dimens.Gutter)
+            )
+
+            if (showAllAction) {
+                TextButton(
+                    onClick = openRecentItems,
+                    modifier = Modifier.padding(end = Dimens.Spacing04)
+                ) {
+                    Text(
+                        text = stringResource(R.string.see_all),
+                        style = MaterialTheme.typography.labelMedium
+                    )
+                }
+            }
+        }
+
         LazyRow(
             contentPadding = PaddingValues(Dimens.Spacing12),
             horizontalArrangement = Arrangement.spacedBy(Dimens.Spacing20)
@@ -79,8 +102,7 @@ internal fun ContinueReading(
                 ContinueReadingItem(
                     item = continueReading,
                     onItemClicked = { openItemDetail(continueReading.recentItem.itemId) },
-                    onItemRemoved = { removeRecentItem(it) },
-                    modifier = Modifier.animateItemPlacement()
+                    onItemRemoved = { removeRecentItem(it) }
                 )
             }
         }
@@ -225,7 +247,7 @@ private fun Progress(progress: Float) {
         verticalAlignment = Alignment.CenterVertically
     ) {
         LinearProgressIndicator(
-            progress = progress,
+            progress = { progress },
             modifier = Modifier
                 .height(Dimens.Spacing04)
                 .width(116.dp)
diff --git a/ui/homepage/src/main/java/org/kafka/homepage/recent/RecentScreen.kt b/ui/homepage/src/main/java/org/kafka/homepage/recent/RecentScreen.kt
new file mode 100644
index 00000000..db45f7ed
--- /dev/null
+++ b/ui/homepage/src/main/java/org/kafka/homepage/recent/RecentScreen.kt
@@ -0,0 +1,92 @@
+package org.kafka.homepage.recent
+
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.LazyListState
+import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.lazy.rememberLazyListState
+import androidx.compose.material3.Scaffold
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.hilt.navigation.compose.hiltViewModel
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
+import com.kafka.data.entities.RecentItem
+import kotlinx.collections.immutable.ImmutableList
+import org.kafka.common.extensions.elevation
+import org.kafka.common.widgets.shadowMaterial
+import org.kafka.homepage.R
+import org.kafka.navigation.LocalNavigator
+import org.kafka.navigation.Navigator
+import org.kafka.ui.components.ProvideScaffoldPadding
+import org.kafka.ui.components.item.Item
+import org.kafka.ui.components.material.BackButton
+import org.kafka.ui.components.material.TopBar
+import org.kafka.ui.components.scaffoldPadding
+import ui.common.theme.theme.Dimens
+
+@Composable
+fun RecentScreen(viewModel: RecentViewModel = hiltViewModel()) {
+    val viewState by viewModel.state.collectAsStateWithLifecycle()
+    val lazyListState = rememberLazyListState()
+    val navigator = LocalNavigator.current
+
+    Scaffold(topBar = {
+        RecentTopBar(
+            lazyListState = lazyListState,
+            navigator = navigator
+        )
+    }) { padding ->
+        ProvideScaffoldPadding(padding = padding) {
+            RecentItems(
+                items = viewState.recentItems,
+                openItemDetail = viewModel::openItemDetail,
+                lazyListState = lazyListState
+            )
+        }
+    }
+}
+
+@Composable
+private fun RecentItems(
+    items: ImmutableList<RecentItem>,
+    openItemDetail: (String) -> Unit,
+    lazyListState: LazyListState,
+    modifier: Modifier = Modifier
+) {
+    LazyColumn(
+        state = lazyListState,
+        contentPadding = scaffoldPadding(),
+        modifier = modifier.fillMaxSize()
+    ) {
+        items(
+            items = items,
+            key = { item -> item.itemId }
+        ) { item ->
+            Item(
+                title = item.title,
+                creator = item.creator,
+                mediaType = item.mediaType,
+                coverImage = item.coverUrl,
+                modifier = Modifier
+                    .clickable { openItemDetail(item.itemId) }
+                    .padding(vertical = Dimens.Spacing06, horizontal = Dimens.Gutter),
+            )
+        }
+    }
+}
+
+@Composable
+private fun RecentTopBar(
+    lazyListState: LazyListState = rememberLazyListState(),
+    navigator: Navigator = LocalNavigator.current
+) {
+    TopBar(
+        title = stringResource(id = R.string.continue_reading),
+        navigationIcon = { BackButton { navigator.goBack() } },
+        modifier = Modifier.shadowMaterial(lazyListState.elevation)
+    )
+}
diff --git a/ui/homepage/src/main/java/org/kafka/homepage/recent/RecentViewModel.kt b/ui/homepage/src/main/java/org/kafka/homepage/recent/RecentViewModel.kt
new file mode 100644
index 00000000..7cf51eba
--- /dev/null
+++ b/ui/homepage/src/main/java/org/kafka/homepage/recent/RecentViewModel.kt
@@ -0,0 +1,43 @@
+package org.kafka.homepage.recent
+
+import androidx.lifecycle.ViewModel
+import androidx.lifecycle.viewModelScope
+import com.kafka.data.entities.RecentItem
+import dagger.hilt.android.lifecycle.HiltViewModel
+import kotlinx.collections.immutable.ImmutableList
+import kotlinx.collections.immutable.persistentListOf
+import kotlinx.collections.immutable.toPersistentList
+import kotlinx.coroutines.flow.map
+import org.kafka.analytics.logger.Analytics
+import org.kafka.base.extensions.stateInDefault
+import org.kafka.domain.observers.ObserveRecentItems
+import org.kafka.navigation.Navigator
+import org.kafka.navigation.Screen
+import javax.inject.Inject
+
+@HiltViewModel
+class RecentViewModel @Inject constructor(
+    observeRecentItems: ObserveRecentItems,
+    private val navigator: Navigator,
+    private val analytics: Analytics
+) : ViewModel() {
+    val state = observeRecentItems.flow.map { recentItems ->
+        RecentViewState(recentItems = recentItems.map { it.recentItem }.toPersistentList())
+    }.stateInDefault(
+        scope = viewModelScope,
+        initialValue = RecentViewState(),
+    )
+
+    init {
+        observeRecentItems(Unit)
+    }
+
+    fun openItemDetail(itemId: String) {
+        analytics.log { this.openItemDetail(itemId) }
+        navigator.navigate(Screen.ItemDetail.createRoute(navigator.currentRoot.value, itemId))
+    }
+}
+
+data class RecentViewState(
+    val recentItems: ImmutableList<RecentItem> = persistentListOf()
+)
diff --git a/ui/homepage/src/main/res/values/strings.xml b/ui/homepage/src/main/res/values/strings.xml
index aac5ae8e..e6bd3533 100644
--- a/ui/homepage/src/main/res/values/strings.xml
+++ b/ui/homepage/src/main/res/values/strings.xml
@@ -8,4 +8,5 @@
     <string name="logged_out" translatable="false">Logged out successfully</string>
     <string name="cd_profile" translatable="false">Profile</string>
     <string name="cd_remove_from_reading_list" translatable="false">Remove from reading list</string>
+    <string name="see_all" translatable="false">See All</string>
 </resources>
diff --git a/ui/item/src/main/java/org/kafka/item/detail/ItemDetail.kt b/ui/item/src/main/java/org/kafka/item/detail/ItemDetail.kt
index 67097703..05387095 100644
--- a/ui/item/src/main/java/org/kafka/item/detail/ItemDetail.kt
+++ b/ui/item/src/main/java/org/kafka/item/detail/ItemDetail.kt
@@ -158,7 +158,8 @@ private fun ItemDetail(
 
                 item(span = { GridItemSpan(GridItemSpan) }) {
                     ItemDetailActions(
-                        itemDetail = state.itemDetail!!,
+                        itemId = state.itemDetail!!.itemId,
+                        isAudio = state.itemDetail.isAudio,
                         onPrimaryAction = onPrimaryAction,
                         openFiles = openFiles,
                         isFavorite = state.isFavorite,
@@ -302,9 +303,9 @@ private fun ItemDetailPreview() {
     AppTheme {
         ItemDetail(
             state = ItemDetailViewState(
-                itemDetail = FakeItemData.itemDetail,
+                itemDetail = FakeItemData.fakeItemDetail,
                 isFavorite = true,
-                itemsByCreator = FakeItemData.items
+                itemsByCreator = FakeItemData.fakeItems
             ),
             modifier = Modifier.background(Color.White),
             openDescription = {},
diff --git a/ui/item/src/main/java/org/kafka/item/detail/ItemDetailActions.kt b/ui/item/src/main/java/org/kafka/item/detail/ItemDetailActions.kt
index 91e612c9..8748ae01 100644
--- a/ui/item/src/main/java/org/kafka/item/detail/ItemDetailActions.kt
+++ b/ui/item/src/main/java/org/kafka/item/detail/ItemDetailActions.kt
@@ -19,8 +19,8 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
-import com.kafka.data.entities.ItemDetail
 import com.sarahang.playback.ui.components.WIDE_LAYOUT_MIN_WIDTH
 import org.kafka.common.image.Icons
 import org.kafka.common.test.testTagUi
@@ -29,11 +29,13 @@ import org.kafka.common.widgets.IconResource
 import org.kafka.common.widgets.shadowMaterial
 import org.kafka.item.R
 import org.kafka.ui.components.material.FloatingButton
+import ui.common.theme.theme.AppTheme
 import ui.common.theme.theme.Dimens
 
 @Composable
 fun ItemDetailActions(
-    itemDetail: ItemDetail,
+    itemId: String,
+    isAudio: Boolean,
     onPrimaryAction: (String) -> Unit,
     openFiles: (String) -> Unit,
     isFavorite: Boolean,
@@ -59,16 +61,18 @@ fun ItemDetailActions(
                 Icon(
                     icon = Icons.Download,
                     contentDescription = stringResource(R.string.cd_files),
-                    modifier = Modifier.align(Alignment.Center).testTagUi("download_files"),
-                    onClicked = { openFiles(itemDetail.itemId) }
+                    modifier = Modifier
+                        .align(Alignment.Center)
+                        .testTagUi("download_files"),
+                    onClicked = { openFiles(itemId) }
                 )
             }
 
             FloatingButton(
-                text = stringResource(if (itemDetail.isAudio) R.string.play else R.string.read),
+                text = stringResource(if (isAudio) R.string.play else R.string.read),
                 modifier = Modifier.weight(0.8f),
-                onClickLabel = stringResource(if (itemDetail.isAudio) R.string.play else R.string.read),
-                onClicked = { onPrimaryAction(itemDetail.itemId) }
+                onClickLabel = stringResource(if (isAudio) R.string.play else R.string.read),
+                onClicked = { onPrimaryAction(itemId) }
             )
         }
     }
@@ -128,3 +132,18 @@ private fun Icon(
         }
     }
 }
+
+@Preview
+@Composable
+private fun ActionsPreview() {
+    AppTheme {
+        ItemDetailActions(
+            itemId = "123",
+            isAudio = false,
+            onPrimaryAction = {},
+            openFiles = {},
+            isFavorite = false,
+            toggleFavorite = {}
+        )
+    }
+}
diff --git a/ui/item/src/main/java/org/kafka/item/detail/ItemDetailViewModel.kt b/ui/item/src/main/java/org/kafka/item/detail/ItemDetailViewModel.kt
index e096cd11..769d39e8 100644
--- a/ui/item/src/main/java/org/kafka/item/detail/ItemDetailViewModel.kt
+++ b/ui/item/src/main/java/org/kafka/item/detail/ItemDetailViewModel.kt
@@ -6,11 +6,13 @@ import android.content.ContextWrapper
 import androidx.lifecycle.SavedStateHandle
 import androidx.lifecycle.ViewModel
 import androidx.lifecycle.viewModelScope
+import com.kafka.data.feature.item.DownloadStatus
 import com.kafka.data.model.ArchiveQuery
 import com.kafka.data.model.SearchFilter.Creator
 import com.kafka.data.model.SearchFilter.Subject
 import com.kafka.data.model.booksByAuthor
 import com.kafka.remote.config.RemoteConfig
+import com.kafka.remote.config.isOnlineReaderEnabled
 import com.kafka.remote.config.isShareEnabled
 import com.sarahang.playback.core.PlaybackConnection
 import dagger.hilt.android.lifecycle.HiltViewModel
@@ -21,7 +23,6 @@ import kotlinx.coroutines.flow.onEach
 import kotlinx.coroutines.launch
 import org.kafka.analytics.AppReviewManager
 import org.kafka.analytics.logger.Analytics
-import org.kafka.base.debug
 import org.kafka.base.extensions.stateInDefault
 import org.kafka.common.ObservableLoadingCounter
 import org.kafka.common.collectStatus
@@ -32,14 +33,19 @@ import org.kafka.domain.interactors.UpdateFavorite
 import org.kafka.domain.interactors.UpdateItemDetail
 import org.kafka.domain.interactors.UpdateItems
 import org.kafka.domain.interactors.recent.AddRecentItem
+import org.kafka.domain.interactors.recommendation.PostRecommendationEvent
+import org.kafka.domain.interactors.recommendation.PostRecommendationEvent.RecommendationEvent
 import org.kafka.domain.observers.ObserveCreatorItems
 import org.kafka.domain.observers.ObserveItemDetail
+import org.kafka.domain.observers.library.ObserveDownloadByItemId
 import org.kafka.domain.observers.library.ObserveFavoriteStatus
 import org.kafka.item.R
 import org.kafka.navigation.Navigator
 import org.kafka.navigation.RootScreen
 import org.kafka.navigation.Screen
 import org.kafka.navigation.Screen.ItemDescription
+import org.kafka.navigation.Screen.OnlineReader
+import org.kafka.navigation.Screen.Reader
 import org.kafka.navigation.Screen.Search
 import org.kafka.navigation.deeplink.Config
 import org.kafka.navigation.deeplink.DeepLinksNavigation
@@ -49,12 +55,14 @@ import javax.inject.Inject
 @HiltViewModel
 class ItemDetailViewModel @Inject constructor(
     observeItemDetail: ObserveItemDetail,
+    observeDownloadByItemId: ObserveDownloadByItemId,
     private val updateItemDetail: UpdateItemDetail,
     private val observeCreatorItems: ObserveCreatorItems,
     private val updateItems: UpdateItems,
     private val addRecentItem: AddRecentItem,
     private val observeFavoriteStatus: ObserveFavoriteStatus,
     private val updateFavorite: UpdateFavorite,
+    private val postRecommendationEvent: PostRecommendationEvent,
     private val playbackConnection: PlaybackConnection,
     private val navigator: Navigator,
     private val remoteConfig: RemoteConfig,
@@ -73,13 +81,14 @@ class ItemDetailViewModel @Inject constructor(
         observeCreatorItems.flow,
         observeFavoriteStatus.flow,
         loadingState.observable,
-    ) { itemDetail, itemsByCreator, isFavorite, isLoading ->
-        debug { "ItemDetailViewModel: $itemDetail" }
+        observeDownloadByItemId.flow
+    ) { itemDetail, itemsByCreator, isFavorite, isLoading, downloadItem ->
         ItemDetailViewState(
             itemDetail = itemDetail,
             itemsByCreator = itemsByCreator,
             isFavorite = isFavorite,
-            isLoading = isLoading
+            isLoading = isLoading,
+            downloadItem = downloadItem
         )
     }.stateInDefault(
         scope = viewModelScope,
@@ -89,6 +98,12 @@ class ItemDetailViewModel @Inject constructor(
     init {
         observeItemDetail(ObserveItemDetail.Param(itemId))
         observeFavoriteStatus(ObserveFavoriteStatus.Params(itemId))
+        observeDownloadByItemId(
+            ObserveDownloadByItemId.Params(
+                itemId = itemId,
+                statuses = listOf(DownloadStatus.COMPLETED)
+            )
+        )
 
         refresh()
     }
@@ -109,9 +124,12 @@ class ItemDetailViewModel @Inject constructor(
             analytics.log { playItem(itemId) }
             playbackConnection.playAlbum(itemId)
         } else {
-            analytics.log { readItem(itemId) }
             openReader(itemId)
         }
+
+        viewModelScope.launch {
+            postRecommendationEvent.invoke(RecommendationEvent.UseContent(itemId)).collect()
+        }
     }
 
     fun openFiles(itemId: String) {
@@ -121,11 +139,22 @@ class ItemDetailViewModel @Inject constructor(
 
     private fun openReader(itemId: String) {
         val itemDetail = state.value.itemDetail
-        itemDetail?.primaryFile?.let {
+
+        if (itemDetail?.primaryFile != null) {
             addRecentItem(itemId)
-            navigator.navigate(Screen.Reader.createRoute(navigator.currentRoot.value, it))
-        } ?: viewModelScope.launch {
-            snackbarManager.addMessage(UiMessage(R.string.file_type_is_not_supported))
+
+            if (state.value.downloadItem == null && remoteConfig.isOnlineReaderEnabled()) {
+                analytics.log { readItem(itemId = itemId, type = "online") }
+                navigator.navigate(OnlineReader.createRoute(currentRoot, itemDetail.itemId))
+            } else {
+                analytics.log { readItem(itemId = itemId, type = "offline") }
+                navigator.navigate(Reader.createRoute(currentRoot, itemDetail.primaryFile!!))
+            }
+        } else {
+            analytics.log { fileNotSupported(itemId = itemId) }
+            viewModelScope.launch {
+                snackbarManager.addMessage(UiMessage(R.string.file_type_is_not_supported))
+            }
         }
     }
 
@@ -172,7 +201,7 @@ class ItemDetailViewModel @Inject constructor(
     fun isShareEnabled() = remoteConfig.isShareEnabled() && state.value.itemDetail != null
 
     fun shareItemText(context: Context) {
-        analytics.log { this.shareItem(itemId) }
+        analytics.log { this.shareItem(itemId, "item_detail") }
         val itemTitle = state.value.itemDetail!!.title
 
         val link = DeepLinksNavigation.findUri(Navigation.ItemDetail(itemId)).toString()
diff --git a/ui/item/src/main/java/org/kafka/item/detail/ItemDetailViewState.kt b/ui/item/src/main/java/org/kafka/item/detail/ItemDetailViewState.kt
index 3bc963f7..41fe0deb 100644
--- a/ui/item/src/main/java/org/kafka/item/detail/ItemDetailViewState.kt
+++ b/ui/item/src/main/java/org/kafka/item/detail/ItemDetailViewState.kt
@@ -3,6 +3,7 @@ package org.kafka.item.detail
 import androidx.compose.runtime.Immutable
 import com.kafka.data.entities.Item
 import com.kafka.data.entities.ItemDetail
+import com.kafka.data.feature.item.ItemWithDownload
 import kotlinx.collections.immutable.ImmutableList
 import org.kafka.base.debug
 
@@ -11,7 +12,8 @@ data class ItemDetailViewState(
     val isFavorite: Boolean = false,
     val itemDetail: ItemDetail? = null,
     val itemsByCreator: ImmutableList<Item>? = null,
-    val isLoading: Boolean = false
+    val isLoading: Boolean = false,
+    val downloadItem: ItemWithDownload? = null
 ) {
     val hasItemsByCreator
         get() = !itemsByCreator.isNullOrEmpty()
diff --git a/ui/item/src/main/java/org/kafka/item/fake/FakeItemData.kt b/ui/item/src/main/java/org/kafka/item/fake/FakeItemData.kt
index cfeea400..1a1cbb7e 100644
--- a/ui/item/src/main/java/org/kafka/item/fake/FakeItemData.kt
+++ b/ui/item/src/main/java/org/kafka/item/fake/FakeItemData.kt
@@ -30,9 +30,9 @@ object FakeItemData {
         coverImage = coverUrl,
     )
 
-    val items = persistentListOf(item0, item1, item2)
+    val fakeItems = persistentListOf(item0, item1, item2)
 
-    val itemDetail = ItemDetail(
+    val fakeItemDetail = ItemDetail(
         itemId = "123",
         title = "Metamorphosis",
         creator = "Franz Kafka",
diff --git a/ui/reader/build.gradle b/ui/reader/build.gradle
index ebc2fec8..46f0f915 100644
--- a/ui/reader/build.gradle
+++ b/ui/reader/build.gradle
@@ -27,6 +27,7 @@ dependencies {
     implementation project(':ui:common')
     implementation project(':ui:components')
     implementation project(':ui:downloader')
+    implementation project(':ui:webview')
     implementation libs.hilt.android
     implementation libs.pdfviewer
 
diff --git a/ui/reader/src/main/java/com/kafka/reader/DownloadProgress.kt b/ui/reader/src/main/java/com/kafka/reader/DownloadProgress.kt
index 0e937bec..266afbc4 100644
--- a/ui/reader/src/main/java/com/kafka/reader/DownloadProgress.kt
+++ b/ui/reader/src/main/java/com/kafka/reader/DownloadProgress.kt
@@ -105,7 +105,7 @@ private fun Progress(progress: Float) {
         verticalAlignment = Alignment.CenterVertically
     ) {
         LinearProgressIndicator(
-            progress = progressState,
+            progress = { progressState },
             modifier = Modifier
                 .height(Dimens.Spacing04)
                 .weight(1f)
diff --git a/ui/reader/src/main/java/com/kafka/reader/ReaderViewModel.kt b/ui/reader/src/main/java/com/kafka/reader/ReaderViewModel.kt
index 10fe6cd2..b6f96684 100644
--- a/ui/reader/src/main/java/com/kafka/reader/ReaderViewModel.kt
+++ b/ui/reader/src/main/java/com/kafka/reader/ReaderViewModel.kt
@@ -14,13 +14,13 @@ import org.kafka.base.extensions.stateInDefault
 import org.kafka.common.UiMessageManager
 import org.kafka.common.snackbar.UiMessage
 import org.kafka.domain.observers.ObserveRecentTextItem
-import org.kafka.domain.observers.library.ObserveDownloadItem
+import org.kafka.domain.observers.library.ObserveDownloadByFileId
 import tm.alashow.datmusic.downloader.Downloader
 import javax.inject.Inject
 
 @HiltViewModel
 class ReaderViewModel @Inject constructor(
-    private val observeDownloadItem: ObserveDownloadItem,
+    private val observeDownloadByFileId: ObserveDownloadByFileId,
     private val observeRecentItem: ObserveRecentTextItem,
     private val downloader: Downloader,
     savedStateHandle: SavedStateHandle
@@ -29,7 +29,7 @@ class ReaderViewModel @Inject constructor(
     private var fileId = savedStateHandle.getStateFlow("fileId", "")
 
     val readerState = combine(
-        observeDownloadItem.flow,
+        observeDownloadByFileId.flow,
         observeRecentItem.flow,
         uiMessageManager.message,
     ) { download, readable, message ->
@@ -43,7 +43,7 @@ class ReaderViewModel @Inject constructor(
         }
 
         viewModelScope.launch {
-            observeDownloadItem(fileId.value)
+            observeDownloadByFileId(fileId.value)
         }
 
         viewModelScope.launch {
diff --git a/ui/reader/src/main/java/com/kafka/reader/online/OnlineReader.kt b/ui/reader/src/main/java/com/kafka/reader/online/OnlineReader.kt
new file mode 100644
index 00000000..c5b1d192
--- /dev/null
+++ b/ui/reader/src/main/java/com/kafka/reader/online/OnlineReader.kt
@@ -0,0 +1,99 @@
+package com.kafka.reader.online
+
+import android.annotation.SuppressLint
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.navigationBarsPadding
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.LinearProgressIndicator
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Scaffold
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalContext
+import androidx.hilt.navigation.compose.hiltViewModel
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
+import com.google.accompanist.web.WebViewState
+import kotlinx.coroutines.flow.MutableStateFlow
+import org.kafka.common.image.Icons
+import org.kafka.common.widgets.IconButton
+import org.kafka.ui.components.ProvideScaffoldPadding
+import org.kafka.ui.components.material.CloseButton
+import org.kafka.ui.components.material.TopBar
+import org.kafka.ui.components.topScaffoldPadding
+import com.google.accompanist.web.WebView as AccompanistWebView
+
+@SuppressLint("SetJavaScriptEnabled")
+@Composable
+fun OnlineReader(viewModel: OnlineReaderViewModel = hiltViewModel()) {
+    val webViewState by viewModel.webViewState.collectAsStateWithLifecycle()
+
+    Scaffold(
+        modifier = Modifier,
+        topBar = {
+            if (webViewState != null) {
+                TopBar(webViewState = webViewState!!, viewModel = viewModel)
+            }
+        }
+    ) { paddingValues ->
+        ProvideScaffoldPadding(padding = paddingValues) {
+            if (webViewState != null) {
+                WebView(webViewState = webViewState!!, urlState = viewModel.urlState)
+            }
+        }
+    }
+}
+
+@SuppressLint("SetJavaScriptEnabled")
+@Composable
+private fun WebView(
+    webViewState: WebViewState,
+    urlState: MutableStateFlow<String>,
+    modifier: Modifier = Modifier
+) {
+    AccompanistWebView(
+        state = webViewState,
+        modifier = modifier
+            .fillMaxSize()
+            .padding(top = topScaffoldPadding())
+            .navigationBarsPadding(),
+        onCreated = {
+            it.settings.javaScriptEnabled = true
+        },
+        client = remember { ReaderWebViewClient(urlState) }
+    )
+}
+
+@Composable
+private fun TopBar(webViewState: WebViewState, viewModel: OnlineReaderViewModel) {
+    val context = LocalContext.current
+
+    Column {
+        TopBar(
+            title = webViewState.pageTitle.orEmpty(),
+            navigationIcon = { CloseButton(onClick = viewModel::goBack) },
+            actions = {
+                if (webViewState.lastLoadedUrl != null) {
+                    ShareUrlIcon { viewModel.shareItem(context = context) }
+                }
+            }
+        )
+
+        AnimatedVisibility(webViewState.isLoading) {
+            LinearProgressIndicator(modifier = Modifier.fillMaxWidth())
+        }
+    }
+}
+
+@Composable
+private fun ShareUrlIcon(onClick: () -> Unit) {
+    IconButton(
+        imageVector = Icons.Share,
+        onClick = onClick,
+        tint = MaterialTheme.colorScheme.primary
+    )
+}
diff --git a/ui/reader/src/main/java/com/kafka/reader/online/OnlineReaderViewModel.kt b/ui/reader/src/main/java/com/kafka/reader/online/OnlineReaderViewModel.kt
new file mode 100644
index 00000000..de2987eb
--- /dev/null
+++ b/ui/reader/src/main/java/com/kafka/reader/online/OnlineReaderViewModel.kt
@@ -0,0 +1,90 @@
+package com.kafka.reader.online
+
+import android.content.Context
+import androidx.lifecycle.SavedStateHandle
+import androidx.lifecycle.ViewModel
+import androidx.lifecycle.viewModelScope
+import com.google.accompanist.web.WebContent
+import com.google.accompanist.web.WebViewState
+import dagger.hilt.android.lifecycle.HiltViewModel
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.collect
+import kotlinx.coroutines.flow.collectLatest
+import kotlinx.coroutines.flow.distinctUntilChanged
+import kotlinx.coroutines.flow.map
+import kotlinx.coroutines.launch
+import org.kafka.analytics.logger.Analytics
+import org.kafka.base.domain.onException
+import org.kafka.base.extensions.stateInDefault
+import org.kafka.common.asUiMessage
+import org.kafka.common.shareText
+import org.kafka.common.snackbar.SnackbarManager
+import org.kafka.domain.interactors.GetReaderState
+import org.kafka.domain.interactors.ReaderState
+import org.kafka.domain.interactors.UpdateCurrentPage
+import org.kafka.domain.interactors.getCurrentPageFromReaderUrl
+import org.kafka.navigation.Navigator
+import org.kafka.navigation.deeplink.DeepLinksNavigation
+import org.kafka.navigation.deeplink.Navigation
+import org.kafka.reader.R
+import javax.inject.Inject
+
+@HiltViewModel
+class OnlineReaderViewModel @Inject constructor(
+    private val getReaderState: GetReaderState,
+    private val updateCurrentPage: UpdateCurrentPage,
+    private val navigator: Navigator,
+    private val snackbarManager: SnackbarManager,
+    private val analytics: Analytics,
+    savedStateHandle: SavedStateHandle
+) : ViewModel() {
+    private val itemId: String = savedStateHandle["itemId"] ?: error("Url not provided")
+    private val readerState = MutableStateFlow<ReaderState?>(null)
+
+    val urlState = MutableStateFlow("")
+
+    val webViewState = readerState.map { state ->
+        state?.let { WebViewState(WebContent.Url(url = it.url)) }
+    }.distinctUntilChanged().stateInDefault(viewModelScope, null)
+
+    init {
+        viewModelScope.launch {
+            val result = getReaderState.invoke(itemId)
+            readerState.value = result.getOrNull()
+
+            result.onException {
+                snackbarManager.addMessage("Error loading reader".asUiMessage())
+            }
+        }
+
+        viewModelScope.launch {
+            urlState.collectLatest { url ->
+                updateCurrentPage(url)
+            }
+        }
+    }
+
+    private fun updateCurrentPage(url: String) {
+        viewModelScope.launch {
+            if (readerState.value != null) {
+                val currentPage = url.getCurrentPageFromReaderUrl()
+                val fileId = readerState.value!!.fileId
+                updateCurrentPage.invoke(UpdateCurrentPage.Params(fileId, currentPage)).collect()
+            }
+        }
+    }
+
+    fun shareItem(context: Context) {
+        analytics.log { this.shareItem(itemId = itemId, source = "reader") }
+        val itemTitle = readerState.value?.itemTitle
+
+        val link = DeepLinksNavigation.findUri(Navigation.ItemDetail(itemId)).toString()
+        val text = context.getString(R.string.check_out_on_kafka, itemTitle, link).trimIndent()
+
+        context.shareText(text)
+    }
+
+    fun goBack() {
+        navigator.goBack()
+    }
+}
diff --git a/ui/reader/src/main/java/com/kafka/reader/online/ReaderWebViewClient.kt b/ui/reader/src/main/java/com/kafka/reader/online/ReaderWebViewClient.kt
new file mode 100644
index 00000000..6b776e91
--- /dev/null
+++ b/ui/reader/src/main/java/com/kafka/reader/online/ReaderWebViewClient.kt
@@ -0,0 +1,17 @@
+package com.kafka.reader.online
+
+import android.webkit.WebView
+import com.google.accompanist.web.AccompanistWebViewClient
+import kotlinx.coroutines.flow.MutableStateFlow
+import org.kafka.base.debug
+
+class ReaderWebViewClient(
+    private val urlState: MutableStateFlow<String>
+) : AccompanistWebViewClient() {
+
+    override fun doUpdateVisitedHistory(view: WebView, url: String?, isReload: Boolean) {
+        urlState.value = url.orEmpty()
+        debug { "Reader url changed: $url" }
+        super.doUpdateVisitedHistory(view, url, isReload)
+    }
+}
diff --git a/ui/reader/src/main/res/values/strings.xml b/ui/reader/src/main/res/values/strings.xml
index 4ea3b9fd..68e5fe53 100644
--- a/ui/reader/src/main/res/values/strings.xml
+++ b/ui/reader/src/main/res/values/strings.xml
@@ -1,4 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
     <string name="downloading_hint" translatable="false">Download is in progress. You can leave this screen and we will notify you when it\'s complete.</string>
+    <string name="check_out_on_kafka" translatable="false">"\n            Check out %1$s on Kafka\n            \n            %2$s\n        "</string>
 </resources>
diff --git a/ui/search/src/main/java/com.kafka.search/SearchScreen.kt b/ui/search/src/main/java/com.kafka.search/SearchScreen.kt
index c41f47b2..72b543da 100644
--- a/ui/search/src/main/java/com.kafka.search/SearchScreen.kt
+++ b/ui/search/src/main/java/com.kafka.search/SearchScreen.kt
@@ -76,7 +76,7 @@ private fun Search(
 
     if (!searchViewState.items.isNullOrEmpty()) {
         LazyColumn(contentPadding = paddingValues) {
-            items(searchViewState.items!!) { item ->
+            items(searchViewState.items) { item ->
                 Item(
                     item = item,
                     modifier = Modifier
diff --git a/ui/search/src/main/java/com.kafka.search/SearchViewModel.kt b/ui/search/src/main/java/com.kafka.search/SearchViewModel.kt
index d78afb01..61b6ff73 100644
--- a/ui/search/src/main/java/com.kafka.search/SearchViewModel.kt
+++ b/ui/search/src/main/java/com.kafka.search/SearchViewModel.kt
@@ -41,13 +41,20 @@ class SearchViewModel @Inject constructor(
 
     val state: StateFlow<SearchViewState> = combine(
         savedStateHandle.getStateFlow(extraKeyword, ""),
-        savedStateHandle.getStateFlow(extraFilters, SearchFilter.allString())
+        savedStateHandle.getStateFlow(extraFilters, SearchFilter.Name.name)
             .map { SearchFilter.from(it) },
         observeSearchItems.flow,
         observeRecentSearch.flow,
-        loadingState.observable,
-        ::SearchViewState
-    ).stateInDefault(scope = viewModelScope, initialValue = SearchViewState())
+        loadingState.observable
+    ) { keyword, filters, items, recentSearches, isLoading ->
+        SearchViewState(
+            keyword = keyword,
+            filters = filters,
+            items = items,
+            recentSearches = recentSearches,
+            isLoading = isLoading
+        )
+    }.stateInDefault(scope = viewModelScope, initialValue = SearchViewState())
 
     init {
         val filters = savedStateHandle.get<String>(extraFilters) ?: SearchFilter.allString()
diff --git a/ui/search/src/main/java/com.kafka.search/SearchViewState.kt b/ui/search/src/main/java/com.kafka.search/SearchViewState.kt
index 57491ad3..2fdd7efe 100644
--- a/ui/search/src/main/java/com.kafka.search/SearchViewState.kt
+++ b/ui/search/src/main/java/com.kafka.search/SearchViewState.kt
@@ -2,12 +2,11 @@ package com.kafka.search
 
 import com.kafka.data.entities.Item
 import com.kafka.data.model.SearchFilter
-import org.kafka.common.snackbar.UiMessage
 
 data class SearchViewState(
     val keyword: String = "",
     val filters: List<SearchFilter> = SearchFilter.all(),
-    var items: List<Item>? = null,
+    val items: List<Item>? = null,
     val recentSearches: List<String>? = null,
     val isLoading: Boolean = false
 ) {
diff --git a/ui/theme/src/main/java/ui/common/theme/theme/Color.kt b/ui/theme/src/main/java/ui/common/theme/theme/Color.kt
index 30d16b9d..33226e9d 100644
--- a/ui/theme/src/main/java/ui/common/theme/theme/Color.kt
+++ b/ui/theme/src/main/java/ui/common/theme/theme/Color.kt
@@ -5,6 +5,7 @@ import androidx.compose.material3.ColorScheme
 import androidx.compose.material3.darkColorScheme
 import androidx.compose.material3.lightColorScheme
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.staticCompositionLocalOf
 import androidx.compose.ui.graphics.Color
 
 val brandBlue = Color(0xff0067DD)
@@ -17,8 +18,23 @@ val Asphalt = Color(0xFF2c3e50)
 
 val error = Color(0xffBA0550)
 
+enum class ThemeColor {
+    Light, Dark;
+
+    val isDark: Boolean
+        get() = this == Dark
+}
+
+val LocalThemeColor = staticCompositionLocalOf<ThemeColor> {
+    error("No LocalThemeColor given")
+}
+
 val ColorScheme.shadowMaterial
-    @Composable get() = if (isSystemInLightTheme()) primary.copy(alpha = 0.5f) else primary.copy(alpha = 0.2f)
+    @Composable get() = if (isSystemInLightTheme()) {
+        primary.copy(alpha = 0.5f)
+    } else {
+        primary.copy(alpha = 0.2f)
+    }
 
 @Composable
 fun isSystemInLightTheme() = !isSystemInDarkTheme()
diff --git a/ui/theme/src/main/java/ui/common/theme/theme/Specs.kt b/ui/theme/src/main/java/ui/common/theme/theme/Specs.kt
deleted file mode 100644
index 6890695f..00000000
--- a/ui/theme/src/main/java/ui/common/theme/theme/Specs.kt
+++ /dev/null
@@ -1,34 +0,0 @@
-package ui.common.theme.theme
-
-import androidx.compose.foundation.isSystemInDarkTheme
-import androidx.compose.foundation.layout.PaddingValues
-import androidx.compose.runtime.Composable
-import androidx.compose.ui.unit.Dp
-import androidx.compose.ui.unit.dp
-import javax.annotation.concurrent.Immutable
-
-val ContentPaddingLarge = 28.dp
-val ContentPadding = Dimens.Spacing16
-val ContentPaddingSmall = 8.dp
-val ContentPaddingTiny = 4.dp
-
-@Immutable
-data class Specs(
-    val padding: Dp = ContentPadding,
-    val paddingSmall: Dp = ContentPaddingSmall,
-    val paddingTiny: Dp = ContentPaddingTiny,
-    val paddingLarge: Dp = ContentPaddingLarge,
-    val iconSize: Dp = 24.dp,
-
-    val paddings: PaddingValues = PaddingValues(padding),
-    val inputPaddings: PaddingValues = PaddingValues(horizontal = padding, vertical = paddingSmall)
-)
-
-object AppBarAlphas {
-    @Composable
-    fun translucentBarAlpha(): Float = when {
-        isSystemInDarkTheme() -> 0.85f
-        else -> 0.92f
-    }
-}
-
diff --git a/ui/theme/src/main/java/ui/common/theme/theme/Theme.kt b/ui/theme/src/main/java/ui/common/theme/theme/Theme.kt
index 8354d3da..bb7c7473 100644
--- a/ui/theme/src/main/java/ui/common/theme/theme/Theme.kt
+++ b/ui/theme/src/main/java/ui/common/theme/theme/Theme.kt
@@ -9,6 +9,7 @@ import androidx.compose.material3.Typography
 import androidx.compose.material3.dynamicDarkColorScheme
 import androidx.compose.material3.dynamicLightColorScheme
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.SideEffect
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
@@ -22,24 +23,34 @@ import com.google.accompanist.systemuicontroller.rememberSystemUiController
 import com.kafka.data.prefs.PreferencesStore
 import com.kafka.data.prefs.Theme
 import com.kafka.data.prefs.observeTheme
+import com.kafka.data.prefs.observeTrueContrast
 
 @Composable
 fun AppTheme(
     dynamicColor: Boolean = isAtLeastS(),
     isDarkTheme: Boolean = isSystemInDarkTheme(),
+    isTrueContrast: Boolean = false,
     content: @Composable () -> Unit
 ) {
     val colorScheme = when {
         dynamicColor && isDarkTheme -> if (isAtLeastS()) {
-            dynamicDarkColorScheme(LocalContext.current)
-                .copy(background = Color.Black, surface = Color.Black)
+            if (isTrueContrast) {
+                dynamicDarkColorScheme(LocalContext.current)
+                    .copy(background = Color.Black, surface = Color.Black)
+            } else {
+                dynamicDarkColorScheme(LocalContext.current)
+            }
         } else {
             DarkAppColors
         }
 
         dynamicColor && !isDarkTheme -> if (isAtLeastS()) {
-            dynamicLightColorScheme(LocalContext.current)
-                .copy(background = Color.White, surface = Color.White)
+            if (isTrueContrast) {
+                dynamicLightColorScheme(LocalContext.current)
+                    .copy(background = Color.White, surface = Color.White)
+            } else {
+                dynamicLightColorScheme(LocalContext.current)
+            }
         } else {
             LightAppColors
         }
@@ -56,7 +67,11 @@ fun AppTheme(
         systemUiController.setNavigationBarColor(color = Color.Transparent, darkIcons = isLight)
     }
 
-    MaterialTheme(colorScheme = colorScheme, typography = KafkaTypography, content = content)
+    val themeColor = if (isDarkTheme) ThemeColor.Dark else ThemeColor.Light
+
+    CompositionLocalProvider(LocalThemeColor provides themeColor) {
+        MaterialTheme(colorScheme = colorScheme, typography = KafkaTypography, content = content)
+    }
 }
 
 val KafkaTypography by lazy {
@@ -125,3 +140,9 @@ fun PreferencesStore.shouldUseDarkColors(): Boolean {
         else -> isSystemInDarkTheme()
     }
 }
+
+@Composable
+fun PreferencesStore.shouldUseTrueContrast(): Boolean {
+    val themePreference by remember { observeTrueContrast() }.collectAsState(true)
+    return themePreference
+}
diff --git a/ui/webview/build.gradle b/ui/webview/build.gradle
index 3405765a..4451b869 100644
--- a/ui/webview/build.gradle
+++ b/ui/webview/build.gradle
@@ -21,7 +21,6 @@ dependencies {
     api project(':ui:common')
     api project(':ui:components')
     api libs.accompanist.flowlayout
-    api libs.accompanist.navigation.animation
     api libs.accompanist.navigation.material
     api libs.accompanist.placeholder
     api libs.accompanist.swiperefresh
diff --git a/ui/webview/src/main/java/org/kafka/webview/WebView.kt b/ui/webview/src/main/java/org/kafka/webview/WebView.kt
index f52659a6..be1e852f 100644
--- a/ui/webview/src/main/java/org/kafka/webview/WebView.kt
+++ b/ui/webview/src/main/java/org/kafka/webview/WebView.kt
@@ -7,12 +7,17 @@ import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.LinearProgressIndicator
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Scaffold
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalClipboardManager
+import androidx.compose.ui.text.AnnotatedString
 import com.google.accompanist.web.WebView
 import com.google.accompanist.web.rememberWebViewState
 import org.kafka.base.debug
+import org.kafka.common.image.Icons
+import org.kafka.common.widgets.IconButton
 import org.kafka.ui.components.ProvideScaffoldPadding
 import org.kafka.ui.components.material.BackButton
 import org.kafka.ui.components.material.TopBar
@@ -22,6 +27,7 @@ import org.kafka.ui.components.scaffoldPadding
 @Composable
 fun WebView(url: String, goBack: () -> Unit) {
     val webViewState = rememberWebViewState(url)
+    val clipboardManager = LocalClipboardManager.current
 
     debug { "Opening web page with url $url" }
 
@@ -29,13 +35,20 @@ fun WebView(url: String, goBack: () -> Unit) {
         Column {
             TopBar(
                 title = webViewState.pageTitle.orEmpty(),
-                navigationIcon = { BackButton { goBack() } })
+                navigationIcon = { BackButton { goBack() } },
+                actions = {
+                    if (webViewState.lastLoadedUrl != null) {
+                        val lastLoadedUrl = webViewState.lastLoadedUrl.orEmpty()
+                        CopyUrlIcon { clipboardManager.setText(AnnotatedString(lastLoadedUrl)) }
+                    }
+                }
+            )
             AnimatedVisibility(webViewState.isLoading) {
                 LinearProgressIndicator(modifier = Modifier.fillMaxWidth())
             }
         }
-    }) {
-        ProvideScaffoldPadding(padding = it) {
+    }) { paddingValues ->
+        ProvideScaffoldPadding(padding = paddingValues) {
             WebView(
                 state = webViewState,
                 modifier = Modifier
@@ -48,3 +61,12 @@ fun WebView(url: String, goBack: () -> Unit) {
         }
     }
 }
+
+@Composable
+private fun CopyUrlIcon(onClick: () -> Unit) {
+    IconButton(
+        imageVector = Icons.Copy,
+        onClick = onClick,
+        tint = MaterialTheme.colorScheme.primary
+    )
+}
diff --git a/website/gooey/404.html b/website/gooey/404.html
new file mode 100644
index 00000000..92992617
--- /dev/null
+++ b/website/gooey/404.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html lang="en" class="no-js">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Kafka Archives</title>
+    <meta name="description" content="Millions of text and audiobooks, all free and open source">
+    <meta name="keywords" content="Audiobooks, pdf, books, internet archive, archive.org, Kafka archives">
+    <meta name="author" content="Codrops">
+    <link rel="shortcut icon" href="favicon.ico">
+    <link rel="stylesheet" href="https://use.typekit.net/dba6omz.css">
+    <link rel="stylesheet" type="text/css" href="base.98fd6c19.css">
+    <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
+    <script>document.documentElement.className = "js";
+
+var supportsCssVars = function supportsCssVars() {
+  var e,
+      t = document.createElement("style");
+  return t.innerHTML = "root: { --tmp-var: bold; }", document.head.appendChild(t), e = !!(window.CSS && window.CSS.supports && window.CSS.supports("font-weight", "var(--tmp-var)")), t.parentNode.removeChild(t), e;
+};
+
+supportsCssVars() || alert("Please view this demo in a modern browser that supports CSS Variables.");</script>
+</head>
+
+<body class="demo-3 loading">
+<main>
+    <h1 class="title">Kafka Archives</h1>
+    <nav class="menu">
+        <a class="menu__item" href="https://play.google.com/store/apps/details?id=com.kafka.user">
+            <svg class="menu__text" viewBox="0 0 150 20" preserveAspectRatio="xMinYMid meet">
+                <defs>
+                    <filter id="goo-1">
+                        <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="blur"></feGaussianBlur>
+                        <feColorMatrix in="blur" mode="matrix" values="	1 0 0 0 0
+																			0 1 0 0 0
+																			1 0 1 0 0
+																			0 0 0 18 -8" result="goo"></feColorMatrix>
+                        <feComposite in="SourceGraphic" in2="goo" operator="atop"></feComposite>
+                    </filter>
+                </defs>
+                <g>
+                    <text x="0" y="15">Download</text>
+                    <text x="0" y="15">Play Store</text>
+                </g>
+            </svg>
+        </a>
+        <a class="menu__item" href="https://www.kafkaarchives.com">
+            <svg class="menu__text" viewBox="0 0 150 20" preserveAspectRatio="xMinYMid meet">
+                <defs>
+                    <filter id="goo-2">
+                        <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="blur"></feGaussianBlur>
+                        <feColorMatrix in="blur" mode="matrix" values="	1 0 0 0 0
+																			0 1 0 0 0
+																			1 0 1 0 0
+																			0 0 0 18 -8" result="goo"></feColorMatrix>
+                        <feComposite in="SourceGraphic" in2="goo" operator="atop"></feComposite>
+                    </filter>
+                </defs>
+                <g>
+                    <text x="0" y="15">Visit</text>
+                    <text x="0" y="15">Website</text>
+                </g>
+            </svg>
+        </a>
+        <a class="menu__item" href="https://github.com/vipulyaara/Kafka">
+            <svg class="menu__text" viewBox="0 0 150 20" preserveAspectRatio="xMinYMid meet">
+                <defs>
+                    <filter id="goo-3">
+                        <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="blur"></feGaussianBlur>
+                        <feColorMatrix in="blur" mode="matrix" values="	1 0 0 0 0
+																			0 1 0 0 0
+																			1 0 1 0 0
+																			0 0 0 18 -8" result="goo"></feColorMatrix>
+                        <feComposite in="SourceGraphic" in2="goo" operator="atop"></feComposite>
+                    </filter>
+                </defs>
+                <g>
+                    <text x="0" y="15">See Code</text>
+                    <text x="0" y="15">Github</text>
+                </g>
+            </svg>
+        </a>
+    </nav>
+</main>
+<script src="demo3.b516845c.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/website/gooey/base.98fd6c19.css b/website/gooey/base.98fd6c19.css
new file mode 100644
index 00000000..bdf6c1c0
--- /dev/null
+++ b/website/gooey/base.98fd6c19.css
@@ -0,0 +1,220 @@
+*,
+*::after,
+*::before {
+	box-sizing: border-box;
+}
+
+:root {
+	font-size: 18px;
+}
+
+body {
+	margin: 0;
+	--color-text: #fff;
+	--color-bg: #c2c6c9;
+	--color-link: #000;
+	--color-link-hover: #000;
+	--color-menu: #000;
+	--fontsize-menu: 16px;
+	--font-menu: titling-gothic-fb, sans-serif;
+	color: var(--color-text);
+	background-color: var(--color-bg);
+	font-family: nimbus-sans-extended, sans-serif;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	overflow-x: hidden;
+}
+
+.demo-3 {
+	--color-text: #fff;
+	--color-bg: #000;
+	--color-link: #fff;
+	--color-link-hover: #fff;
+	--color-menu: #fff;
+	--font-menu: laca-text, sans-serif;
+	--fontsize-menu: 18px;
+}
+
+/* Page Loader */
+.js .loading::before,
+.js .loading::after {
+    content: '';
+    position: fixed;
+    z-index: 1000;
+}
+
+.js .loading::before {
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: var(--color-bg);
+}
+
+.js .loading::after {
+    top: 50%;
+    left: 50%;
+    width: 60px;
+    height: 60px;
+    margin: -30px 0 0 -30px;
+    border-radius: 50%;
+    opacity: 0.4;
+    background: var(--color-link);
+    animation: loaderAnim 0.7s linear infinite alternate forwards;
+
+}
+
+@keyframes loaderAnim {
+    to {
+        opacity: 1;
+        transform: scale3d(0.5, 0.5, 1);
+    }
+}
+
+.hidden {
+	opacity: 0;
+	position: absolute;
+	pointer-events: none;
+	z-index: -1;
+}
+
+a {
+	text-decoration: none;
+	color: var(--color-link);
+	outline: none;
+	border-bottom: 2px solid;
+	transition: border-color 0.1s;
+}
+
+a:hover,
+a:focus {
+	color: var(--color-link-hover);
+	outline: none;
+	border-color: transparent;
+}
+
+main {
+	padding: 3rem 5vw;
+	position: relative;
+	z-index: 1000;
+}
+
+.title {
+	font-size: 1rem;
+	margin: 0 0 1rem;
+	font-weight: normal;
+}
+
+.links {
+	display: inline;
+}
+
+.demos {
+	margin: 1rem 0;
+}
+
+.demo--current,
+.demo--current:hover {
+	border-color: transparent;
+}
+
+.text--menu {
+	border: none;
+	color: var(--color-link);
+	margin: 1rem 0;
+}
+
+.credits a {
+	color: currentColor;
+}
+
+.menu {
+	width: 100%;
+	min-height: 400px;
+	display: grid;
+}
+
+.menu__item {
+    border: none;
+    transition: none;
+    cursor: pointer;
+    position: relative;
+}
+
+.menu__text {
+	font-size: var(--fontsize-menu);
+	fill: var(--color-menu);
+    display: block;
+    font-family: var(--font-menu);
+	font-weight: 700;
+    position: absolute;
+    height: 120%;
+    width: 100%;
+    pointer-events: none;
+}
+
+.menu__text text {
+	transform-origin: 50% 50%;
+	transform-box: view-box;
+}
+
+.menu__text text:nth-child(2) { 
+	opacity: 0;
+}
+
+@media screen and (min-width: 53em) {
+	main {
+		position: fixed;
+		z-index: 100;
+		top: 0;
+		left: 0;
+		display: grid;
+		justify-items: start;
+		width: 100%;
+		height: 100vh;
+		padding: 2rem 3rem;
+		grid-template-columns: 30% 30% 40%;
+		grid-template-rows: auto 10vh auto 2fr 5rem;
+		grid-template-areas: 'title text-menu text-subscribe'
+							'... ... ...'
+							'links menu menu'
+							'demos menu menu'
+							'credits ... ...';
+	}
+	.title {
+		grid-area: title;
+		margin: 0;
+	}
+	.demos {
+		margin: 0;
+		grid-area: demos;
+		display: flex;
+		flex-direction: column;
+	}
+	.demo, .links a {
+		margin-bottom: 0.5rem;
+	}
+	.links {
+		grid-area: links;
+		display: flex;
+		flex-direction: column;
+		margin-bottom: 3rem;
+		padding-top: 0.5rem;
+	}
+	.credits {
+		margin: 0;
+		grid-area: credits;
+		align-self: end;
+	}
+	.text--menu {
+		grid-area: text-menu;
+		margin: 0;
+	}
+	.text--subscribe {
+		grid-area: text-subscribe;
+		justify-self: end;
+	}
+	.menu {
+		grid-area: menu;
+	}
+}
diff --git a/website/gooey/demo3.b516845c.js b/website/gooey/demo3.b516845c.js
new file mode 100644
index 00000000..8e402b87
--- /dev/null
+++ b/website/gooey/demo3.b516845c.js
@@ -0,0 +1,5888 @@
+// modules are defined as an array
+// [ module function, map of requires ]
+//
+// map of requires is short require name -> numeric require
+//
+// anything defined in a previous bundle is accessed via the
+// orig method which is the require for previous bundles
+parcelRequire = (function (modules, cache, entry, globalName) {
+  // Save the require from previous bundle to this closure if any
+  var previousRequire = typeof parcelRequire === 'function' && parcelRequire;
+  var nodeRequire = typeof require === 'function' && require;
+
+  function newRequire(name, jumped) {
+    if (!cache[name]) {
+      if (!modules[name]) {
+        // if we cannot find the module within our internal map or
+        // cache jump to the current global require ie. the last bundle
+        // that was added to the page.
+        var currentRequire = typeof parcelRequire === 'function' && parcelRequire;
+        if (!jumped && currentRequire) {
+          return currentRequire(name, true);
+        }
+
+        // If there are other bundles on this page the require from the
+        // previous one is saved to 'previousRequire'. Repeat this as
+        // many times as there are bundles until the module is found or
+        // we exhaust the require chain.
+        if (previousRequire) {
+          return previousRequire(name, true);
+        }
+
+        // Try the node require function if it exists.
+        if (nodeRequire && typeof name === 'string') {
+          return nodeRequire(name);
+        }
+
+        var err = new Error('Cannot find module \'' + name + '\'');
+        err.code = 'MODULE_NOT_FOUND';
+        throw err;
+      }
+
+      localRequire.resolve = resolve;
+      localRequire.cache = {};
+
+      var module = cache[name] = new newRequire.Module(name);
+
+      modules[name][0].call(module.exports, localRequire, module, module.exports, this);
+    }
+
+    return cache[name].exports;
+
+    function localRequire(x){
+      return newRequire(localRequire.resolve(x));
+    }
+
+    function resolve(x){
+      return modules[name][1][x] || x;
+    }
+  }
+
+  function Module(moduleName) {
+    this.id = moduleName;
+    this.bundle = newRequire;
+    this.exports = {};
+  }
+
+  newRequire.isParcelRequire = true;
+  newRequire.Module = Module;
+  newRequire.modules = modules;
+  newRequire.cache = cache;
+  newRequire.parent = previousRequire;
+  newRequire.register = function (id, exports) {
+    modules[id] = [function (require, module) {
+      module.exports = exports;
+    }, {}];
+  };
+
+  var error;
+  for (var i = 0; i < entry.length; i++) {
+    try {
+      newRequire(entry[i]);
+    } catch (e) {
+      // Save first error but execute all entries
+      if (!error) {
+        error = e;
+      }
+    }
+  }
+
+  if (entry.length) {
+    // Expose entry point to Node, AMD or browser globals
+    // Based on https://github.com/ForbesLindesay/umd/blob/master/template.js
+    var mainExports = newRequire(entry[entry.length - 1]);
+
+    // CommonJS
+    if (typeof exports === "object" && typeof module !== "undefined") {
+      module.exports = mainExports;
+
+    // RequireJS
+    } else if (typeof define === "function" && define.amd) {
+     define(function () {
+       return mainExports;
+     });
+
+    // <script>
+    } else if (globalName) {
+      this[globalName] = mainExports;
+    }
+  }
+
+  // Override the current require with this new one
+  parcelRequire = newRequire;
+
+  if (error) {
+    // throw error from earlier, _after updating parcelRequire_
+    throw error;
+  }
+
+  return newRequire;
+})({"TNS6":[function(require,module,exports) {
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports._getCache = exports._getSetter = exports._missingPlugin = exports._round = exports._roundModifier = exports._config = exports._ticker = exports._plugins = exports._checkPlugin = exports._replaceRandom = exports._colorStringFilter = exports._sortPropTweensByPriority = exports._forEachName = exports._removeLinkedListItem = exports._setDefaults = exports._relExp = exports._renderComplexString = exports._isUndefined = exports._isString = exports._numWithUnitExp = exports._numExp = exports._getProperty = exports.shuffle = exports.interpolate = exports.unitize = exports.pipe = exports.mapRange = exports.toArray = exports.splitColor = exports.clamp = exports.getUnit = exports.normalize = exports.snap = exports.random = exports.distribute = exports.wrapYoyo = exports.wrap = exports.Circ = exports.Expo = exports.Sine = exports.Bounce = exports.SteppedEase = exports.Back = exports.Elastic = exports.Strong = exports.Quint = exports.Quart = exports.Cubic = exports.Quad = exports.Linear = exports.Power4 = exports.Power3 = exports.Power2 = exports.Power1 = exports.Power0 = exports.default = exports.gsap = exports.PropTween = exports.TweenLite = exports.TweenMax = exports.Tween = exports.TimelineLite = exports.TimelineMax = exports.Timeline = exports.Animation = exports.GSCache = void 0;
+
+function _assertThisInitialized(self) {
+  if (self === void 0) {
+    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+  }
+
+  return self;
+}
+
+function _inheritsLoose(subClass, superClass) {
+  subClass.prototype = Object.create(superClass.prototype);
+  subClass.prototype.constructor = subClass;
+  subClass.__proto__ = superClass;
+}
+/*!
+ * GSAP 3.2.6
+ * https://greensock.com
+ *
+ * @license Copyright 2008-2020, GreenSock. All rights reserved.
+ * Subject to the terms at https://greensock.com/standard-license or for
+ * Club GreenSock members, the agreement issued with that membership.
+ * @author: Jack Doyle, jack@greensock.com
+*/
+
+/* eslint-disable */
+
+
+var _config = {
+  autoSleep: 120,
+  force3D: "auto",
+  nullTargetWarn: 1,
+  units: {
+    lineHeight: ""
+  }
+},
+    _defaults = {
+  duration: .5,
+  overwrite: false,
+  delay: 0
+},
+    _bigNum = 1e8,
+    _tinyNum = 1 / _bigNum,
+    _2PI = Math.PI * 2,
+    _HALF_PI = _2PI / 4,
+    _gsID = 0,
+    _sqrt = Math.sqrt,
+    _cos = Math.cos,
+    _sin = Math.sin,
+    _isString = function _isString(value) {
+  return typeof value === "string";
+},
+    _isFunction = function _isFunction(value) {
+  return typeof value === "function";
+},
+    _isNumber = function _isNumber(value) {
+  return typeof value === "number";
+},
+    _isUndefined = function _isUndefined(value) {
+  return typeof value === "undefined";
+},
+    _isObject = function _isObject(value) {
+  return typeof value === "object";
+},
+    _isNotFalse = function _isNotFalse(value) {
+  return value !== false;
+},
+    _windowExists = function _windowExists() {
+  return typeof window !== "undefined";
+},
+    _isFuncOrString = function _isFuncOrString(value) {
+  return _isFunction(value) || _isString(value);
+},
+    _isArray = Array.isArray,
+    _strictNumExp = /(?:-?\.?\d|\.)+/gi,
+    //only numbers (including negatives and decimals) but NOT relative values.
+_numExp = /[-+=.]*\d+[.e\-+]*\d*[e\-\+]*\d*/g,
+    //finds any numbers, including ones that start with += or -=, negative numbers, and ones in scientific notation like 1e-8.
+_numWithUnitExp = /[-+=.]*\d+[.e-]*\d*[a-z%]*/g,
+    _complexStringNumExp = /[-+=.]*\d+(?:\.|e-|e)*\d*/gi,
+    //duplicate so that while we're looping through matches from exec(), it doesn't contaminate the lastIndex of _numExp which we use to search for colors too.
+_parenthesesExp = /\(([^()]+)\)/i,
+    //finds the string between parentheses.
+_relExp = /[+-]=-?[\.\d]+/,
+    _delimitedValueExp = /[#\-+.]*\b[a-z\d-=+%.]+/gi,
+    _globalTimeline,
+    _win,
+    _coreInitted,
+    _doc,
+    _globals = {},
+    _installScope = {},
+    _coreReady,
+    _install = function _install(scope) {
+  return (_installScope = _merge(scope, _globals)) && gsap;
+},
+    _missingPlugin = function _missingPlugin(property, value) {
+  return console.warn("Invalid property", property, "set to", value, "Missing plugin? gsap.registerPlugin()");
+},
+    _warn = function _warn(message, suppress) {
+  return !suppress && console.warn(message);
+},
+    _addGlobal = function _addGlobal(name, obj) {
+  return name && (_globals[name] = obj) && _installScope && (_installScope[name] = obj) || _globals;
+},
+    _emptyFunc = function _emptyFunc() {
+  return 0;
+},
+    _reservedProps = {},
+    _lazyTweens = [],
+    _lazyLookup = {},
+    _lastRenderedFrame,
+    _plugins = {},
+    _effects = {},
+    _nextGCFrame = 30,
+    _harnessPlugins = [],
+    _callbackNames = "",
+    _harness = function _harness(targets) {
+  var target = targets[0],
+      harnessPlugin,
+      i;
+
+  if (!_isObject(target) && !_isFunction(target)) {
+    targets = [targets];
+  }
+
+  if (!(harnessPlugin = (target._gsap || {}).harness)) {
+    i = _harnessPlugins.length;
+
+    while (i-- && !_harnessPlugins[i].targetTest(target)) {}
+
+    harnessPlugin = _harnessPlugins[i];
+  }
+
+  i = targets.length;
+
+  while (i--) {
+    targets[i] && (targets[i]._gsap || (targets[i]._gsap = new GSCache(targets[i], harnessPlugin))) || targets.splice(i, 1);
+  }
+
+  return targets;
+},
+    _getCache = function _getCache(target) {
+  return target._gsap || _harness(toArray(target))[0]._gsap;
+},
+    _getProperty = function _getProperty(target, property) {
+  var currentValue = target[property];
+  return _isFunction(currentValue) ? target[property]() : _isUndefined(currentValue) && target.getAttribute(property) || currentValue;
+},
+    _forEachName = function _forEachName(names, func) {
+  return (names = names.split(",")).forEach(func) || names;
+},
+    //split a comma-delimited list of names into an array, then run a forEach() function and return the split array (this is just a way to consolidate/shorten some code).
+_round = function _round(value) {
+  return Math.round(value * 100000) / 100000 || 0;
+},
+    _arrayContainsAny = function _arrayContainsAny(toSearch, toFind) {
+  //searches one array to find matches for any of the items in the toFind array. As soon as one is found, it returns true. It does NOT return all the matches; it's simply a boolean search.
+  var l = toFind.length,
+      i = 0;
+
+  for (; toSearch.indexOf(toFind[i]) < 0 && ++i < l;) {}
+
+  return i < l;
+},
+    _parseVars = function _parseVars(params, type, parent) {
+  //reads the arguments passed to one of the key methods and figures out if the user is defining things with the OLD/legacy syntax where the duration is the 2nd parameter, and then it adjusts things accordingly and spits back the corrected vars object (with the duration added if necessary, as well as runBackwards or startAt or immediateRender). type 0 = to()/staggerTo(), 1 = from()/staggerFrom(), 2 = fromTo()/staggerFromTo()
+  var isLegacy = _isNumber(params[1]),
+      varsIndex = (isLegacy ? 2 : 1) + (type < 2 ? 0 : 1),
+      vars = params[varsIndex],
+      irVars;
+
+  if (isLegacy) {
+    vars.duration = params[1];
+  }
+
+  vars.parent = parent;
+
+  if (type) {
+    irVars = vars;
+
+    while (parent && !("immediateRender" in irVars)) {
+      // inheritance hasn't happened yet, but someone may have set a default in an ancestor timeline. We could do vars.immediateRender = _isNotFalse(_inheritDefaults(vars).immediateRender) but that'd exact a slight performance penalty because _inheritDefaults() also runs in the Tween constructor. We're paying a small kb price here to gain speed.
+      irVars = parent.vars.defaults || {};
+      parent = _isNotFalse(parent.vars.inherit) && parent.parent;
+    }
+
+    vars.immediateRender = _isNotFalse(irVars.immediateRender);
+
+    if (type < 2) {
+      vars.runBackwards = 1;
+    } else {
+      vars.startAt = params[varsIndex - 1]; // "from" vars
+    }
+  }
+
+  return vars;
+},
+    _lazyRender = function _lazyRender() {
+  var l = _lazyTweens.length,
+      a = _lazyTweens.slice(0),
+      i,
+      tween;
+
+  _lazyLookup = {};
+  _lazyTweens.length = 0;
+
+  for (i = 0; i < l; i++) {
+    tween = a[i];
+
+    if (tween && tween._lazy) {
+      tween.render(tween._lazy[0], tween._lazy[1], true)._lazy = 0;
+    }
+  }
+},
+    _lazySafeRender = function _lazySafeRender(animation, time, suppressEvents, force) {
+  if (_lazyTweens.length) {
+    _lazyRender();
+  }
+
+  animation.render(time, suppressEvents, force);
+
+  if (_lazyTweens.length) {
+    //in case rendering caused any tweens to lazy-init, we should render them because typically when someone calls seek() or time() or progress(), they expect an immediate render.
+    _lazyRender();
+  }
+},
+    _numericIfPossible = function _numericIfPossible(value) {
+  var n = parseFloat(value);
+  return (n || n === 0) && (value + "").match(_delimitedValueExp).length < 2 ? n : value;
+},
+    _passThrough = function _passThrough(p) {
+  return p;
+},
+    _setDefaults = function _setDefaults(obj, defaults) {
+  for (var p in defaults) {
+    if (!(p in obj)) {
+      obj[p] = defaults[p];
+    }
+  }
+
+  return obj;
+},
+    _setKeyframeDefaults = function _setKeyframeDefaults(obj, defaults) {
+  for (var p in defaults) {
+    if (!(p in obj) && p !== "duration" && p !== "ease") {
+      obj[p] = defaults[p];
+    }
+  }
+},
+    _merge = function _merge(base, toMerge) {
+  for (var p in toMerge) {
+    base[p] = toMerge[p];
+  }
+
+  return base;
+},
+    _mergeDeep = function _mergeDeep(base, toMerge) {
+  for (var p in toMerge) {
+    base[p] = _isObject(toMerge[p]) ? _mergeDeep(base[p] || (base[p] = {}), toMerge[p]) : toMerge[p];
+  }
+
+  return base;
+},
+    _copyExcluding = function _copyExcluding(obj, excluding) {
+  var copy = {},
+      p;
+
+  for (p in obj) {
+    if (!(p in excluding)) {
+      copy[p] = obj[p];
+    }
+  }
+
+  return copy;
+},
+    _inheritDefaults = function _inheritDefaults(vars) {
+  var parent = vars.parent || _globalTimeline,
+      func = vars.keyframes ? _setKeyframeDefaults : _setDefaults;
+
+  if (_isNotFalse(vars.inherit)) {
+    while (parent) {
+      func(vars, parent.vars.defaults);
+      parent = parent.parent;
+    }
+  }
+
+  return vars;
+},
+    _arraysMatch = function _arraysMatch(a1, a2) {
+  var i = a1.length,
+      match = i === a2.length;
+
+  while (match && i-- && a1[i] === a2[i]) {}
+
+  return i < 0;
+},
+    _addLinkedListItem = function _addLinkedListItem(parent, child, firstProp, lastProp, sortBy) {
+  if (firstProp === void 0) {
+    firstProp = "_first";
+  }
+
+  if (lastProp === void 0) {
+    lastProp = "_last";
+  }
+
+  var prev = parent[lastProp],
+      t;
+
+  if (sortBy) {
+    t = child[sortBy];
+
+    while (prev && prev[sortBy] > t) {
+      prev = prev._prev;
+    }
+  }
+
+  if (prev) {
+    child._next = prev._next;
+    prev._next = child;
+  } else {
+    child._next = parent[firstProp];
+    parent[firstProp] = child;
+  }
+
+  if (child._next) {
+    child._next._prev = child;
+  } else {
+    parent[lastProp] = child;
+  }
+
+  child._prev = prev;
+  child.parent = child._dp = parent;
+  return child;
+},
+    _removeLinkedListItem = function _removeLinkedListItem(parent, child, firstProp, lastProp) {
+  if (firstProp === void 0) {
+    firstProp = "_first";
+  }
+
+  if (lastProp === void 0) {
+    lastProp = "_last";
+  }
+
+  var prev = child._prev,
+      next = child._next;
+
+  if (prev) {
+    prev._next = next;
+  } else if (parent[firstProp] === child) {
+    parent[firstProp] = next;
+  }
+
+  if (next) {
+    next._prev = prev;
+  } else if (parent[lastProp] === child) {
+    parent[lastProp] = prev;
+  }
+
+  child._next = child._prev = child.parent = null; // don't delete the _dp just so we can revert if necessary. But parent should be null to indicate the item isn't in a linked list.
+},
+    _removeFromParent = function _removeFromParent(child, onlyIfParentHasAutoRemove) {
+  if (child.parent && (!onlyIfParentHasAutoRemove || child.parent.autoRemoveChildren)) {
+    child.parent.remove(child);
+  }
+
+  child._act = 0;
+},
+    _uncache = function _uncache(animation) {
+  var a = animation;
+
+  while (a) {
+    a._dirty = 1;
+    a = a.parent;
+  }
+
+  return animation;
+},
+    _recacheAncestors = function _recacheAncestors(animation) {
+  var parent = animation.parent;
+
+  while (parent && parent.parent) {
+    //sometimes we must force a re-sort of all children and update the duration/totalDuration of all ancestor timelines immediately in case, for example, in the middle of a render loop, one tween alters another tween's timeScale which shoves its startTime before 0, forcing the parent timeline to shift around and shiftChildren() which could affect that next tween's render (startTime). Doesn't matter for the root timeline though.
+    parent._dirty = 1;
+    parent.totalDuration();
+    parent = parent.parent;
+  }
+
+  return animation;
+},
+    _hasNoPausedAncestors = function _hasNoPausedAncestors(animation) {
+  return !animation || animation._ts && _hasNoPausedAncestors(animation.parent);
+},
+    _elapsedCycleDuration = function _elapsedCycleDuration(animation) {
+  return animation._repeat ? _animationCycle(animation._tTime, animation = animation.duration() + animation._rDelay) * animation : 0;
+},
+    // feed in the totalTime and cycleDuration and it'll return the cycle (iteration minus 1) and if the playhead is exactly at the very END, it will NOT bump up to the next cycle.
+_animationCycle = function _animationCycle(tTime, cycleDuration) {
+  return (tTime /= cycleDuration) && ~~tTime === tTime ? ~~tTime - 1 : ~~tTime;
+},
+    _parentToChildTotalTime = function _parentToChildTotalTime(parentTime, child) {
+  return (parentTime - child._start) * child._ts + (child._ts >= 0 ? 0 : child._dirty ? child.totalDuration() : child._tDur);
+},
+    _setEnd = function _setEnd(animation) {
+  return animation._end = _round(animation._start + (animation._tDur / Math.abs(animation._ts || animation._rts || _tinyNum) || 0));
+},
+
+/*
+_totalTimeToTime = (clampedTotalTime, duration, repeat, repeatDelay, yoyo) => {
+	let cycleDuration = duration + repeatDelay,
+		time = _round(clampedTotalTime % cycleDuration);
+	if (time > duration) {
+		time = duration;
+	}
+	return (yoyo && (~~(clampedTotalTime / cycleDuration) & 1)) ? duration - time : time;
+},
+*/
+_postAddChecks = function _postAddChecks(timeline, child) {
+  var t;
+
+  if (child._time || child._initted && !child._dur) {
+    //in case, for example, the _start is moved on a tween that has already rendered. Imagine it's at its end state, then the startTime is moved WAY later (after the end of this timeline), it should render at its beginning.
+    t = _parentToChildTotalTime(timeline.rawTime(), child);
+
+    if (!child._dur || _clamp(0, child.totalDuration(), t) - child._tTime > _tinyNum) {
+      child.render(t, true);
+    }
+  } //if the timeline has already ended but the inserted tween/timeline extends the duration, we should enable this timeline again so that it renders properly. We should also align the playhead with the parent timeline's when appropriate.
+
+
+  if (_uncache(timeline)._dp && timeline._initted && timeline._time >= timeline._dur && timeline._ts) {
+    //in case any of the ancestors had completed but should now be enabled...
+    if (timeline._dur < timeline.duration()) {
+      t = timeline;
+
+      while (t._dp) {
+        t.rawTime() >= 0 && t.totalTime(t._tTime); //moves the timeline (shifts its startTime) if necessary, and also enables it. If it's currently zero, though, it may not be scheduled to render until later so there's no need to force it to align with the current playhead position. Only move to catch up with the playhead.
+
+        t = t._dp;
+      }
+    }
+
+    timeline._zTime = -_tinyNum; // helps ensure that the next render() will be forced (crossingStart = true in render()), even if the duration hasn't changed (we're adding a child which would need to get rendered). Definitely an edge case. Note: we MUST do this AFTER the loop above where the totalTime() might trigger a render() because this _addToTimeline() method gets called from the Animation constructor, BEFORE tweens even record their targets, etc. so we wouldn't want things to get triggered in the wrong order.
+  }
+},
+    _addToTimeline = function _addToTimeline(timeline, child, position, skipChecks) {
+  child.parent && _removeFromParent(child);
+  child._start = _round(position + child._delay);
+  child._end = _round(child._start + (child.totalDuration() / Math.abs(child.timeScale()) || 0));
+
+  _addLinkedListItem(timeline, child, "_first", "_last", timeline._sort ? "_start" : 0);
+
+  timeline._recent = child;
+  skipChecks || _postAddChecks(timeline, child);
+  return timeline;
+},
+    _attemptInitTween = function _attemptInitTween(tween, totalTime, force, suppressEvents) {
+  _initTween(tween, totalTime);
+
+  if (!tween._initted) {
+    return 1;
+  }
+
+  if (!force && tween._pt && (tween._dur && tween.vars.lazy !== false || !tween._dur && tween.vars.lazy) && _lastRenderedFrame !== _ticker.frame) {
+    _lazyTweens.push(tween);
+
+    tween._lazy = [totalTime, suppressEvents];
+    return 1;
+  }
+},
+    _renderZeroDurationTween = function _renderZeroDurationTween(tween, totalTime, suppressEvents, force) {
+  var prevRatio = tween._zTime < 0 ? 0 : 1,
+      ratio = totalTime < 0 ? 0 : 1,
+      repeatDelay = tween._rDelay,
+      tTime = 0,
+      pt,
+      iteration,
+      prevIteration;
+
+  if (repeatDelay && tween._repeat) {
+    //in case there's a zero-duration tween that has a repeat with a repeatDelay
+    tTime = _clamp(0, tween._tDur, totalTime);
+    iteration = _animationCycle(tTime, repeatDelay);
+    prevIteration = _animationCycle(tween._tTime, repeatDelay);
+
+    if (iteration !== prevIteration) {
+      prevRatio = 1 - ratio;
+
+      if (tween.vars.repeatRefresh && tween._initted) {
+        tween.invalidate();
+      }
+    }
+  }
+
+  if (!tween._initted && _attemptInitTween(tween, totalTime, force, suppressEvents)) {
+    //if we render the very beginning (time == 0) of a fromTo(), we must force the render (normal tweens wouldn't need to render at a time of 0 when the prevTime was also 0). This is also mandatory to make sure overwriting kicks in immediately.
+    return;
+  }
+
+  if (ratio !== prevRatio || force || tween._zTime === _tinyNum || !totalTime && tween._zTime) {
+    tween._zTime = totalTime || (suppressEvents ? _tinyNum : 0); //when the playhead arrives at EXACTLY time 0 (right on top) of a zero-duration tween, we need to discern if events are suppressed so that when the playhead moves again (next time), it'll trigger the callback. If events are NOT suppressed, obviously the callback would be triggered in this render. Basically, the callback should fire either when the playhead ARRIVES or LEAVES this exact spot, not both. Imagine doing a timeline.seek(0) and there's a callback that sits at 0. Since events are suppressed on that seek() by default, nothing will fire, but when the playhead moves off of that position, the callback should fire. This behavior is what people intuitively expect.
+
+    tween.ratio = ratio;
+
+    if (tween._from) {
+      ratio = 1 - ratio;
+    }
+
+    tween._time = 0;
+    tween._tTime = tTime;
+    suppressEvents || _callback(tween, "onStart");
+    pt = tween._pt;
+
+    while (pt) {
+      pt.r(ratio, pt.d);
+      pt = pt._next;
+    }
+
+    if (!ratio && tween._startAt && !tween._onUpdate && tween._start) {
+      //if the tween is positioned at the VERY beginning (_start 0) of its parent timeline, it's illegal for the playhead to go back further, so we should not render the recorded startAt values.
+      tween._startAt.render(totalTime, true, force);
+    }
+
+    tween._onUpdate && (suppressEvents || _callback(tween, "onUpdate"));
+
+    if (tTime && tween._repeat && !suppressEvents && tween.parent) {
+      _callback(tween, "onRepeat");
+    }
+
+    if ((totalTime >= tween._tDur || totalTime < 0) && tween.ratio === ratio) {
+      tween.ratio && _removeFromParent(tween, 1);
+
+      if (!suppressEvents) {
+        _callback(tween, tween.ratio ? "onComplete" : "onReverseComplete", true);
+
+        tween._prom && tween._prom();
+      }
+    }
+  }
+},
+    _findNextPauseTween = function _findNextPauseTween(animation, prevTime, time) {
+  var child;
+
+  if (time > prevTime) {
+    child = animation._first;
+
+    while (child && child._start <= time) {
+      if (!child._dur && child.data === "isPause" && child._start > prevTime) {
+        return child;
+      }
+
+      child = child._next;
+    }
+  } else {
+    child = animation._last;
+
+    while (child && child._start >= time) {
+      if (!child._dur && child.data === "isPause" && child._start < prevTime) {
+        return child;
+      }
+
+      child = child._prev;
+    }
+  }
+},
+    _setDuration = function _setDuration(animation, duration, skipUncache) {
+  var repeat = animation._repeat,
+      dur = _round(duration) || 0;
+  animation._dur = dur;
+  animation._tDur = !repeat ? dur : repeat < 0 ? 1e12 : _round(dur * (repeat + 1) + animation._rDelay * repeat);
+
+  if (animation._time > dur) {
+    animation._time = dur;
+    animation._tTime = Math.min(animation._tTime, animation._tDur);
+  }
+
+  !skipUncache && _uncache(animation.parent);
+  animation.parent && _setEnd(animation);
+  return animation;
+},
+    _onUpdateTotalDuration = function _onUpdateTotalDuration(animation) {
+  return animation instanceof Timeline ? _uncache(animation) : _setDuration(animation, animation._dur);
+},
+    _zeroPosition = {
+  _start: 0,
+  endTime: _emptyFunc
+},
+    _parsePosition = function _parsePosition(animation, position) {
+  var labels = animation.labels,
+      recent = animation._recent || _zeroPosition,
+      clippedDuration = animation.duration() >= _bigNum ? recent.endTime(false) : animation._dur,
+      //in case there's a child that infinitely repeats, users almost never intend for the insertion point of a new child to be based on a SUPER long value like that so we clip it and assume the most recently-added child's endTime should be used instead.
+  i,
+      offset;
+
+  if (_isString(position) && (isNaN(position) || position in labels)) {
+    //if the string is a number like "1", check to see if there's a label with that name, otherwise interpret it as a number (absolute value).
+    i = position.charAt(0);
+
+    if (i === "<" || i === ">") {
+      return (i === "<" ? recent._start : recent.endTime(recent._repeat >= 0)) + (parseFloat(position.substr(1)) || 0);
+    }
+
+    i = position.indexOf("=");
+
+    if (i < 0) {
+      if (!(position in labels)) {
+        labels[position] = clippedDuration;
+      }
+
+      return labels[position];
+    }
+
+    offset = +(position.charAt(i - 1) + position.substr(i + 1));
+    return i > 1 ? _parsePosition(animation, position.substr(0, i - 1)) + offset : clippedDuration + offset;
+  }
+
+  return position == null ? clippedDuration : +position;
+},
+    _conditionalReturn = function _conditionalReturn(value, func) {
+  return value || value === 0 ? func(value) : func;
+},
+    _clamp = function _clamp(min, max, value) {
+  return value < min ? min : value > max ? max : value;
+},
+    getUnit = function getUnit(value) {
+  return (value + "").substr((parseFloat(value) + "").length);
+},
+    clamp = function clamp(min, max, value) {
+  return _conditionalReturn(value, function (v) {
+    return _clamp(min, max, v);
+  });
+},
+    _slice = [].slice,
+    _isArrayLike = function _isArrayLike(value, nonEmpty) {
+  return value && _isObject(value) && "length" in value && (!nonEmpty && !value.length || value.length - 1 in value && _isObject(value[0])) && !value.nodeType && value !== _win;
+},
+    _flatten = function _flatten(ar, leaveStrings, accumulator) {
+  if (accumulator === void 0) {
+    accumulator = [];
+  }
+
+  return ar.forEach(function (value) {
+    var _accumulator;
+
+    return _isString(value) && !leaveStrings || _isArrayLike(value, 1) ? (_accumulator = accumulator).push.apply(_accumulator, toArray(value)) : accumulator.push(value);
+  }) || accumulator;
+},
+    //takes any value and returns an array. If it's a string (and leaveStrings isn't true), it'll use document.querySelectorAll() and convert that to an array. It'll also accept iterables like jQuery objects.
+toArray = function toArray(value, leaveStrings) {
+  return _isString(value) && !leaveStrings && (_coreInitted || !_wake()) ? _slice.call(_doc.querySelectorAll(value), 0) : _isArray(value) ? _flatten(value, leaveStrings) : _isArrayLike(value) ? _slice.call(value, 0) : value ? [value] : [];
+},
+    shuffle = function shuffle(a) {
+  return a.sort(function () {
+    return .5 - Math.random();
+  });
+},
+    // alternative that's a bit faster and more reliably diverse but bigger:   for (let j, v, i = a.length; i; j = ~~(Math.random() * i), v = a[--i], a[i] = a[j], a[j] = v); return a;
+//for distributing values across an array. Can accept a number, a function or (most commonly) a function which can contain the following properties: {base, amount, from, ease, grid, axis, length, each}. Returns a function that expects the following parameters: index, target, array. Recognizes the following
+distribute = function distribute(v) {
+  if (_isFunction(v)) {
+    return v;
+  }
+
+  var vars = _isObject(v) ? v : {
+    each: v
+  },
+      //n:1 is just to indicate v was a number; we leverage that later to set v according to the length we get. If a number is passed in, we treat it like the old stagger value where 0.1, for example, would mean that things would be distributed with 0.1 between each element in the array rather than a total "amount" that's chunked out among them all.
+  ease = _parseEase(vars.ease),
+      from = vars.from || 0,
+      base = parseFloat(vars.base) || 0,
+      cache = {},
+      isDecimal = from > 0 && from < 1,
+      ratios = isNaN(from) || isDecimal,
+      axis = vars.axis,
+      ratioX = from,
+      ratioY = from;
+
+  if (_isString(from)) {
+    ratioX = ratioY = {
+      center: .5,
+      edges: .5,
+      end: 1
+    }[from] || 0;
+  } else if (!isDecimal && ratios) {
+    ratioX = from[0];
+    ratioY = from[1];
+  }
+
+  return function (i, target, a) {
+    var l = (a || vars).length,
+        distances = cache[l],
+        originX,
+        originY,
+        x,
+        y,
+        d,
+        j,
+        max,
+        min,
+        wrapAt;
+
+    if (!distances) {
+      wrapAt = vars.grid === "auto" ? 0 : (vars.grid || [1, _bigNum])[1];
+
+      if (!wrapAt) {
+        max = -_bigNum;
+
+        while (max < (max = a[wrapAt++].getBoundingClientRect().left) && wrapAt < l) {}
+
+        wrapAt--;
+      }
+
+      distances = cache[l] = [];
+      originX = ratios ? Math.min(wrapAt, l) * ratioX - .5 : from % wrapAt;
+      originY = ratios ? l * ratioY / wrapAt - .5 : from / wrapAt | 0;
+      max = 0;
+      min = _bigNum;
+
+      for (j = 0; j < l; j++) {
+        x = j % wrapAt - originX;
+        y = originY - (j / wrapAt | 0);
+        distances[j] = d = !axis ? _sqrt(x * x + y * y) : Math.abs(axis === "y" ? y : x);
+
+        if (d > max) {
+          max = d;
+        }
+
+        if (d < min) {
+          min = d;
+        }
+      }
+
+      from === "random" && shuffle(distances);
+      distances.max = max - min;
+      distances.min = min;
+      distances.v = l = (parseFloat(vars.amount) || parseFloat(vars.each) * (wrapAt > l ? l - 1 : !axis ? Math.max(wrapAt, l / wrapAt) : axis === "y" ? l / wrapAt : wrapAt) || 0) * (from === "edges" ? -1 : 1);
+      distances.b = l < 0 ? base - l : base;
+      distances.u = getUnit(vars.amount || vars.each) || 0; //unit
+
+      ease = ease && l < 0 ? _invertEase(ease) : ease;
+    }
+
+    l = (distances[i] - distances.min) / distances.max || 0;
+    return _round(distances.b + (ease ? ease(l) : l) * distances.v) + distances.u; //round in order to work around floating point errors
+  };
+},
+    _roundModifier = function _roundModifier(v) {
+  //pass in 0.1 get a function that'll round to the nearest tenth, or 5 to round to the closest 5, or 0.001 to the closest 1000th, etc.
+  var p = v < 1 ? Math.pow(10, (v + "").length - 2) : 1; //to avoid floating point math errors (like 24 * 0.1 == 2.4000000000000004), we chop off at a specific number of decimal places (much faster than toFixed()
+
+  return function (raw) {
+    return ~~(Math.round(parseFloat(raw) / v) * v * p) / p + (_isNumber(raw) ? 0 : getUnit(raw));
+  };
+},
+    snap = function snap(snapTo, value) {
+  var isArray = _isArray(snapTo),
+      radius,
+      is2D;
+
+  if (!isArray && _isObject(snapTo)) {
+    radius = isArray = snapTo.radius || _bigNum;
+
+    if (snapTo.values) {
+      snapTo = toArray(snapTo.values);
+
+      if (is2D = !_isNumber(snapTo[0])) {
+        radius *= radius; //performance optimization so we don't have to Math.sqrt() in the loop.
+      }
+    } else {
+      snapTo = _roundModifier(snapTo.increment);
+    }
+  }
+
+  return _conditionalReturn(value, !isArray ? _roundModifier(snapTo) : _isFunction(snapTo) ? function (raw) {
+    is2D = snapTo(raw);
+    return Math.abs(is2D - raw) <= radius ? is2D : raw;
+  } : function (raw) {
+    var x = parseFloat(is2D ? raw.x : raw),
+        y = parseFloat(is2D ? raw.y : 0),
+        min = _bigNum,
+        closest = 0,
+        i = snapTo.length,
+        dx,
+        dy;
+
+    while (i--) {
+      if (is2D) {
+        dx = snapTo[i].x - x;
+        dy = snapTo[i].y - y;
+        dx = dx * dx + dy * dy;
+      } else {
+        dx = Math.abs(snapTo[i] - x);
+      }
+
+      if (dx < min) {
+        min = dx;
+        closest = i;
+      }
+    }
+
+    closest = !radius || min <= radius ? snapTo[closest] : raw;
+    return is2D || closest === raw || _isNumber(raw) ? closest : closest + getUnit(raw);
+  });
+},
+    random = function random(min, max, roundingIncrement, returnFunction) {
+  return _conditionalReturn(_isArray(min) ? !max : roundingIncrement === true ? !!(roundingIncrement = 0) : !returnFunction, function () {
+    return _isArray(min) ? min[~~(Math.random() * min.length)] : (roundingIncrement = roundingIncrement || 1e-5) && (returnFunction = roundingIncrement < 1 ? Math.pow(10, (roundingIncrement + "").length - 2) : 1) && ~~(Math.round((min + Math.random() * (max - min)) / roundingIncrement) * roundingIncrement * returnFunction) / returnFunction;
+  });
+},
+    pipe = function pipe() {
+  for (var _len = arguments.length, functions = new Array(_len), _key = 0; _key < _len; _key++) {
+    functions[_key] = arguments[_key];
+  }
+
+  return function (value) {
+    return functions.reduce(function (v, f) {
+      return f(v);
+    }, value);
+  };
+},
+    unitize = function unitize(func, unit) {
+  return function (value) {
+    return func(parseFloat(value)) + (unit || getUnit(value));
+  };
+},
+    normalize = function normalize(min, max, value) {
+  return mapRange(min, max, 0, 1, value);
+},
+    _wrapArray = function _wrapArray(a, wrapper, value) {
+  return _conditionalReturn(value, function (index) {
+    return a[~~wrapper(index)];
+  });
+},
+    wrap = function wrap(min, max, value) {
+  // NOTE: wrap() CANNOT be an arrow function! A very odd compiling bug causes problems (unrelated to GSAP).
+  var range = max - min;
+  return _isArray(min) ? _wrapArray(min, wrap(0, min.length), max) : _conditionalReturn(value, function (value) {
+    return (range + (value - min) % range) % range + min;
+  });
+},
+    wrapYoyo = function wrapYoyo(min, max, value) {
+  var range = max - min,
+      total = range * 2;
+  return _isArray(min) ? _wrapArray(min, wrapYoyo(0, min.length - 1), max) : _conditionalReturn(value, function (value) {
+    value = (total + (value - min) % total) % total;
+    return min + (value > range ? total - value : value);
+  });
+},
+    _replaceRandom = function _replaceRandom(value) {
+  //replaces all occurrences of random(...) in a string with the calculated random value. can be a range like random(-100, 100, 5) or an array like random([0, 100, 500])
+  var prev = 0,
+      s = "",
+      i,
+      nums,
+      end,
+      isArray;
+
+  while (~(i = value.indexOf("random(", prev))) {
+    end = value.indexOf(")", i);
+    isArray = value.charAt(i + 7) === "[";
+    nums = value.substr(i + 7, end - i - 7).match(isArray ? _delimitedValueExp : _strictNumExp);
+    s += value.substr(prev, i - prev) + random(isArray ? nums : +nums[0], +nums[1], +nums[2] || 1e-5);
+    prev = end + 1;
+  }
+
+  return s + value.substr(prev, value.length - prev);
+},
+    mapRange = function mapRange(inMin, inMax, outMin, outMax, value) {
+  var inRange = inMax - inMin,
+      outRange = outMax - outMin;
+  return _conditionalReturn(value, function (value) {
+    return outMin + (value - inMin) / inRange * outRange;
+  });
+},
+    interpolate = function interpolate(start, end, progress, mutate) {
+  var func = isNaN(start + end) ? 0 : function (p) {
+    return (1 - p) * start + p * end;
+  };
+
+  if (!func) {
+    var isString = _isString(start),
+        master = {},
+        p,
+        i,
+        interpolators,
+        l,
+        il;
+
+    progress === true && (mutate = 1) && (progress = null);
+
+    if (isString) {
+      start = {
+        p: start
+      };
+      end = {
+        p: end
+      };
+    } else if (_isArray(start) && !_isArray(end)) {
+      interpolators = [];
+      l = start.length;
+      il = l - 2;
+
+      for (i = 1; i < l; i++) {
+        interpolators.push(interpolate(start[i - 1], start[i])); //build the interpolators up front as a performance optimization so that when the function is called many times, it can just reuse them.
+      }
+
+      l--;
+
+      func = function func(p) {
+        p *= l;
+        var i = Math.min(il, ~~p);
+        return interpolators[i](p - i);
+      };
+
+      progress = end;
+    } else if (!mutate) {
+      start = _merge(_isArray(start) ? [] : {}, start);
+    }
+
+    if (!interpolators) {
+      for (p in end) {
+        _addPropTween.call(master, start, p, "get", end[p]);
+      }
+
+      func = function func(p) {
+        return _renderPropTweens(p, master) || (isString ? start.p : start);
+      };
+    }
+  }
+
+  return _conditionalReturn(progress, func);
+},
+    _getLabelInDirection = function _getLabelInDirection(timeline, fromTime, backward) {
+  //used for nextLabel() and previousLabel()
+  var labels = timeline.labels,
+      min = _bigNum,
+      p,
+      distance,
+      label;
+
+  for (p in labels) {
+    distance = labels[p] - fromTime;
+
+    if (distance < 0 === !!backward && distance && min > (distance = Math.abs(distance))) {
+      label = p;
+      min = distance;
+    }
+  }
+
+  return label;
+},
+    _callback = function _callback(animation, type, executeLazyFirst) {
+  var v = animation.vars,
+      callback = v[type],
+      params,
+      scope;
+
+  if (!callback) {
+    return;
+  }
+
+  params = v[type + "Params"];
+  scope = v.callbackScope || animation;
+  executeLazyFirst && _lazyTweens.length && _lazyRender(); //in case rendering caused any tweens to lazy-init, we should render them because typically when a timeline finishes, users expect things to have rendered fully. Imagine an onUpdate on a timeline that reports/checks tweened values.
+
+  return params ? callback.apply(scope, params) : callback.call(scope);
+},
+    _interrupt = function _interrupt(animation) {
+  _removeFromParent(animation);
+
+  if (animation.progress() < 1) {
+    _callback(animation, "onInterrupt");
+  }
+
+  return animation;
+},
+    _quickTween,
+    _createPlugin = function _createPlugin(config) {
+  config = !config.name && config["default"] || config; //UMD packaging wraps things oddly, so for example MotionPathHelper becomes {MotionPathHelper:MotionPathHelper, default:MotionPathHelper}.
+
+  var name = config.name,
+      isFunc = _isFunction(config),
+      Plugin = name && !isFunc && config.init ? function () {
+    this._props = [];
+  } : config,
+      //in case someone passes in an object that's not a plugin, like CustomEase
+  instanceDefaults = {
+    init: _emptyFunc,
+    render: _renderPropTweens,
+    add: _addPropTween,
+    kill: _killPropTweensOf,
+    modifier: _addPluginModifier,
+    rawVars: 0
+  },
+      statics = {
+    targetTest: 0,
+    get: 0,
+    getSetter: _getSetter,
+    aliases: {},
+    register: 0
+  };
+
+  _wake();
+
+  if (config !== Plugin) {
+    if (_plugins[name]) {
+      return;
+    }
+
+    _setDefaults(Plugin, _setDefaults(_copyExcluding(config, instanceDefaults), statics)); //static methods
+
+
+    _merge(Plugin.prototype, _merge(instanceDefaults, _copyExcluding(config, statics))); //instance methods
+
+
+    _plugins[Plugin.prop = name] = Plugin;
+
+    if (config.targetTest) {
+      _harnessPlugins.push(Plugin);
+
+      _reservedProps[name] = 1;
+    }
+
+    name = (name === "css" ? "CSS" : name.charAt(0).toUpperCase() + name.substr(1)) + "Plugin"; //for the global name. "motionPath" should become MotionPathPlugin
+  }
+
+  _addGlobal(name, Plugin);
+
+  if (config.register) {
+    config.register(gsap, Plugin, PropTween);
+  }
+},
+
+/*
+ * --------------------------------------------------------------------------------------
+ * COLORS
+ * --------------------------------------------------------------------------------------
+ */
+_255 = 255,
+    _colorLookup = {
+  aqua: [0, _255, _255],
+  lime: [0, _255, 0],
+  silver: [192, 192, 192],
+  black: [0, 0, 0],
+  maroon: [128, 0, 0],
+  teal: [0, 128, 128],
+  blue: [0, 0, _255],
+  navy: [0, 0, 128],
+  white: [_255, _255, _255],
+  olive: [128, 128, 0],
+  yellow: [_255, _255, 0],
+  orange: [_255, 165, 0],
+  gray: [128, 128, 128],
+  purple: [128, 0, 128],
+  green: [0, 128, 0],
+  red: [_255, 0, 0],
+  pink: [_255, 192, 203],
+  cyan: [0, _255, _255],
+  transparent: [_255, _255, _255, 0]
+},
+    _hue = function _hue(h, m1, m2) {
+  h = h < 0 ? h + 1 : h > 1 ? h - 1 : h;
+  return (h * 6 < 1 ? m1 + (m2 - m1) * h * 6 : h < .5 ? m2 : h * 3 < 2 ? m1 + (m2 - m1) * (2 / 3 - h) * 6 : m1) * _255 + .5 | 0;
+},
+    splitColor = function splitColor(v, toHSL, forceAlpha) {
+  var a = !v ? _colorLookup.black : _isNumber(v) ? [v >> 16, v >> 8 & _255, v & _255] : 0,
+      r,
+      g,
+      b,
+      h,
+      s,
+      l,
+      max,
+      min,
+      d,
+      wasHSL;
+
+  if (!a) {
+    if (v.substr(-1) === ",") {
+      //sometimes a trailing comma is included and we should chop it off (typically from a comma-delimited list of values like a textShadow:"2px 2px 2px blue, 5px 5px 5px rgb(255,0,0)" - in this example "blue," has a trailing comma. We could strip it out inside parseComplex() but we'd need to do it to the beginning and ending values plus it wouldn't provide protection from other potential scenarios like if the user passes in a similar value.
+      v = v.substr(0, v.length - 1);
+    }
+
+    if (_colorLookup[v]) {
+      a = _colorLookup[v];
+    } else if (v.charAt(0) === "#") {
+      if (v.length === 4) {
+        //for shorthand like #9F0
+        r = v.charAt(1);
+        g = v.charAt(2);
+        b = v.charAt(3);
+        v = "#" + r + r + g + g + b + b;
+      }
+
+      v = parseInt(v.substr(1), 16);
+      a = [v >> 16, v >> 8 & _255, v & _255];
+    } else if (v.substr(0, 3) === "hsl") {
+      a = wasHSL = v.match(_strictNumExp);
+
+      if (!toHSL) {
+        h = +a[0] % 360 / 360;
+        s = +a[1] / 100;
+        l = +a[2] / 100;
+        g = l <= .5 ? l * (s + 1) : l + s - l * s;
+        r = l * 2 - g;
+
+        if (a.length > 3) {
+          a[3] *= 1; //cast as number
+        }
+
+        a[0] = _hue(h + 1 / 3, r, g);
+        a[1] = _hue(h, r, g);
+        a[2] = _hue(h - 1 / 3, r, g);
+      } else if (~v.indexOf("=")) {
+        //if relative values are found, just return the raw strings with the relative prefixes in place.
+        a = v.match(_numExp);
+        forceAlpha && a.length < 4 && (a[3] = 1);
+        return a;
+      }
+    } else {
+      a = v.match(_strictNumExp) || _colorLookup.transparent;
+    }
+
+    a = a.map(Number);
+  }
+
+  if (toHSL && !wasHSL) {
+    r = a[0] / _255;
+    g = a[1] / _255;
+    b = a[2] / _255;
+    max = Math.max(r, g, b);
+    min = Math.min(r, g, b);
+    l = (max + min) / 2;
+
+    if (max === min) {
+      h = s = 0;
+    } else {
+      d = max - min;
+      s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+      h = max === r ? (g - b) / d + (g < b ? 6 : 0) : max === g ? (b - r) / d + 2 : (r - g) / d + 4;
+      h *= 60;
+    }
+
+    a[0] = ~~(h + .5);
+    a[1] = ~~(s * 100 + .5);
+    a[2] = ~~(l * 100 + .5);
+  }
+
+  forceAlpha && a.length < 4 && (a[3] = 1);
+  return a;
+},
+    _colorOrderData = function _colorOrderData(v) {
+  // strips out the colors from the string, finds all the numeric slots (with units) and returns an array of those. The Array also has a "c" property which is an Array of the index values where the colors belong. This is to help work around issues where there's a mis-matched order of color/numeric data like drop-shadow(#f00 0px 1px 2px) and drop-shadow(0x 1px 2px #f00). This is basically a helper function used in _formatColors()
+  var values = [],
+      c = [],
+      i = -1;
+  v.split(_colorExp).forEach(function (v) {
+    var a = v.match(_numWithUnitExp) || [];
+    values.push.apply(values, a);
+    c.push(i += a.length + 1);
+  });
+  values.c = c;
+  return values;
+},
+    _formatColors = function _formatColors(s, toHSL, orderMatchData) {
+  var result = "",
+      colors = (s + result).match(_colorExp),
+      type = toHSL ? "hsla(" : "rgba(",
+      i = 0,
+      c,
+      shell,
+      d,
+      l;
+
+  if (!colors) {
+    return s;
+  }
+
+  colors = colors.map(function (color) {
+    return (color = splitColor(color, toHSL, 1)) && type + (toHSL ? color[0] + "," + color[1] + "%," + color[2] + "%," + color[3] : color.join(",")) + ")";
+  });
+
+  if (orderMatchData) {
+    d = _colorOrderData(s);
+    c = orderMatchData.c;
+
+    if (c.join(result) !== d.c.join(result)) {
+      shell = s.replace(_colorExp, "1").split(_numWithUnitExp);
+      l = shell.length - 1;
+
+      for (; i < l; i++) {
+        result += shell[i] + (~c.indexOf(i) ? colors.shift() || type + "0,0,0,0)" : (d.length ? d : colors.length ? colors : orderMatchData).shift());
+      }
+    }
+  }
+
+  if (!shell) {
+    shell = s.split(_colorExp);
+    l = shell.length - 1;
+
+    for (; i < l; i++) {
+      result += shell[i] + colors[i];
+    }
+  }
+
+  return result + shell[l];
+},
+    _colorExp = function () {
+  var s = "(?:\\b(?:(?:rgb|rgba|hsl|hsla)\\(.+?\\))|\\B#(?:[0-9a-f]{3}){1,2}\\b",
+      //we'll dynamically build this Regular Expression to conserve file size. After building it, it will be able to find rgb(), rgba(), # (hexadecimal), and named color values like red, blue, purple, etc.,
+  p;
+
+  for (p in _colorLookup) {
+    s += "|" + p + "\\b";
+  }
+
+  return new RegExp(s + ")", "gi");
+}(),
+    _hslExp = /hsl[a]?\(/,
+    _colorStringFilter = function _colorStringFilter(a) {
+  var combined = a.join(" "),
+      toHSL;
+  _colorExp.lastIndex = 0;
+
+  if (_colorExp.test(combined)) {
+    toHSL = _hslExp.test(combined);
+    a[1] = _formatColors(a[1], toHSL);
+    a[0] = _formatColors(a[0], toHSL, _colorOrderData(a[1])); // make sure the order of numbers/colors match with the END value.
+
+    return true;
+  }
+},
+
+/*
+ * --------------------------------------------------------------------------------------
+ * TICKER
+ * --------------------------------------------------------------------------------------
+ */
+_tickerActive,
+    _ticker = function () {
+  var _getTime = Date.now,
+      _lagThreshold = 500,
+      _adjustedLag = 33,
+      _startTime = _getTime(),
+      _lastUpdate = _startTime,
+      _gap = 1 / 240,
+      _nextTime = _gap,
+      _listeners = [],
+      _id,
+      _req,
+      _raf,
+      _self,
+      _tick = function _tick(v) {
+    var elapsed = _getTime() - _lastUpdate,
+        manual = v === true,
+        overlap,
+        dispatch;
+
+    if (elapsed > _lagThreshold) {
+      _startTime += elapsed - _adjustedLag;
+    }
+
+    _lastUpdate += elapsed;
+    _self.time = (_lastUpdate - _startTime) / 1000;
+    overlap = _self.time - _nextTime;
+
+    if (overlap > 0 || manual) {
+      _self.frame++;
+      _nextTime += overlap + (overlap >= _gap ? 0.004 : _gap - overlap);
+      dispatch = 1;
+    }
+
+    if (!manual) {
+      //make sure the request is made before we dispatch the "tick" event so that timing is maintained. Otherwise, if processing the "tick" requires a bunch of time (like 15ms) and we're using a setTimeout() that's based on 16.7ms, it'd technically take 31.7ms between frames otherwise.
+      _id = _req(_tick);
+    }
+
+    if (dispatch) {
+      _listeners.forEach(function (l) {
+        return l(_self.time, elapsed, _self.frame, v);
+      });
+    }
+  };
+
+  _self = {
+    time: 0,
+    frame: 0,
+    tick: function tick() {
+      _tick(true);
+    },
+    wake: function wake() {
+      if (_coreReady) {
+        if (!_coreInitted && _windowExists()) {
+          _win = _coreInitted = window;
+          _doc = _win.document || {};
+          _globals.gsap = gsap;
+          (_win.gsapVersions || (_win.gsapVersions = [])).push(gsap.version);
+
+          _install(_installScope || _win.GreenSockGlobals || !_win.gsap && _win || {});
+
+          _raf = _win.requestAnimationFrame;
+        }
+
+        _id && _self.sleep();
+
+        _req = _raf || function (f) {
+          return setTimeout(f, (_nextTime - _self.time) * 1000 + 1 | 0);
+        };
+
+        _tickerActive = 1;
+
+        _tick(2);
+      }
+    },
+    sleep: function sleep() {
+      (_raf ? _win.cancelAnimationFrame : clearTimeout)(_id);
+      _tickerActive = 0;
+      _req = _emptyFunc;
+    },
+    lagSmoothing: function lagSmoothing(threshold, adjustedLag) {
+      _lagThreshold = threshold || 1 / _tinyNum; //zero should be interpreted as basically unlimited
+
+      _adjustedLag = Math.min(adjustedLag, _lagThreshold, 0);
+    },
+    fps: function fps(_fps) {
+      _gap = 1 / (_fps || 240);
+      _nextTime = _self.time + _gap;
+    },
+    add: function add(callback) {
+      _listeners.indexOf(callback) < 0 && _listeners.push(callback);
+
+      _wake();
+    },
+    remove: function remove(callback) {
+      var i;
+      ~(i = _listeners.indexOf(callback)) && _listeners.splice(i, 1);
+    },
+    _listeners: _listeners
+  };
+  return _self;
+}(),
+    _wake = function _wake() {
+  return !_tickerActive && _ticker.wake();
+},
+    //also ensures the core classes are initialized.
+
+/*
+* -------------------------------------------------
+* EASING
+* -------------------------------------------------
+*/
+_easeMap = {},
+    _customEaseExp = /^[\d.\-M][\d.\-,\s]/,
+    _quotesExp = /["']/g,
+    _parseObjectInString = function _parseObjectInString(value) {
+  //takes a string like "{wiggles:10, type:anticipate})" and turns it into a real object. Notice it ends in ")" and includes the {} wrappers. This is because we only use this function for parsing ease configs and prioritized optimization rather than reusability.
+  var obj = {},
+      split = value.substr(1, value.length - 3).split(":"),
+      key = split[0],
+      i = 1,
+      l = split.length,
+      index,
+      val,
+      parsedVal;
+
+  for (; i < l; i++) {
+    val = split[i];
+    index = i !== l - 1 ? val.lastIndexOf(",") : val.length;
+    parsedVal = val.substr(0, index);
+    obj[key] = isNaN(parsedVal) ? parsedVal.replace(_quotesExp, "").trim() : +parsedVal;
+    key = val.substr(index + 1).trim();
+  }
+
+  return obj;
+},
+    _configEaseFromString = function _configEaseFromString(name) {
+  //name can be a string like "elastic.out(1,0.5)", and pass in _easeMap as obj and it'll parse it out and call the actual function like _easeMap.Elastic.easeOut.config(1,0.5). It will also parse custom ease strings as long as CustomEase is loaded and registered (internally as _easeMap._CE).
+  var split = (name + "").split("("),
+      ease = _easeMap[split[0]];
+  return ease && split.length > 1 && ease.config ? ease.config.apply(null, ~name.indexOf("{") ? [_parseObjectInString(split[1])] : _parenthesesExp.exec(name)[1].split(",").map(_numericIfPossible)) : _easeMap._CE && _customEaseExp.test(name) ? _easeMap._CE("", name) : ease;
+},
+    _invertEase = function _invertEase(ease) {
+  return function (p) {
+    return 1 - ease(1 - p);
+  };
+},
+    // potential future feature - allow yoyoEase to be set in children and have those affected when the parent/ancestor timeline yoyos. Not sure it's worth the kb.
+// _propagateYoyoEase = (timeline, isYoyo) => {
+// 	let child = timeline._first, ease;
+// 	while (child) {
+// 		if (child instanceof Timeline) {
+// 			_propagateYoyoEase(child, isYoyo);
+// 		} else if (child.vars.yoyoEase && (!child._yoyo || !child._repeat) && child._yoyo !== isYoyo) {
+// 			if (child.timeline) {
+// 				_propagateYoyoEase(child.timeline, isYoyo);
+// 			} else {
+// 				ease = child._ease;
+// 				child._ease = child._yEase;
+// 				child._yEase = ease;
+// 				child._yoyo = isYoyo;
+// 			}
+// 		}
+// 		child = child._next;
+// 	}
+// },
+_parseEase = function _parseEase(ease, defaultEase) {
+  return !ease ? defaultEase : (_isFunction(ease) ? ease : _easeMap[ease] || _configEaseFromString(ease)) || defaultEase;
+},
+    _insertEase = function _insertEase(names, easeIn, easeOut, easeInOut) {
+  if (easeOut === void 0) {
+    easeOut = function easeOut(p) {
+      return 1 - easeIn(1 - p);
+    };
+  }
+
+  if (easeInOut === void 0) {
+    easeInOut = function easeInOut(p) {
+      return p < .5 ? easeIn(p * 2) / 2 : 1 - easeIn((1 - p) * 2) / 2;
+    };
+  }
+
+  var ease = {
+    easeIn: easeIn,
+    easeOut: easeOut,
+    easeInOut: easeInOut
+  },
+      lowercaseName;
+
+  _forEachName(names, function (name) {
+    _easeMap[name] = _globals[name] = ease;
+    _easeMap[lowercaseName = name.toLowerCase()] = easeOut;
+
+    for (var p in ease) {
+      _easeMap[lowercaseName + (p === "easeIn" ? ".in" : p === "easeOut" ? ".out" : ".inOut")] = _easeMap[name + "." + p] = ease[p];
+    }
+  });
+
+  return ease;
+},
+    _easeInOutFromOut = function _easeInOutFromOut(easeOut) {
+  return function (p) {
+    return p < .5 ? (1 - easeOut(1 - p * 2)) / 2 : .5 + easeOut((p - .5) * 2) / 2;
+  };
+},
+    _configElastic = function _configElastic(type, amplitude, period) {
+  var p1 = amplitude >= 1 ? amplitude : 1,
+      //note: if amplitude is < 1, we simply adjust the period for a more natural feel. Otherwise the math doesn't work right and the curve starts at 1.
+  p2 = (period || (type ? .3 : .45)) / (amplitude < 1 ? amplitude : 1),
+      p3 = p2 / _2PI * (Math.asin(1 / p1) || 0),
+      easeOut = function easeOut(p) {
+    return p === 1 ? 1 : p1 * Math.pow(2, -10 * p) * _sin((p - p3) * p2) + 1;
+  },
+      ease = type === "out" ? easeOut : type === "in" ? function (p) {
+    return 1 - easeOut(1 - p);
+  } : _easeInOutFromOut(easeOut);
+
+  p2 = _2PI / p2; //precalculate to optimize
+
+  ease.config = function (amplitude, period) {
+    return _configElastic(type, amplitude, period);
+  };
+
+  return ease;
+},
+    _configBack = function _configBack(type, overshoot) {
+  if (overshoot === void 0) {
+    overshoot = 1.70158;
+  }
+
+  var easeOut = function easeOut(p) {
+    return p ? --p * p * ((overshoot + 1) * p + overshoot) + 1 : 0;
+  },
+      ease = type === "out" ? easeOut : type === "in" ? function (p) {
+    return 1 - easeOut(1 - p);
+  } : _easeInOutFromOut(easeOut);
+
+  ease.config = function (overshoot) {
+    return _configBack(type, overshoot);
+  };
+
+  return ease;
+}; // a cheaper (kb and cpu) but more mild way to get a parameterized weighted ease by feeding in a value between -1 (easeIn) and 1 (easeOut) where 0 is linear.
+// _weightedEase = ratio => {
+// 	let y = 0.5 + ratio / 2;
+// 	return p => (2 * (1 - p) * p * y + p * p);
+// },
+// a stronger (but more expensive kb/cpu) parameterized weighted ease that lets you feed in a value between -1 (easeIn) and 1 (easeOut) where 0 is linear.
+// _weightedEaseStrong = ratio => {
+// 	ratio = .5 + ratio / 2;
+// 	let o = 1 / 3 * (ratio < .5 ? ratio : 1 - ratio),
+// 		b = ratio - o,
+// 		c = ratio + o;
+// 	return p => p === 1 ? p : 3 * b * (1 - p) * (1 - p) * p + 3 * c * (1 - p) * p * p + p * p * p;
+// };
+
+
+exports._ticker = _ticker;
+exports._colorStringFilter = _colorStringFilter;
+exports.splitColor = splitColor;
+exports.interpolate = interpolate;
+exports.mapRange = mapRange;
+exports._replaceRandom = _replaceRandom;
+exports.wrapYoyo = wrapYoyo;
+exports.wrap = wrap;
+exports.normalize = normalize;
+exports.unitize = unitize;
+exports.pipe = pipe;
+exports.random = random;
+exports.snap = snap;
+exports._roundModifier = _roundModifier;
+exports.distribute = distribute;
+exports.shuffle = shuffle;
+exports.toArray = toArray;
+exports.clamp = clamp;
+exports.getUnit = getUnit;
+exports._removeLinkedListItem = _removeLinkedListItem;
+exports._setDefaults = _setDefaults;
+exports._round = _round;
+exports._forEachName = _forEachName;
+exports._getProperty = _getProperty;
+exports._getCache = _getCache;
+exports._plugins = _plugins;
+exports._missingPlugin = _missingPlugin;
+exports._relExp = _relExp;
+exports._numWithUnitExp = _numWithUnitExp;
+exports._numExp = _numExp;
+exports._isUndefined = _isUndefined;
+exports._isString = _isString;
+exports._config = _config;
+
+_forEachName("Linear,Quad,Cubic,Quart,Quint,Strong", function (name, i) {
+  var power = i < 5 ? i + 1 : i;
+
+  _insertEase(name + ",Power" + (power - 1), i ? function (p) {
+    return Math.pow(p, power);
+  } : function (p) {
+    return p;
+  }, function (p) {
+    return 1 - Math.pow(1 - p, power);
+  }, function (p) {
+    return p < .5 ? Math.pow(p * 2, power) / 2 : 1 - Math.pow((1 - p) * 2, power) / 2;
+  });
+});
+
+_easeMap.Linear.easeNone = _easeMap.none = _easeMap.Linear.easeIn;
+
+_insertEase("Elastic", _configElastic("in"), _configElastic("out"), _configElastic());
+
+(function (n, c) {
+  var n1 = 1 / c,
+      n2 = 2 * n1,
+      n3 = 2.5 * n1,
+      easeOut = function easeOut(p) {
+    return p < n1 ? n * p * p : p < n2 ? n * Math.pow(p - 1.5 / c, 2) + .75 : p < n3 ? n * (p -= 2.25 / c) * p + .9375 : n * Math.pow(p - 2.625 / c, 2) + .984375;
+  };
+
+  _insertEase("Bounce", function (p) {
+    return 1 - easeOut(1 - p);
+  }, easeOut);
+})(7.5625, 2.75);
+
+_insertEase("Expo", function (p) {
+  return p ? Math.pow(2, 10 * (p - 1)) : 0;
+});
+
+_insertEase("Circ", function (p) {
+  return -(_sqrt(1 - p * p) - 1);
+});
+
+_insertEase("Sine", function (p) {
+  return -_cos(p * _HALF_PI) + 1;
+});
+
+_insertEase("Back", _configBack("in"), _configBack("out"), _configBack());
+
+_easeMap.SteppedEase = _easeMap.steps = _globals.SteppedEase = {
+  config: function config(steps, immediateStart) {
+    if (steps === void 0) {
+      steps = 1;
+    }
+
+    var p1 = 1 / steps,
+        p2 = steps + (immediateStart ? 0 : 1),
+        p3 = immediateStart ? 1 : 0,
+        max = 1 - _tinyNum;
+    return function (p) {
+      return ((p2 * _clamp(0, max, p) | 0) + p3) * p1;
+    };
+  }
+};
+_defaults.ease = _easeMap["quad.out"];
+
+_forEachName("onComplete,onUpdate,onStart,onRepeat,onReverseComplete,onInterrupt", function (name) {
+  return _callbackNames += name + "," + name + "Params,";
+});
+/*
+ * --------------------------------------------------------------------------------------
+ * CACHE
+ * --------------------------------------------------------------------------------------
+ */
+
+
+var GSCache = function GSCache(target, harness) {
+  this.id = _gsID++;
+  target._gsap = this;
+  this.target = target;
+  this.harness = harness;
+  this.get = harness ? harness.get : _getProperty;
+  this.set = harness ? harness.getSetter : _getSetter;
+};
+/*
+ * --------------------------------------------------------------------------------------
+ * ANIMATION
+ * --------------------------------------------------------------------------------------
+ */
+
+
+exports.GSCache = GSCache;
+
+var Animation = /*#__PURE__*/function () {
+  function Animation(vars, time) {
+    var parent = vars.parent || _globalTimeline;
+    this.vars = vars;
+    this._delay = +vars.delay || 0;
+
+    if (this._repeat = vars.repeat || 0) {
+      this._rDelay = vars.repeatDelay || 0;
+      this._yoyo = !!vars.yoyo || !!vars.yoyoEase;
+    }
+
+    this._ts = 1;
+
+    _setDuration(this, +vars.duration, 1);
+
+    this.data = vars.data;
+    _tickerActive || _ticker.wake();
+    parent && _addToTimeline(parent, this, time || time === 0 ? time : parent._time, 1);
+    vars.reversed && this.reverse();
+    vars.paused && this.paused(true);
+  }
+
+  var _proto = Animation.prototype;
+
+  _proto.delay = function delay(value) {
+    if (value || value === 0) {
+      this.parent && this.parent.smoothChildTiming && this.startTime(this._start + value - this._delay);
+      this._delay = value;
+      return this;
+    }
+
+    return this._delay;
+  };
+
+  _proto.duration = function duration(value) {
+    return arguments.length ? this.totalDuration(this._repeat > 0 ? value + (value + this._rDelay) * this._repeat : value) : this.totalDuration() && this._dur;
+  };
+
+  _proto.totalDuration = function totalDuration(value) {
+    if (!arguments.length) {
+      return this._tDur;
+    }
+
+    this._dirty = 0;
+    return _setDuration(this, this._repeat < 0 ? value : (value - this._repeat * this._rDelay) / (this._repeat + 1));
+  };
+
+  _proto.totalTime = function totalTime(_totalTime, suppressEvents) {
+    _wake();
+
+    if (!arguments.length) {
+      return this._tTime;
+    }
+
+    var parent = this.parent || this._dp;
+
+    if (parent && parent.smoothChildTiming && this._ts) {
+      // if (!parent._dp && parent._time === parent._dur) { // if a root timeline completes...and then a while later one of its children resumes, we must shoot the playhead forward to where it should be raw-wise, otherwise the child will jump to the end. Down side: this assumes it's using the _ticker.time as a reference.
+      // 	parent._time = _ticker.time - parent._start;
+      // }
+      this._start = _round(parent._time - (this._ts > 0 ? _totalTime / this._ts : ((this._dirty ? this.totalDuration() : this._tDur) - _totalTime) / -this._ts));
+
+      _setEnd(this);
+
+      if (!parent._dirty) {
+        //for performance improvement. If the parent's cache is already dirty, it already took care of marking the ancestors as dirty too, so skip the function call here.
+        _uncache(parent);
+      } //in case any of the ancestor timelines had completed but should now be enabled, we should reset their totalTime() which will also ensure that they're lined up properly and enabled. Skip for animations that are on the root (wasteful). Example: a TimelineLite.exportRoot() is performed when there's a paused tween on the root, the export will not complete until that tween is unpaused, but imagine a child gets restarted later, after all [unpaused] tweens have completed. The start of that child would get pushed out, but one of the ancestors may have completed.
+
+
+      while (parent.parent) {
+        if (parent.parent._time !== parent._start + (parent._ts >= 0 ? parent._tTime / parent._ts : (parent.totalDuration() - parent._tTime) / -parent._ts)) {
+          parent.totalTime(parent._tTime, true);
+        }
+
+        parent = parent.parent;
+      }
+
+      if (!this.parent && this._dp.autoRemoveChildren) {
+        //if the animation doesn't have a parent, put it back into its last parent (recorded as _dp for exactly cases like this). Limit to parents with autoRemoveChildren (like globalTimeline) so that if the user manually removes an animation from a timeline and then alters its playhead, it doesn't get added back in.
+        _addToTimeline(this._dp, this, this._start - this._delay);
+      }
+    }
+
+    if (this._tTime !== _totalTime || !this._dur && !suppressEvents || this._initted && Math.abs(this._zTime) === _tinyNum) {
+      this._ts || (this._pTime = _totalTime); // otherwise, if an animation is paused, then the playhead is moved back to zero, then resumed, it'd revert back to the original time at the pause
+
+      _lazySafeRender(this, _totalTime, suppressEvents);
+    }
+
+    return this;
+  };
+
+  _proto.time = function time(value, suppressEvents) {
+    return arguments.length ? this.totalTime(Math.min(this.totalDuration(), value + _elapsedCycleDuration(this)) % this._dur || (value ? this._dur : 0), suppressEvents) : this._time; // note: if the modulus results in 0, the playhead could be exactly at the end or the beginning, and we always defer to the END with a non-zero value, otherwise if you set the time() to the very end (duration()), it would render at the START!
+  };
+
+  _proto.totalProgress = function totalProgress(value, suppressEvents) {
+    return arguments.length ? this.totalTime(this.totalDuration() * value, suppressEvents) : this.totalDuration() ? Math.min(1, this._tTime / this._tDur) : this.ratio;
+  };
+
+  _proto.progress = function progress(value, suppressEvents) {
+    return arguments.length ? this.totalTime(this.duration() * (this._yoyo && !(this.iteration() & 1) ? 1 - value : value) + _elapsedCycleDuration(this), suppressEvents) : this.duration() ? Math.min(1, this._time / this._dur) : this.ratio;
+  };
+
+  _proto.iteration = function iteration(value, suppressEvents) {
+    var cycleDuration = this.duration() + this._rDelay;
+
+    return arguments.length ? this.totalTime(this._time + (value - 1) * cycleDuration, suppressEvents) : this._repeat ? _animationCycle(this._tTime, cycleDuration) + 1 : 1;
+  };
+
+  _proto.timeScale = function timeScale(value) {
+    if (!arguments.length) {
+      return this._rts === -_tinyNum ? 0 : this._rts; // recorded timeScale. Special case: if someone calls reverse() on an animation with timeScale of 0, we assign it -_tinyNum to remember it's reversed.
+    }
+
+    if (this._rts === value) {
+      return this;
+    }
+
+    var tTime = this.parent && this._ts ? _parentToChildTotalTime(this.parent._time, this) : this._tTime; // make sure to do the parentToChildTotalTime() BEFORE setting the new _ts because the old one must be used in that calculation.
+    // prioritize rendering where the parent's playhead lines up instead of this._tTime because there could be a tween that's animating another tween's timeScale in the same rendering loop (same parent), thus if the timeScale tween renders first, it would alter _start BEFORE _tTime was set on that tick (in the rendering loop), effectively freezing it until the timeScale tween finishes.
+
+    this._rts = +value || 0;
+    this._ts = this._ps || value === -_tinyNum ? 0 : this._rts; // _ts is the functional timeScale which would be 0 if the animation is paused.
+
+    return _recacheAncestors(this.totalTime(_clamp(0, this._tDur, tTime), true));
+  };
+
+  _proto.paused = function paused(value) {
+    if (!arguments.length) {
+      return this._ps;
+    }
+
+    if (this._ps !== value) {
+      this._ps = value;
+
+      if (value) {
+        this._pTime = this._tTime || Math.max(-this._delay, this.rawTime()); // if the pause occurs during the delay phase, make sure that's factored in when resuming.
+
+        this._ts = this._act = 0; // _ts is the functional timeScale, so a paused tween would effectively have a timeScale of 0. We record the "real" timeScale as _rts (recorded time scale)
+      } else {
+        _wake();
+
+        this._ts = this._rts; //only defer to _pTime (pauseTime) if tTime is zero. Remember, someone could pause() an animation, then scrub the playhead and resume(). If the parent doesn't have smoothChildTiming, we render at the rawTime() because the startTime won't get updated.
+
+        this.totalTime(this.parent && !this.parent.smoothChildTiming ? this.rawTime() : this._tTime || this._pTime, this.progress() === 1 && (this._tTime -= _tinyNum) && Math.abs(this._zTime) !== _tinyNum); // edge case: animation.progress(1).pause().play() wouldn't render again because the playhead is already at the end, but the call to totalTime() below will add it back to its parent...and not remove it again (since removing only happens upon rendering at a new time). Offsetting the _tTime slightly is done simply to cause the final render in totalTime() that'll pop it off its timeline (if autoRemoveChildren is true, of course). Check to make sure _zTime isn't -_tinyNum to avoid an edge case where the playhead is pushed to the end but INSIDE a tween/callback, the timeline itself is paused thus halting rendering and leaving a few unrendered. When resuming, it wouldn't render those otherwise.
+      }
+    }
+
+    return this;
+  };
+
+  _proto.startTime = function startTime(value) {
+    if (arguments.length) {
+      this._start = value;
+      var parent = this.parent || this._dp;
+      parent && (parent._sort || !this.parent) && _addToTimeline(parent, this, value - this._delay);
+      return this;
+    }
+
+    return this._start;
+  };
+
+  _proto.endTime = function endTime(includeRepeats) {
+    return this._start + (_isNotFalse(includeRepeats) ? this.totalDuration() : this.duration()) / Math.abs(this._ts);
+  };
+
+  _proto.rawTime = function rawTime(wrapRepeats) {
+    var parent = this.parent || this._dp; // _dp = detatched parent
+
+    return !parent ? this._tTime : wrapRepeats && (!this._ts || this._repeat && this._time && this.totalProgress() < 1) ? this._tTime % (this._dur + this._rDelay) : !this._ts ? this._tTime : _parentToChildTotalTime(parent.rawTime(wrapRepeats), this);
+  } // globalTime(rawTime) {
+  // 	let animation = this,
+  // 		time = arguments.length ? rawTime : animation.rawTime();
+  // 	while (animation) {
+  // 		time = animation._start + time / (animation._ts || 1);
+  // 		animation = animation.parent;
+  // 	}
+  // 	return time;
+  // }
+  ;
+
+  _proto.repeat = function repeat(value) {
+    if (arguments.length) {
+      this._repeat = value;
+      return _onUpdateTotalDuration(this);
+    }
+
+    return this._repeat;
+  };
+
+  _proto.repeatDelay = function repeatDelay(value) {
+    if (arguments.length) {
+      this._rDelay = value;
+      return _onUpdateTotalDuration(this);
+    }
+
+    return this._rDelay;
+  };
+
+  _proto.yoyo = function yoyo(value) {
+    if (arguments.length) {
+      this._yoyo = value;
+      return this;
+    }
+
+    return this._yoyo;
+  };
+
+  _proto.seek = function seek(position, suppressEvents) {
+    return this.totalTime(_parsePosition(this, position), _isNotFalse(suppressEvents));
+  };
+
+  _proto.restart = function restart(includeDelay, suppressEvents) {
+    return this.play().totalTime(includeDelay ? -this._delay : 0, _isNotFalse(suppressEvents));
+  };
+
+  _proto.play = function play(from, suppressEvents) {
+    if (from != null) {
+      this.seek(from, suppressEvents);
+    }
+
+    return this.reversed(false).paused(false);
+  };
+
+  _proto.reverse = function reverse(from, suppressEvents) {
+    if (from != null) {
+      this.seek(from || this.totalDuration(), suppressEvents);
+    }
+
+    return this.reversed(true).paused(false);
+  };
+
+  _proto.pause = function pause(atTime, suppressEvents) {
+    if (atTime != null) {
+      this.seek(atTime, suppressEvents);
+    }
+
+    return this.paused(true);
+  };
+
+  _proto.resume = function resume() {
+    return this.paused(false);
+  };
+
+  _proto.reversed = function reversed(value) {
+    if (arguments.length) {
+      if (!!value !== this.reversed()) {
+        this.timeScale(-this._rts || (value ? -_tinyNum : 0)); // in case timeScale is zero, reversing would have no effect so we use _tinyNum.
+      }
+
+      return this;
+    }
+
+    return this._rts < 0;
+  };
+
+  _proto.invalidate = function invalidate() {
+    this._initted = 0;
+    this._zTime = -_tinyNum;
+    return this;
+  };
+
+  _proto.isActive = function isActive(hasStarted) {
+    var parent = this.parent || this._dp,
+        start = this._start,
+        rawTime;
+    return !!(!parent || this._ts && (this._initted || !hasStarted) && parent.isActive(hasStarted) && (rawTime = parent.rawTime(true)) >= start && rawTime < this.endTime(true) - _tinyNum);
+  };
+
+  _proto.eventCallback = function eventCallback(type, callback, params) {
+    var vars = this.vars;
+
+    if (arguments.length > 1) {
+      if (!callback) {
+        delete vars[type];
+      } else {
+        vars[type] = callback;
+
+        if (params) {
+          vars[type + "Params"] = params;
+        }
+
+        if (type === "onUpdate") {
+          this._onUpdate = callback;
+        }
+      }
+
+      return this;
+    }
+
+    return vars[type];
+  };
+
+  _proto.then = function then(onFulfilled) {
+    var self = this;
+    return new Promise(function (resolve) {
+      var f = _isFunction(onFulfilled) ? onFulfilled : _passThrough,
+          _resolve = function _resolve() {
+        var _then = self.then;
+        self.then = null; // temporarily null the then() method to avoid an infinite loop (see https://github.com/greensock/GSAP/issues/322)
+
+        _isFunction(f) && (f = f(self)) && (f.then || f === self) && (self.then = _then);
+        resolve(f);
+        self.then = _then;
+      };
+
+      if (self._initted && self.totalProgress() === 1 && self._ts >= 0 || !self._tTime && self._ts < 0) {
+        _resolve();
+      } else {
+        self._prom = _resolve;
+      }
+    });
+  };
+
+  _proto.kill = function kill() {
+    _interrupt(this);
+  };
+
+  return Animation;
+}();
+
+exports.Animation = Animation;
+
+_setDefaults(Animation.prototype, {
+  _time: 0,
+  _start: 0,
+  _end: 0,
+  _tTime: 0,
+  _tDur: 0,
+  _dirty: 0,
+  _repeat: 0,
+  _yoyo: false,
+  parent: null,
+  _initted: false,
+  _rDelay: 0,
+  _ts: 1,
+  _dp: 0,
+  ratio: 0,
+  _zTime: -_tinyNum,
+  _prom: 0,
+  _ps: false,
+  _rts: 1
+});
+/*
+ * -------------------------------------------------
+ * TIMELINE
+ * -------------------------------------------------
+ */
+
+
+var Timeline = /*#__PURE__*/function (_Animation) {
+  _inheritsLoose(Timeline, _Animation);
+
+  function Timeline(vars, time) {
+    var _this;
+
+    if (vars === void 0) {
+      vars = {};
+    }
+
+    _this = _Animation.call(this, vars, time) || this;
+    _this.labels = {};
+    _this.smoothChildTiming = !!vars.smoothChildTiming;
+    _this.autoRemoveChildren = !!vars.autoRemoveChildren;
+    _this._sort = _isNotFalse(vars.sortChildren);
+    _this.parent && _postAddChecks(_this.parent, _assertThisInitialized(_this));
+    return _this;
+  }
+
+  var _proto2 = Timeline.prototype;
+
+  _proto2.to = function to(targets, vars, position) {
+    new Tween(targets, _parseVars(arguments, 0, this), _parsePosition(this, _isNumber(vars) ? arguments[3] : position));
+    return this;
+  };
+
+  _proto2.from = function from(targets, vars, position) {
+    new Tween(targets, _parseVars(arguments, 1, this), _parsePosition(this, _isNumber(vars) ? arguments[3] : position));
+    return this;
+  };
+
+  _proto2.fromTo = function fromTo(targets, fromVars, toVars, position) {
+    new Tween(targets, _parseVars(arguments, 2, this), _parsePosition(this, _isNumber(fromVars) ? arguments[4] : position));
+    return this;
+  };
+
+  _proto2.set = function set(targets, vars, position) {
+    vars.duration = 0;
+    vars.parent = this;
+    _inheritDefaults(vars).repeatDelay || (vars.repeat = 0);
+    vars.immediateRender = !!vars.immediateRender;
+    new Tween(targets, vars, _parsePosition(this, position), 1);
+    return this;
+  };
+
+  _proto2.call = function call(callback, params, position) {
+    return _addToTimeline(this, Tween.delayedCall(0, callback, params), _parsePosition(this, position));
+  } //ONLY for backward compatibility! Maybe delete?
+  ;
+
+  _proto2.staggerTo = function staggerTo(targets, duration, vars, stagger, position, onCompleteAll, onCompleteAllParams) {
+    vars.duration = duration;
+    vars.stagger = vars.stagger || stagger;
+    vars.onComplete = onCompleteAll;
+    vars.onCompleteParams = onCompleteAllParams;
+    vars.parent = this;
+    new Tween(targets, vars, _parsePosition(this, position));
+    return this;
+  };
+
+  _proto2.staggerFrom = function staggerFrom(targets, duration, vars, stagger, position, onCompleteAll, onCompleteAllParams) {
+    vars.runBackwards = 1;
+    _inheritDefaults(vars).immediateRender = _isNotFalse(vars.immediateRender);
+    return this.staggerTo(targets, duration, vars, stagger, position, onCompleteAll, onCompleteAllParams);
+  };
+
+  _proto2.staggerFromTo = function staggerFromTo(targets, duration, fromVars, toVars, stagger, position, onCompleteAll, onCompleteAllParams) {
+    toVars.startAt = fromVars;
+    _inheritDefaults(toVars).immediateRender = _isNotFalse(toVars.immediateRender);
+    return this.staggerTo(targets, duration, toVars, stagger, position, onCompleteAll, onCompleteAllParams);
+  };
+
+  _proto2.render = function render(totalTime, suppressEvents, force) {
+    var prevTime = this._time,
+        tDur = this._dirty ? this.totalDuration() : this._tDur,
+        dur = this._dur,
+        tTime = this !== _globalTimeline && totalTime > tDur - _tinyNum && totalTime >= 0 ? tDur : totalTime < _tinyNum ? 0 : totalTime,
+        crossingStart = this._zTime < 0 !== totalTime < 0 && (this._initted || !dur),
+        time,
+        child,
+        next,
+        iteration,
+        cycleDuration,
+        prevPaused,
+        pauseTween,
+        timeScale,
+        prevStart,
+        prevIteration,
+        yoyo,
+        isYoyo;
+
+    if (tTime !== this._tTime || force || crossingStart) {
+      if (prevTime !== this._time && dur) {
+        //if totalDuration() finds a child with a negative startTime and smoothChildTiming is true, things get shifted around internally so we need to adjust the time accordingly. For example, if a tween starts at -30 we must shift EVERYTHING forward 30 seconds and move this timeline's startTime backward by 30 seconds so that things align with the playhead (no jump).
+        tTime += this._time - prevTime;
+        totalTime += this._time - prevTime;
+      }
+
+      time = tTime;
+      prevStart = this._start;
+      timeScale = this._ts;
+      prevPaused = !timeScale;
+
+      if (crossingStart) {
+        if (!dur) {
+          prevTime = this._zTime;
+        }
+
+        if (totalTime || !suppressEvents) {
+          //when the playhead arrives at EXACTLY time 0 (right on top) of a zero-duration timeline, we need to discern if events are suppressed so that when the playhead moves again (next time), it'll trigger the callback. If events are NOT suppressed, obviously the callback would be triggered in this render. Basically, the callback should fire either when the playhead ARRIVES or LEAVES this exact spot, not both. Imagine doing a timeline.seek(0) and there's a callback that sits at 0. Since events are suppressed on that seek() by default, nothing will fire, but when the playhead moves off of that position, the callback should fire. This behavior is what people intuitively expect.
+          this._zTime = totalTime;
+        }
+      }
+
+      if (this._repeat) {
+        //adjust the time for repeats and yoyos
+        yoyo = this._yoyo;
+        cycleDuration = dur + this._rDelay;
+        time = _round(tTime % cycleDuration); //round to avoid floating point errors. (4 % 0.8 should be 0 but some browsers report it as 0.79999999!)
+
+        if (time > dur || tDur === tTime) {
+          time = dur;
+        }
+
+        iteration = ~~(tTime / cycleDuration);
+
+        if (iteration && iteration === tTime / cycleDuration) {
+          time = dur;
+          iteration--;
+        }
+
+        prevIteration = _animationCycle(this._tTime, cycleDuration);
+
+        if (yoyo && iteration & 1) {
+          time = dur - time;
+          isYoyo = 1;
+        }
+        /*
+        make sure children at the end/beginning of the timeline are rendered properly. If, for example,
+        a 3-second long timeline rendered at 2.9 seconds previously, and now renders at 3.2 seconds (which
+        would get translated to 2.8 seconds if the timeline yoyos or 0.2 seconds if it just repeats), there
+        could be a callback or a short tween that's at 2.95 or 3 seconds in which wouldn't render. So
+        we need to push the timeline to the end (and/or beginning depending on its yoyo value). Also we must
+        ensure that zero-duration tweens at the very beginning or end of the Timeline work.
+        */
+
+
+        if (iteration !== prevIteration && !this._lock) {
+          var rewinding = yoyo && prevIteration & 1,
+              doesWrap = rewinding === (yoyo && iteration & 1);
+
+          if (iteration < prevIteration) {
+            rewinding = !rewinding;
+          }
+
+          prevTime = rewinding ? 0 : dur;
+          this._lock = 1;
+          this.render(prevTime, suppressEvents, !dur)._lock = 0;
+
+          if (!suppressEvents && this.parent) {
+            _callback(this, "onRepeat");
+          }
+
+          this.vars.repeatRefresh && !isYoyo && (this.invalidate()._lock = 1);
+
+          if (prevTime !== this._time || prevPaused !== !this._ts) {
+            return this;
+          }
+
+          if (doesWrap) {
+            this._lock = 2;
+            prevTime = rewinding ? dur + 0.0001 : -0.0001;
+            this.render(prevTime, true);
+            this.vars.repeatRefresh && !isYoyo && this.invalidate();
+          }
+
+          this._lock = 0;
+
+          if (!this._ts && !prevPaused) {
+            return this;
+          } //in order for yoyoEase to work properly when there's a stagger, we must swap out the ease in each sub-tween.
+          //_propagateYoyoEase(this, isYoyo);
+
+        }
+      }
+
+      if (this._hasPause && !this._forcing && this._lock < 2) {
+        pauseTween = _findNextPauseTween(this, _round(prevTime), _round(time));
+
+        if (pauseTween) {
+          tTime -= time - (time = pauseTween._start);
+        }
+      }
+
+      this._tTime = tTime;
+      this._time = time;
+      this._act = !timeScale; //as long as it's not paused, force it to be active so that if the user renders independent of the parent timeline, it'll be forced to re-render on the next tick.
+
+      if (!this._initted) {
+        this._onUpdate = this.vars.onUpdate;
+        this._initted = 1;
+        this._zTime = totalTime;
+      }
+
+      if (!prevTime && time && !suppressEvents) {
+        _callback(this, "onStart");
+      }
+
+      if (time >= prevTime && totalTime >= 0) {
+        child = this._first;
+
+        while (child) {
+          next = child._next;
+
+          if ((child._act || time >= child._start) && child._ts && pauseTween !== child) {
+            if (child.parent !== this) {
+              // an extreme edge case - the child's render could do something like kill() the "next" one in the linked list, or reparent it. In that case we must re-initiate the whole render to be safe.
+              return this.render(totalTime, suppressEvents, force);
+            }
+
+            child.render(child._ts > 0 ? (time - child._start) * child._ts : (child._dirty ? child.totalDuration() : child._tDur) + (time - child._start) * child._ts, suppressEvents, force);
+
+            if (time !== this._time || !this._ts && !prevPaused) {
+              //in case a tween pauses or seeks the timeline when rendering, like inside of an onUpdate/onComplete
+              pauseTween = 0;
+              next && (tTime += this._zTime = -_tinyNum); // it didn't finish rendering, so flag zTime as negative so that so that the next time render() is called it'll be forced (to render any remaining children)
+
+              break;
+            }
+          }
+
+          child = next;
+        }
+      } else {
+        child = this._last;
+        var adjustedTime = totalTime < 0 ? totalTime : time; //when the playhead goes backward beyond the start of this timeline, we must pass that information down to the child animations so that zero-duration tweens know whether to render their starting or ending values.
+
+        while (child) {
+          next = child._prev;
+
+          if ((child._act || adjustedTime <= child._end) && child._ts && pauseTween !== child) {
+            if (child.parent !== this) {
+              // an extreme edge case - the child's render could do something like kill() the "next" one in the linked list, or reparent it. In that case we must re-initiate the whole render to be safe.
+              return this.render(totalTime, suppressEvents, force);
+            }
+
+            child.render(child._ts > 0 ? (adjustedTime - child._start) * child._ts : (child._dirty ? child.totalDuration() : child._tDur) + (adjustedTime - child._start) * child._ts, suppressEvents, force);
+
+            if (time !== this._time || !this._ts && !prevPaused) {
+              //in case a tween pauses or seeks the timeline when rendering, like inside of an onUpdate/onComplete
+              pauseTween = 0;
+              next && (tTime += this._zTime = adjustedTime ? -_tinyNum : _tinyNum); // it didn't finish rendering, so adjust zTime so that so that the next time render() is called it'll be forced (to render any remaining children)
+
+              break;
+            }
+          }
+
+          child = next;
+        }
+      }
+
+      if (pauseTween && !suppressEvents) {
+        this.pause();
+        pauseTween.render(time >= prevTime ? 0 : -_tinyNum)._zTime = time >= prevTime ? 1 : -1;
+
+        if (this._ts) {
+          //the callback resumed playback! So since we may have held back the playhead due to where the pause is positioned, go ahead and jump to where it's SUPPOSED to be (if no pause happened).
+          this._start = prevStart; //if the pause was at an earlier time and the user resumed in the callback, it could reposition the timeline (changing its startTime), throwing things off slightly, so we make sure the _start doesn't shift.
+
+          _setEnd(this);
+
+          return this.render(totalTime, suppressEvents, force);
+        }
+      }
+
+      if (this._onUpdate && !suppressEvents) {
+        _callback(this, "onUpdate", true);
+      }
+
+      if (tTime === tDur && tDur >= this.totalDuration() || !tTime && this._ts < 0) if (prevStart === this._start || Math.abs(timeScale) !== Math.abs(this._ts)) if (!this._lock) {
+        (totalTime || !dur) && (totalTime && this._ts > 0 || !tTime && this._ts < 0) && _removeFromParent(this, 1); // don't remove if the timeline is reversed and the playhead isn't at 0, otherwise tl.progress(1).reverse() won't work. Only remove if the playhead is at the end and timeScale is positive, or if the playhead is at 0 and the timeScale is negative.
+
+        if (!suppressEvents && !(totalTime < 0 && !prevTime)) {
+          _callback(this, tTime === tDur ? "onComplete" : "onReverseComplete", true);
+
+          this._prom && this._prom();
+        }
+      }
+    }
+
+    return this;
+  };
+
+  _proto2.add = function add(child, position) {
+    var _this2 = this;
+
+    if (!_isNumber(position)) {
+      position = _parsePosition(this, position);
+    }
+
+    if (!(child instanceof Animation)) {
+      if (_isArray(child)) {
+        child.forEach(function (obj) {
+          return _this2.add(obj, position);
+        });
+        return _uncache(this);
+      }
+
+      if (_isString(child)) {
+        return this.addLabel(child, position);
+      }
+
+      if (_isFunction(child)) {
+        child = Tween.delayedCall(0, child);
+      } else {
+        return this;
+      }
+    }
+
+    return this !== child ? _addToTimeline(this, child, position) : this; //don't allow a timeline to be added to itself as a child!
+  };
+
+  _proto2.getChildren = function getChildren(nested, tweens, timelines, ignoreBeforeTime) {
+    if (nested === void 0) {
+      nested = true;
+    }
+
+    if (tweens === void 0) {
+      tweens = true;
+    }
+
+    if (timelines === void 0) {
+      timelines = true;
+    }
+
+    if (ignoreBeforeTime === void 0) {
+      ignoreBeforeTime = -_bigNum;
+    }
+
+    var a = [],
+        child = this._first;
+
+    while (child) {
+      if (child._start >= ignoreBeforeTime) {
+        if (child instanceof Tween) {
+          if (tweens) {
+            a.push(child);
+          }
+        } else {
+          if (timelines) {
+            a.push(child);
+          }
+
+          if (nested) {
+            a.push.apply(a, child.getChildren(true, tweens, timelines));
+          }
+        }
+      }
+
+      child = child._next;
+    }
+
+    return a;
+  };
+
+  _proto2.getById = function getById(id) {
+    var animations = this.getChildren(1, 1, 1),
+        i = animations.length;
+
+    while (i--) {
+      if (animations[i].vars.id === id) {
+        return animations[i];
+      }
+    }
+  };
+
+  _proto2.remove = function remove(child) {
+    if (_isString(child)) {
+      return this.removeLabel(child);
+    }
+
+    if (_isFunction(child)) {
+      return this.killTweensOf(child);
+    }
+
+    _removeLinkedListItem(this, child);
+
+    if (child === this._recent) {
+      this._recent = this._last;
+    }
+
+    return _uncache(this);
+  };
+
+  _proto2.totalTime = function totalTime(_totalTime2, suppressEvents) {
+    if (!arguments.length) {
+      return this._tTime;
+    }
+
+    this._forcing = 1;
+
+    if (!this.parent && !this._dp && this._ts) {
+      //special case for the global timeline (or any other that has no parent or detached parent).
+      this._start = _round(_ticker.time - (this._ts > 0 ? _totalTime2 / this._ts : (this.totalDuration() - _totalTime2) / -this._ts));
+    }
+
+    _Animation.prototype.totalTime.call(this, _totalTime2, suppressEvents);
+
+    this._forcing = 0;
+    return this;
+  };
+
+  _proto2.addLabel = function addLabel(label, position) {
+    this.labels[label] = _parsePosition(this, position);
+    return this;
+  };
+
+  _proto2.removeLabel = function removeLabel(label) {
+    delete this.labels[label];
+    return this;
+  };
+
+  _proto2.addPause = function addPause(position, callback, params) {
+    var t = Tween.delayedCall(0, callback || _emptyFunc, params);
+    t.data = "isPause";
+    this._hasPause = 1;
+    return _addToTimeline(this, t, _parsePosition(this, position));
+  };
+
+  _proto2.removePause = function removePause(position) {
+    var child = this._first;
+    position = _parsePosition(this, position);
+
+    while (child) {
+      if (child._start === position && child.data === "isPause") {
+        _removeFromParent(child);
+      }
+
+      child = child._next;
+    }
+  };
+
+  _proto2.killTweensOf = function killTweensOf(targets, props, onlyActive) {
+    var tweens = this.getTweensOf(targets, onlyActive),
+        i = tweens.length;
+
+    while (i--) {
+      _overwritingTween !== tweens[i] && tweens[i].kill(targets, props);
+    }
+
+    return this;
+  };
+
+  _proto2.getTweensOf = function getTweensOf(targets, onlyActive) {
+    var a = [],
+        parsedTargets = toArray(targets),
+        child = this._first,
+        children;
+
+    while (child) {
+      if (child instanceof Tween) {
+        if (_arrayContainsAny(child._targets, parsedTargets) && (!onlyActive || child.isActive(onlyActive === "started"))) {
+          a.push(child);
+        }
+      } else if ((children = child.getTweensOf(parsedTargets, onlyActive)).length) {
+        a.push.apply(a, children);
+      }
+
+      child = child._next;
+    }
+
+    return a;
+  };
+
+  _proto2.tweenTo = function tweenTo(position, vars) {
+    vars = vars || {};
+
+    var tl = this,
+        endTime = _parsePosition(tl, position),
+        _vars = vars,
+        startAt = _vars.startAt,
+        _onStart = _vars.onStart,
+        onStartParams = _vars.onStartParams,
+        tween = Tween.to(tl, _setDefaults(vars, {
+      ease: "none",
+      lazy: false,
+      time: endTime,
+      duration: vars.duration || Math.abs((endTime - (startAt && "time" in startAt ? startAt.time : tl._time)) / tl.timeScale()) || _tinyNum,
+      onStart: function onStart() {
+        tl.pause();
+        var duration = vars.duration || Math.abs((endTime - tl._time) / tl.timeScale());
+
+        if (tween._dur !== duration) {
+          _setDuration(tween, duration).render(tween._time, true, true);
+        }
+
+        if (_onStart) {
+          //in case the user had an onStart in the vars - we don't want to overwrite it.
+          _onStart.apply(tween, onStartParams || []);
+        }
+      }
+    }));
+
+    return tween;
+  };
+
+  _proto2.tweenFromTo = function tweenFromTo(fromPosition, toPosition, vars) {
+    return this.tweenTo(toPosition, _setDefaults({
+      startAt: {
+        time: _parsePosition(this, fromPosition)
+      }
+    }, vars));
+  };
+
+  _proto2.recent = function recent() {
+    return this._recent;
+  };
+
+  _proto2.nextLabel = function nextLabel(afterTime) {
+    if (afterTime === void 0) {
+      afterTime = this._time;
+    }
+
+    return _getLabelInDirection(this, _parsePosition(this, afterTime));
+  };
+
+  _proto2.previousLabel = function previousLabel(beforeTime) {
+    if (beforeTime === void 0) {
+      beforeTime = this._time;
+    }
+
+    return _getLabelInDirection(this, _parsePosition(this, beforeTime), 1);
+  };
+
+  _proto2.currentLabel = function currentLabel(value) {
+    return arguments.length ? this.seek(value, true) : this.previousLabel(this._time + _tinyNum);
+  };
+
+  _proto2.shiftChildren = function shiftChildren(amount, adjustLabels, ignoreBeforeTime) {
+    if (ignoreBeforeTime === void 0) {
+      ignoreBeforeTime = 0;
+    }
+
+    var child = this._first,
+        labels = this.labels,
+        p;
+
+    while (child) {
+      if (child._start >= ignoreBeforeTime) {
+        child._start += amount;
+      }
+
+      child = child._next;
+    }
+
+    if (adjustLabels) {
+      for (p in labels) {
+        if (labels[p] >= ignoreBeforeTime) {
+          labels[p] += amount;
+        }
+      }
+    }
+
+    return _uncache(this);
+  };
+
+  _proto2.invalidate = function invalidate() {
+    var child = this._first;
+    this._lock = 0;
+
+    while (child) {
+      child.invalidate();
+      child = child._next;
+    }
+
+    return _Animation.prototype.invalidate.call(this);
+  };
+
+  _proto2.clear = function clear(includeLabels) {
+    if (includeLabels === void 0) {
+      includeLabels = true;
+    }
+
+    var child = this._first,
+        next;
+
+    while (child) {
+      next = child._next;
+      this.remove(child);
+      child = next;
+    }
+
+    this._time = this._tTime = 0;
+
+    if (includeLabels) {
+      this.labels = {};
+    }
+
+    return _uncache(this);
+  };
+
+  _proto2.totalDuration = function totalDuration(value) {
+    var max = 0,
+        self = this,
+        child = self._last,
+        prevStart = _bigNum,
+        prev,
+        end,
+        start,
+        parent;
+
+    if (arguments.length) {
+      return self.timeScale((self._repeat < 0 ? self.duration() : self.totalDuration()) / (self.reversed() ? -value : value));
+    }
+
+    if (self._dirty) {
+      parent = self.parent;
+
+      while (child) {
+        prev = child._prev; //record it here in case the tween changes position in the sequence...
+
+        if (child._dirty) {
+          child.totalDuration(); //could change the tween._startTime, so make sure the animation's cache is clean before analyzing it.
+        }
+
+        start = child._start;
+
+        if (start > prevStart && self._sort && child._ts && !self._lock) {
+          //in case one of the tweens shifted out of order, it needs to be re-inserted into the correct position in the sequence
+          self._lock = 1; //prevent endless recursive calls - there are methods that get triggered that check duration/totalDuration when we add().
+
+          _addToTimeline(self, child, start - child._delay, 1)._lock = 0;
+        } else {
+          prevStart = start;
+        }
+
+        if (start < 0 && child._ts) {
+          //children aren't allowed to have negative startTimes unless smoothChildTiming is true, so adjust here if one is found.
+          max -= start;
+
+          if (!parent && !self._dp || parent && parent.smoothChildTiming) {
+            self._start += start / self._ts;
+            self._time -= start;
+            self._tTime -= start;
+          }
+
+          self.shiftChildren(-start, false, -1e20);
+          prevStart = 0;
+        }
+
+        end = _setEnd(child);
+
+        if (end > max && child._ts) {
+          max = end;
+        }
+
+        child = prev;
+      }
+
+      _setDuration(self, self === _globalTimeline && self._time > max ? self._time : Math.min(_bigNum, max), 1);
+
+      self._dirty = 0;
+    }
+
+    return self._tDur;
+  };
+
+  Timeline.updateRoot = function updateRoot(time) {
+    if (_globalTimeline._ts) {
+      _lazySafeRender(_globalTimeline, _parentToChildTotalTime(time, _globalTimeline));
+
+      _lastRenderedFrame = _ticker.frame;
+    }
+
+    if (_ticker.frame >= _nextGCFrame) {
+      _nextGCFrame += _config.autoSleep || 120;
+      var child = _globalTimeline._first;
+      if (!child || !child._ts) if (_config.autoSleep && _ticker._listeners.length < 2) {
+        while (child && !child._ts) {
+          child = child._next;
+        }
+
+        if (!child) {
+          _ticker.sleep();
+        }
+      }
+    }
+  };
+
+  return Timeline;
+}(Animation);
+
+exports.TimelineLite = exports.TimelineMax = exports.Timeline = Timeline;
+
+_setDefaults(Timeline.prototype, {
+  _lock: 0,
+  _hasPause: 0,
+  _forcing: 0
+});
+
+var _addComplexStringPropTween = function _addComplexStringPropTween(target, prop, start, end, setter, stringFilter, funcParam) {
+  //note: we call _addComplexStringPropTween.call(tweenInstance...) to ensure that it's scoped properly. We may call it from within a plugin too, thus "this" would refer to the plugin.
+  var pt = new PropTween(this._pt, target, prop, 0, 1, _renderComplexString, null, setter),
+      index = 0,
+      matchIndex = 0,
+      result,
+      startNums,
+      color,
+      endNum,
+      chunk,
+      startNum,
+      hasRandom,
+      a;
+  pt.b = start;
+  pt.e = end;
+  start += ""; //ensure values are strings
+
+  end += "";
+
+  if (hasRandom = ~end.indexOf("random(")) {
+    end = _replaceRandom(end);
+  }
+
+  if (stringFilter) {
+    a = [start, end];
+    stringFilter(a, target, prop); //pass an array with the starting and ending values and let the filter do whatever it needs to the values.
+
+    start = a[0];
+    end = a[1];
+  }
+
+  startNums = start.match(_complexStringNumExp) || [];
+
+  while (result = _complexStringNumExp.exec(end)) {
+    endNum = result[0];
+    chunk = end.substring(index, result.index);
+
+    if (color) {
+      color = (color + 1) % 5;
+    } else if (chunk.substr(-5) === "rgba(") {
+      color = 1;
+    }
+
+    if (endNum !== startNums[matchIndex++]) {
+      startNum = parseFloat(startNums[matchIndex - 1]) || 0; //these nested PropTweens are handled in a special way - we'll never actually call a render or setter method on them. We'll just loop through them in the parent complex string PropTween's render method.
+
+      pt._pt = {
+        _next: pt._pt,
+        p: chunk || matchIndex === 1 ? chunk : ",",
+        //note: SVG spec allows omission of comma/space when a negative sign is wedged between two numbers, like 2.5-5.3 instead of 2.5,-5.3 but when tweening, the negative value may switch to positive, so we insert the comma just in case.
+        s: startNum,
+        c: endNum.charAt(1) === "=" ? parseFloat(endNum.substr(2)) * (endNum.charAt(0) === "-" ? -1 : 1) : parseFloat(endNum) - startNum,
+        m: color && color < 4 ? Math.round : 0
+      };
+      index = _complexStringNumExp.lastIndex;
+    }
+  }
+
+  pt.c = index < end.length ? end.substring(index, end.length) : ""; //we use the "c" of the PropTween to store the final part of the string (after the last number)
+
+  pt.fp = funcParam;
+
+  if (_relExp.test(end) || hasRandom) {
+    pt.e = 0; //if the end string contains relative values or dynamic random(...) values, delete the end it so that on the final render we don't actually set it to the string with += or -= characters (forces it to use the calculated value).
+  }
+
+  this._pt = pt; //start the linked list with this new PropTween. Remember, we call _addComplexStringPropTween.call(tweenInstance...) to ensure that it's scoped properly. We may call it from within a plugin too, thus "this" would refer to the plugin.
+
+  return pt;
+},
+    _addPropTween = function _addPropTween(target, prop, start, end, index, targets, modifier, stringFilter, funcParam) {
+  if (_isFunction(end)) {
+    end = end(index || 0, target, targets);
+  }
+
+  var currentValue = target[prop],
+      parsedStart = start !== "get" ? start : !_isFunction(currentValue) ? currentValue : funcParam ? target[prop.indexOf("set") || !_isFunction(target["get" + prop.substr(3)]) ? prop : "get" + prop.substr(3)](funcParam) : target[prop](),
+      setter = !_isFunction(currentValue) ? _setterPlain : funcParam ? _setterFuncWithParam : _setterFunc,
+      pt;
+
+  if (_isString(end)) {
+    if (~end.indexOf("random(")) {
+      end = _replaceRandom(end);
+    }
+
+    if (end.charAt(1) === "=") {
+      end = parseFloat(parsedStart) + parseFloat(end.substr(2)) * (end.charAt(0) === "-" ? -1 : 1) + (getUnit(parsedStart) || 0);
+    }
+  }
+
+  if (parsedStart !== end) {
+    if (!isNaN(parsedStart + end)) {
+      pt = new PropTween(this._pt, target, prop, +parsedStart || 0, end - (parsedStart || 0), typeof currentValue === "boolean" ? _renderBoolean : _renderPlain, 0, setter);
+
+      if (funcParam) {
+        pt.fp = funcParam;
+      }
+
+      if (modifier) {
+        pt.modifier(modifier, this, target);
+      }
+
+      return this._pt = pt;
+    }
+
+    !currentValue && !(prop in target) && _missingPlugin(prop, end);
+    return _addComplexStringPropTween.call(this, target, prop, parsedStart, end, setter, stringFilter || _config.stringFilter, funcParam);
+  }
+},
+    //creates a copy of the vars object and processes any function-based values (putting the resulting values directly into the copy) as well as strings with "random()" in them. It does NOT process relative values.
+_processVars = function _processVars(vars, index, target, targets, tween) {
+  if (_isFunction(vars)) {
+    vars = _parseFuncOrString(vars, tween, index, target, targets);
+  }
+
+  if (!_isObject(vars) || vars.style && vars.nodeType || _isArray(vars)) {
+    return _isString(vars) ? _parseFuncOrString(vars, tween, index, target, targets) : vars;
+  }
+
+  var copy = {},
+      p;
+
+  for (p in vars) {
+    copy[p] = _parseFuncOrString(vars[p], tween, index, target, targets);
+  }
+
+  return copy;
+},
+    _checkPlugin = function _checkPlugin(property, vars, tween, index, target, targets) {
+  var plugin, pt, ptLookup, i;
+
+  if (_plugins[property] && (plugin = new _plugins[property]()).init(target, plugin.rawVars ? vars[property] : _processVars(vars[property], index, target, targets, tween), tween, index, targets) !== false) {
+    tween._pt = pt = new PropTween(tween._pt, target, property, 0, 1, plugin.render, plugin, 0, plugin.priority);
+
+    if (tween !== _quickTween) {
+      ptLookup = tween._ptLookup[tween._targets.indexOf(target)]; //note: we can't use tween._ptLookup[index] because for staggered tweens, the index from the fullTargets array won't match what it is in each individual tween that spawns from the stagger.
+
+      i = plugin._props.length;
+
+      while (i--) {
+        ptLookup[plugin._props[i]] = pt;
+      }
+    }
+  }
+
+  return plugin;
+},
+    _overwritingTween,
+    //store a reference temporarily so we can avoid overwriting itself.
+_initTween = function _initTween(tween, time) {
+  var vars = tween.vars,
+      ease = vars.ease,
+      startAt = vars.startAt,
+      immediateRender = vars.immediateRender,
+      lazy = vars.lazy,
+      onUpdate = vars.onUpdate,
+      onUpdateParams = vars.onUpdateParams,
+      callbackScope = vars.callbackScope,
+      runBackwards = vars.runBackwards,
+      yoyoEase = vars.yoyoEase,
+      keyframes = vars.keyframes,
+      autoRevert = vars.autoRevert,
+      dur = tween._dur,
+      prevStartAt = tween._startAt,
+      targets = tween._targets,
+      parent = tween.parent,
+      fullTargets = parent && parent.data === "nested" ? parent.parent._targets : targets,
+      autoOverwrite = tween._overwrite === "auto",
+      tl = tween.timeline,
+      cleanVars,
+      i,
+      p,
+      pt,
+      target,
+      hasPriority,
+      gsData,
+      harness,
+      plugin,
+      ptLookup,
+      index,
+      harnessVars;
+
+  if (tl && (!keyframes || !ease)) {
+    ease = "none";
+  }
+
+  tween._ease = _parseEase(ease, _defaults.ease);
+  tween._yEase = yoyoEase ? _invertEase(_parseEase(yoyoEase === true ? ease : yoyoEase, _defaults.ease)) : 0;
+
+  if (yoyoEase && tween._yoyo && !tween._repeat) {
+    //there must have been a parent timeline with yoyo:true that is currently in its yoyo phase, so flip the eases.
+    yoyoEase = tween._yEase;
+    tween._yEase = tween._ease;
+    tween._ease = yoyoEase;
+  }
+
+  if (!tl) {
+    //if there's an internal timeline, skip all the parsing because we passed that task down the chain.
+    if (prevStartAt) {
+      prevStartAt.render(-1, true).kill();
+    }
+
+    if (startAt) {
+      _removeFromParent(tween._startAt = Tween.set(targets, _setDefaults({
+        data: "isStart",
+        overwrite: false,
+        parent: parent,
+        immediateRender: true,
+        lazy: _isNotFalse(lazy),
+        startAt: null,
+        delay: 0,
+        onUpdate: onUpdate,
+        onUpdateParams: onUpdateParams,
+        callbackScope: callbackScope,
+        stagger: 0
+      }, startAt))); //copy the properties/values into a new object to avoid collisions, like var to = {x:0}, from = {x:500}; timeline.fromTo(e, from, to).fromTo(e, to, from);
+
+
+      if (immediateRender) {
+        if (time > 0) {
+          !autoRevert && (tween._startAt = 0); //tweens that render immediately (like most from() and fromTo() tweens) shouldn't revert when their parent timeline's playhead goes backward past the startTime because the initial render could have happened anytime and it shouldn't be directly correlated to this tween's startTime. Imagine setting up a complex animation where the beginning states of various objects are rendered immediately but the tween doesn't happen for quite some time - if we revert to the starting values as soon as the playhead goes backward past the tween's startTime, it will throw things off visually. Reversion should only happen in Timeline instances where immediateRender was false or when autoRevert is explicitly set to true.
+        } else if (dur) {
+          return; //we skip initialization here so that overwriting doesn't occur until the tween actually begins. Otherwise, if you create several immediateRender:true tweens of the same target/properties to drop into a Timeline, the last one created would overwrite the first ones because they didn't get placed into the timeline yet before the first render occurs and kicks in overwriting.
+        }
+      }
+    } else if (runBackwards && dur) {
+      //from() tweens must be handled uniquely: their beginning values must be rendered but we don't want overwriting to occur yet (when time is still 0). Wait until the tween actually begins before doing all the routines like overwriting. At that time, we should render at the END of the tween to ensure that things initialize correctly (remember, from() tweens go backwards)
+      if (prevStartAt) {
+        !autoRevert && (tween._startAt = 0);
+      } else {
+        if (time) {
+          //in rare cases (like if a from() tween runs and then is invalidate()-ed), immediateRender could be true but the initial forced-render gets skipped, so there's no need to force the render in this context when the _time is greater than 0
+          immediateRender = false;
+        }
+
+        _removeFromParent(tween._startAt = Tween.set(targets, _merge(_copyExcluding(vars, _reservedProps), {
+          overwrite: false,
+          data: "isFromStart",
+          //we tag the tween with as "isFromStart" so that if [inside a plugin] we need to only do something at the very END of a tween, we have a way of identifying this tween as merely the one that's setting the beginning values for a "from()" tween. For example, clearProps in CSSPlugin should only get applied at the very END of a tween and without this tag, from(...{height:100, clearProps:"height", delay:1}) would wipe the height at the beginning of the tween and after 1 second, it'd kick back in.
+          lazy: immediateRender && _isNotFalse(lazy),
+          immediateRender: immediateRender,
+          //zero-duration tweens render immediately by default, but if we're not specifically instructed to render this tween immediately, we should skip this and merely _init() to record the starting values (rendering them immediately would push them to completion which is wasteful in that case - we'd have to render(-1) immediately after)
+          stagger: 0,
+          parent: parent //ensures that nested tweens that had a stagger are handled properly, like gsap.from(".class", {y:gsap.utils.wrap([-100,100])})
+
+        })));
+
+        if (!immediateRender) {
+          _initTween(tween._startAt, _tinyNum); //ensures that the initial values are recorded
+
+        } else if (!time) {
+          return;
+        }
+      }
+    }
+
+    cleanVars = _copyExcluding(vars, _reservedProps);
+    tween._pt = 0;
+    harness = targets[0] ? _getCache(targets[0]).harness : 0;
+    harnessVars = harness && vars[harness.prop]; //someone may need to specify CSS-specific values AND non-CSS values, like if the element has an "x" property plus it's a standard DOM element. We allow people to distinguish by wrapping plugin-specific stuff in a css:{} object for example.
+
+    lazy = dur && _isNotFalse(lazy) || lazy && !dur;
+
+    for (i = 0; i < targets.length; i++) {
+      target = targets[i];
+      gsData = target._gsap || _harness(targets)[i]._gsap;
+      tween._ptLookup[i] = ptLookup = {};
+
+      if (_lazyLookup[gsData.id]) {
+        _lazyRender(); //if other tweens of the same target have recently initted but haven't rendered yet, we've got to force the render so that the starting values are correct (imagine populating a timeline with a bunch of sequential tweens and then jumping to the end)
+
+      }
+
+      index = fullTargets === targets ? i : fullTargets.indexOf(target);
+
+      if (harness && (plugin = new harness()).init(target, harnessVars || cleanVars, tween, index, fullTargets) !== false) {
+        tween._pt = pt = new PropTween(tween._pt, target, plugin.name, 0, 1, plugin.render, plugin, 0, plugin.priority);
+
+        plugin._props.forEach(function (name) {
+          ptLookup[name] = pt;
+        });
+
+        if (plugin.priority) {
+          hasPriority = 1;
+        }
+      }
+
+      if (!harness || harnessVars) {
+        for (p in cleanVars) {
+          if (_plugins[p] && (plugin = _checkPlugin(p, cleanVars, tween, index, target, fullTargets))) {
+            if (plugin.priority) {
+              hasPriority = 1;
+            }
+          } else {
+            ptLookup[p] = pt = _addPropTween.call(tween, target, p, "get", cleanVars[p], index, fullTargets, 0, vars.stringFilter);
+          }
+        }
+      }
+
+      if (tween._op && tween._op[i]) {
+        tween.kill(target, tween._op[i]);
+      }
+
+      if (autoOverwrite && tween._pt) {
+        _overwritingTween = tween;
+
+        _globalTimeline.killTweensOf(target, ptLookup, "started"); //Also make sure the overwriting doesn't overwrite THIS tween!!!
+
+
+        _overwritingTween = 0;
+      }
+
+      if (tween._pt && lazy) {
+        _lazyLookup[gsData.id] = 1;
+      }
+    }
+
+    if (hasPriority) {
+      _sortPropTweensByPriority(tween);
+    }
+
+    if (tween._onInit) {
+      //plugins like RoundProps must wait until ALL of the PropTweens are instantiated. In the plugin's init() function, it sets the _onInit on the tween instance. May not be pretty/intuitive, but it's fast and keeps file size down.
+      tween._onInit(tween);
+    }
+  }
+
+  tween._from = !tl && !!vars.runBackwards; //nested timelines should never run backwards - the backwards-ness is in the child tweens.
+
+  tween._onUpdate = onUpdate;
+  tween._initted = 1;
+},
+    _addAliasesToVars = function _addAliasesToVars(targets, vars) {
+  var harness = targets[0] ? _getCache(targets[0]).harness : 0,
+      propertyAliases = harness && harness.aliases,
+      copy,
+      p,
+      i,
+      aliases;
+
+  if (!propertyAliases) {
+    return vars;
+  }
+
+  copy = _merge({}, vars);
+
+  for (p in propertyAliases) {
+    if (p in copy) {
+      aliases = propertyAliases[p].split(",");
+      i = aliases.length;
+
+      while (i--) {
+        copy[aliases[i]] = copy[p];
+      }
+    }
+  }
+
+  return copy;
+},
+    _parseFuncOrString = function _parseFuncOrString(value, tween, i, target, targets) {
+  return _isFunction(value) ? value.call(tween, i, target, targets) : _isString(value) && ~value.indexOf("random(") ? _replaceRandom(value) : value;
+},
+    _staggerTweenProps = _callbackNames + "repeat,repeatDelay,yoyo,repeatRefresh,yoyoEase",
+    _staggerPropsToSkip = (_staggerTweenProps + ",id,stagger,delay,duration,paused").split(",");
+/*
+ * --------------------------------------------------------------------------------------
+ * TWEEN
+ * --------------------------------------------------------------------------------------
+ */
+
+
+exports._checkPlugin = _checkPlugin;
+
+var Tween = /*#__PURE__*/function (_Animation2) {
+  _inheritsLoose(Tween, _Animation2);
+
+  function Tween(targets, vars, time, skipInherit) {
+    var _this3;
+
+    if (typeof vars === "number") {
+      time.duration = vars;
+      vars = time;
+      time = null;
+    }
+
+    _this3 = _Animation2.call(this, skipInherit ? vars : _inheritDefaults(vars), time) || this;
+    var _this3$vars = _this3.vars,
+        duration = _this3$vars.duration,
+        delay = _this3$vars.delay,
+        immediateRender = _this3$vars.immediateRender,
+        stagger = _this3$vars.stagger,
+        overwrite = _this3$vars.overwrite,
+        keyframes = _this3$vars.keyframes,
+        defaults = _this3$vars.defaults,
+        parent = _this3.parent,
+        parsedTargets = (_isArray(targets) ? _isNumber(targets[0]) : "length" in vars) ? [targets] : toArray(targets),
+        tl,
+        i,
+        copy,
+        l,
+        p,
+        curTarget,
+        staggerFunc,
+        staggerVarsToMerge;
+    _this3._targets = parsedTargets.length ? _harness(parsedTargets) : _warn("GSAP target " + targets + " not found. https://greensock.com", !_config.nullTargetWarn) || [];
+    _this3._ptLookup = []; //PropTween lookup. An array containing an object for each target, having keys for each tweening property
+
+    _this3._overwrite = overwrite;
+
+    if (keyframes || stagger || _isFuncOrString(duration) || _isFuncOrString(delay)) {
+      vars = _this3.vars;
+      tl = _this3.timeline = new Timeline({
+        data: "nested",
+        defaults: defaults || {}
+      });
+      tl.kill();
+      tl.parent = _assertThisInitialized(_this3);
+
+      if (keyframes) {
+        _setDefaults(tl.vars.defaults, {
+          ease: "none"
+        });
+
+        keyframes.forEach(function (frame) {
+          return tl.to(parsedTargets, frame, ">");
+        });
+      } else {
+        l = parsedTargets.length;
+        staggerFunc = stagger ? distribute(stagger) : _emptyFunc;
+
+        if (_isObject(stagger)) {
+          //users can pass in callbacks like onStart/onComplete in the stagger object. These should fire with each individual tween.
+          for (p in stagger) {
+            if (~_staggerTweenProps.indexOf(p)) {
+              if (!staggerVarsToMerge) {
+                staggerVarsToMerge = {};
+              }
+
+              staggerVarsToMerge[p] = stagger[p];
+            }
+          }
+        }
+
+        for (i = 0; i < l; i++) {
+          copy = {};
+
+          for (p in vars) {
+            if (_staggerPropsToSkip.indexOf(p) < 0) {
+              copy[p] = vars[p];
+            }
+          }
+
+          copy.stagger = 0;
+
+          if (staggerVarsToMerge) {
+            _merge(copy, staggerVarsToMerge);
+          }
+
+          if (vars.yoyoEase && !vars.repeat) {
+            //so that propagation works properly when a ancestor timeline yoyos
+            copy.yoyoEase = vars.yoyoEase;
+          }
+
+          curTarget = parsedTargets[i]; //don't just copy duration or delay because if they're a string or function, we'd end up in an infinite loop because _isFuncOrString() would evaluate as true in the child tweens, entering this loop, etc. So we parse the value straight from vars and default to 0.
+
+          copy.duration = +_parseFuncOrString(duration, _assertThisInitialized(_this3), i, curTarget, parsedTargets);
+          copy.delay = (+_parseFuncOrString(delay, _assertThisInitialized(_this3), i, curTarget, parsedTargets) || 0) - _this3._delay;
+
+          if (!stagger && l === 1 && copy.delay) {
+            // if someone does delay:"random(1, 5)", repeat:-1, for example, the delay shouldn't be inside the repeat.
+            _this3._delay = delay = copy.delay;
+            _this3._start += delay;
+            copy.delay = 0;
+          }
+
+          tl.to(curTarget, copy, staggerFunc(i, curTarget, parsedTargets));
+        }
+
+        duration = delay = 0;
+      }
+
+      duration || _this3.duration(duration = tl.duration());
+    } else {
+      _this3.timeline = 0; //speed optimization, faster lookups (no going up the prototype chain)
+    }
+
+    if (overwrite === true) {
+      _overwritingTween = _assertThisInitialized(_this3);
+
+      _globalTimeline.killTweensOf(parsedTargets);
+
+      _overwritingTween = 0;
+    }
+
+    parent && _postAddChecks(parent, _assertThisInitialized(_this3));
+
+    if (immediateRender || !duration && !keyframes && _this3._start === parent._time && _isNotFalse(immediateRender) && _hasNoPausedAncestors(_assertThisInitialized(_this3)) && parent.data !== "nested") {
+      _this3._tTime = -_tinyNum; //forces a render without having to set the render() "force" parameter to true because we want to allow lazying by default (using the "force" parameter always forces an immediate full render)
+
+      _this3.render(Math.max(0, -delay)); //in case delay is negative
+
+    }
+
+    return _this3;
+  }
+
+  var _proto3 = Tween.prototype;
+
+  _proto3.render = function render(totalTime, suppressEvents, force) {
+    var prevTime = this._time,
+        tDur = this._tDur,
+        dur = this._dur,
+        tTime = totalTime > tDur - _tinyNum && totalTime >= 0 ? tDur : totalTime < _tinyNum ? 0 : totalTime,
+        time,
+        pt,
+        iteration,
+        cycleDuration,
+        prevIteration,
+        isYoyo,
+        ratio,
+        timeline,
+        yoyoEase;
+
+    if (!dur) {
+      _renderZeroDurationTween(this, totalTime, suppressEvents, force);
+    } else if (tTime !== this._tTime || !totalTime || force || this._startAt && this._zTime < 0 !== totalTime < 0) {
+      //this senses if we're crossing over the start time, in which case we must record _zTime and force the render, but we do it in this lengthy conditional way for performance reasons (usually we can skip the calculations): this._initted && (this._zTime < 0) !== (totalTime < 0)
+      time = tTime;
+      timeline = this.timeline;
+
+      if (this._repeat) {
+        //adjust the time for repeats and yoyos
+        cycleDuration = dur + this._rDelay;
+        time = _round(tTime % cycleDuration); //round to avoid floating point errors. (4 % 0.8 should be 0 but some browsers report it as 0.79999999!)
+
+        if (time > dur || tDur === tTime) {
+          // the tDur === tTime is for edge cases where there's a lengthy decimal on the duration and it may reach the very end but the time is rendered as not-quite-there (remember, tDur is rounded to 4 decimals whereas dur isn't)
+          time = dur;
+        }
+
+        iteration = ~~(tTime / cycleDuration);
+
+        if (iteration && iteration === tTime / cycleDuration) {
+          time = dur;
+          iteration--;
+        }
+
+        isYoyo = this._yoyo && iteration & 1;
+
+        if (isYoyo) {
+          yoyoEase = this._yEase;
+          time = dur - time;
+        }
+
+        prevIteration = _animationCycle(this._tTime, cycleDuration);
+
+        if (time === prevTime && !force && this._initted) {
+          //could be during the repeatDelay part. No need to render and fire callbacks.
+          return this;
+        }
+
+        if (iteration !== prevIteration) {
+          //timeline && this._yEase && _propagateYoyoEase(timeline, isYoyo);
+          //repeatRefresh functionality
+          if (this.vars.repeatRefresh && !isYoyo && !this._lock) {
+            this._lock = force = 1; //force, otherwise if lazy is true, the _attemptInitTween() will return and we'll jump out and get caught bouncing on each tick.
+
+            this.render(cycleDuration * iteration, true).invalidate()._lock = 0;
+          }
+        }
+      }
+
+      if (!this._initted) {
+        if (_attemptInitTween(this, time, force, suppressEvents)) {
+          this._tTime = 0; // in constructor if immediateRender is true, we set _tTime to -_tinyNum to have the playhead cross the starting point but we can't leave _tTime as a negative number.
+
+          return this;
+        }
+
+        if (dur !== this._dur) {
+          // while initting, a plugin like InertiaPlugin might alter the duration, so rerun from the start to ensure everything renders as it should.
+          return this.render(totalTime, suppressEvents, force);
+        }
+      }
+
+      this._tTime = tTime;
+      this._time = time;
+
+      if (!this._act && this._ts) {
+        this._act = 1; //as long as it's not paused, force it to be active so that if the user renders independent of the parent timeline, it'll be forced to re-render on the next tick.
+
+        this._lazy = 0;
+      }
+
+      this.ratio = ratio = (yoyoEase || this._ease)(time / dur);
+
+      if (this._from) {
+        this.ratio = ratio = 1 - ratio;
+      }
+
+      if (!prevTime && time && !suppressEvents) {
+        _callback(this, "onStart");
+      }
+
+      pt = this._pt;
+
+      while (pt) {
+        pt.r(ratio, pt.d);
+        pt = pt._next;
+      }
+
+      timeline && timeline.render(totalTime < 0 ? totalTime : !time && isYoyo ? -_tinyNum : timeline._dur * ratio, suppressEvents, force) || this._startAt && (this._zTime = totalTime);
+
+      if (this._onUpdate && !suppressEvents) {
+        if (totalTime < 0 && this._startAt) {
+          this._startAt.render(totalTime, true, force); //note: for performance reasons, we tuck this conditional logic inside less traveled areas (most tweens don't have an onUpdate). We'd just have it at the end before the onComplete, but the values should be updated before any onUpdate is called, so we ALSO put it here and then if it's not called, we do so later near the onComplete.
+
+        }
+
+        _callback(this, "onUpdate");
+      }
+
+      if (this._repeat) if (iteration !== prevIteration && this.vars.onRepeat && !suppressEvents && this.parent) {
+        _callback(this, "onRepeat");
+      }
+
+      if ((tTime === this._tDur || !tTime) && this._tTime === tTime) {
+        if (totalTime < 0 && this._startAt && !this._onUpdate) {
+          this._startAt.render(totalTime, true, force);
+        }
+
+        (totalTime || !dur) && (totalTime && this._ts > 0 || !tTime && this._ts < 0) && _removeFromParent(this, 1); // don't remove if we're rendering at exactly a time of 0, as there could be autoRevert values that should get set on the next tick (if the playhead goes backward beyond the startTime, negative totalTime). Don't remove if the timeline is reversed and the playhead isn't at 0, otherwise tl.progress(1).reverse() won't work. Only remove if the playhead is at the end and timeScale is positive, or if the playhead is at 0 and the timeScale is negative.
+
+        if (!suppressEvents && !(totalTime < 0 && !prevTime) && !(tTime < tDur && this.timeScale() > 0)) {
+          _callback(this, tTime === tDur ? "onComplete" : "onReverseComplete", true);
+
+          this._prom && this._prom();
+        }
+      }
+    }
+
+    return this;
+  };
+
+  _proto3.targets = function targets() {
+    return this._targets;
+  };
+
+  _proto3.invalidate = function invalidate() {
+    this._pt = this._op = this._startAt = this._onUpdate = this._act = this._lazy = 0;
+    this._ptLookup = [];
+    this.timeline && this.timeline.invalidate();
+    return _Animation2.prototype.invalidate.call(this);
+  };
+
+  _proto3.kill = function kill(targets, vars) {
+    if (vars === void 0) {
+      vars = "all";
+    }
+
+    if (!targets && (!vars || vars === "all")) {
+      this._lazy = 0;
+
+      if (this.parent) {
+        return _interrupt(this);
+      }
+    }
+
+    if (this.timeline) {
+      this.timeline.killTweensOf(targets, vars, _overwritingTween && _overwritingTween.vars.overwrite !== true);
+      return this;
+    }
+
+    var parsedTargets = this._targets,
+        killingTargets = targets ? toArray(targets) : parsedTargets,
+        propTweenLookup = this._ptLookup,
+        firstPT = this._pt,
+        overwrittenProps,
+        curLookup,
+        curOverwriteProps,
+        props,
+        p,
+        pt,
+        i;
+
+    if ((!vars || vars === "all") && _arraysMatch(parsedTargets, killingTargets)) {
+      return _interrupt(this);
+    }
+
+    overwrittenProps = this._op = this._op || [];
+
+    if (vars !== "all") {
+      //so people can pass in a comma-delimited list of property names
+      if (_isString(vars)) {
+        p = {};
+
+        _forEachName(vars, function (name) {
+          return p[name] = 1;
+        });
+
+        vars = p;
+      }
+
+      vars = _addAliasesToVars(parsedTargets, vars);
+    }
+
+    i = parsedTargets.length;
+
+    while (i--) {
+      if (~killingTargets.indexOf(parsedTargets[i])) {
+        curLookup = propTweenLookup[i];
+
+        if (vars === "all") {
+          overwrittenProps[i] = vars;
+          props = curLookup;
+          curOverwriteProps = {};
+        } else {
+          curOverwriteProps = overwrittenProps[i] = overwrittenProps[i] || {};
+          props = vars;
+        }
+
+        for (p in props) {
+          pt = curLookup && curLookup[p];
+
+          if (pt) {
+            if (!("kill" in pt.d) || pt.d.kill(p) === true) {
+              _removeLinkedListItem(this, pt, "_pt");
+            }
+
+            delete curLookup[p];
+          }
+
+          if (curOverwriteProps !== "all") {
+            curOverwriteProps[p] = 1;
+          }
+        }
+      }
+    }
+
+    if (this._initted && !this._pt && firstPT) {
+      //if all tweening properties are killed, kill the tween. Without this line, if there's a tween with multiple targets and then you killTweensOf() each target individually, the tween would technically still remain active and fire its onComplete even though there aren't any more properties tweening.
+      _interrupt(this);
+    }
+
+    return this;
+  };
+
+  Tween.to = function to(targets, vars) {
+    return new Tween(targets, vars, arguments[2]);
+  };
+
+  Tween.from = function from(targets, vars) {
+    return new Tween(targets, _parseVars(arguments, 1));
+  };
+
+  Tween.delayedCall = function delayedCall(delay, callback, params, scope) {
+    return new Tween(callback, 0, {
+      immediateRender: false,
+      lazy: false,
+      overwrite: false,
+      delay: delay,
+      onComplete: callback,
+      onReverseComplete: callback,
+      onCompleteParams: params,
+      onReverseCompleteParams: params,
+      callbackScope: scope
+    });
+  };
+
+  Tween.fromTo = function fromTo(targets, fromVars, toVars) {
+    return new Tween(targets, _parseVars(arguments, 2));
+  };
+
+  Tween.set = function set(targets, vars) {
+    vars.duration = 0;
+    vars.repeatDelay || (vars.repeat = 0);
+    return new Tween(targets, vars);
+  };
+
+  Tween.killTweensOf = function killTweensOf(targets, props, onlyActive) {
+    return _globalTimeline.killTweensOf(targets, props, onlyActive);
+  };
+
+  return Tween;
+}(Animation);
+
+exports.TweenLite = exports.TweenMax = exports.Tween = Tween;
+
+_setDefaults(Tween.prototype, {
+  _targets: [],
+  _lazy: 0,
+  _startAt: 0,
+  _op: 0,
+  _onInit: 0
+}); //add the pertinent timeline methods to Tween instances so that users can chain conveniently and create a timeline automatically. (removed due to concerns that it'd ultimately add to more confusion especially for beginners)
+// _forEachName("to,from,fromTo,set,call,add,addLabel,addPause", name => {
+// 	Tween.prototype[name] = function() {
+// 		let tl = new Timeline();
+// 		return _addToTimeline(tl, this)[name].apply(tl, toArray(arguments));
+// 	}
+// });
+//for backward compatibility. Leverage the timeline calls.
+
+
+_forEachName("staggerTo,staggerFrom,staggerFromTo", function (name) {
+  Tween[name] = function () {
+    var tl = new Timeline(),
+        params = _slice.call(arguments, 0);
+
+    params.splice(name === "staggerFromTo" ? 5 : 4, 0, 0);
+    return tl[name].apply(tl, params);
+  };
+});
+/*
+ * --------------------------------------------------------------------------------------
+ * PROPTWEEN
+ * --------------------------------------------------------------------------------------
+ */
+
+
+var _setterPlain = function _setterPlain(target, property, value) {
+  return target[property] = value;
+},
+    _setterFunc = function _setterFunc(target, property, value) {
+  return target[property](value);
+},
+    _setterFuncWithParam = function _setterFuncWithParam(target, property, value, data) {
+  return target[property](data.fp, value);
+},
+    _setterAttribute = function _setterAttribute(target, property, value) {
+  return target.setAttribute(property, value);
+},
+    _getSetter = function _getSetter(target, property) {
+  return _isFunction(target[property]) ? _setterFunc : _isUndefined(target[property]) && target.setAttribute ? _setterAttribute : _setterPlain;
+},
+    _renderPlain = function _renderPlain(ratio, data) {
+  return data.set(data.t, data.p, Math.round((data.s + data.c * ratio) * 10000) / 10000, data);
+},
+    _renderBoolean = function _renderBoolean(ratio, data) {
+  return data.set(data.t, data.p, !!(data.s + data.c * ratio), data);
+},
+    _renderComplexString = function _renderComplexString(ratio, data) {
+  var pt = data._pt,
+      s = "";
+
+  if (!ratio && data.b) {
+    //b = beginning string
+    s = data.b;
+  } else if (ratio === 1 && data.e) {
+    //e = ending string
+    s = data.e;
+  } else {
+    while (pt) {
+      s = pt.p + (pt.m ? pt.m(pt.s + pt.c * ratio) : Math.round((pt.s + pt.c * ratio) * 10000) / 10000) + s; //we use the "p" property for the text inbetween (like a suffix). And in the context of a complex string, the modifier (m) is typically just Math.round(), like for RGB colors.
+
+      pt = pt._next;
+    }
+
+    s += data.c; //we use the "c" of the PropTween to store the final chunk of non-numeric text.
+  }
+
+  data.set(data.t, data.p, s, data);
+},
+    _renderPropTweens = function _renderPropTweens(ratio, data) {
+  var pt = data._pt;
+
+  while (pt) {
+    pt.r(ratio, pt.d);
+    pt = pt._next;
+  }
+},
+    _addPluginModifier = function _addPluginModifier(modifier, tween, target, property) {
+  var pt = this._pt,
+      next;
+
+  while (pt) {
+    next = pt._next;
+
+    if (pt.p === property) {
+      pt.modifier(modifier, tween, target);
+    }
+
+    pt = next;
+  }
+},
+    _killPropTweensOf = function _killPropTweensOf(property) {
+  var pt = this._pt,
+      hasNonDependentRemaining,
+      next;
+
+  while (pt) {
+    next = pt._next;
+
+    if (pt.p === property && !pt.op || pt.op === property) {
+      _removeLinkedListItem(this, pt, "_pt");
+    } else if (!pt.dep) {
+      hasNonDependentRemaining = 1;
+    }
+
+    pt = next;
+  }
+
+  return !hasNonDependentRemaining;
+},
+    _setterWithModifier = function _setterWithModifier(target, property, value, data) {
+  data.mSet(target, property, data.m.call(data.tween, value, data.mt), data);
+},
+    _sortPropTweensByPriority = function _sortPropTweensByPriority(parent) {
+  var pt = parent._pt,
+      next,
+      pt2,
+      first,
+      last; //sorts the PropTween linked list in order of priority because some plugins need to do their work after ALL of the PropTweens were created (like RoundPropsPlugin and ModifiersPlugin)
+
+  while (pt) {
+    next = pt._next;
+    pt2 = first;
+
+    while (pt2 && pt2.pr > pt.pr) {
+      pt2 = pt2._next;
+    }
+
+    if (pt._prev = pt2 ? pt2._prev : last) {
+      pt._prev._next = pt;
+    } else {
+      first = pt;
+    }
+
+    if (pt._next = pt2) {
+      pt2._prev = pt;
+    } else {
+      last = pt;
+    }
+
+    pt = next;
+  }
+
+  parent._pt = first;
+}; //PropTween key: t = target, p = prop, r = renderer, d = data, s = start, c = change, op = overwriteProperty (ONLY populated when it's different than p), pr = priority, _next/_prev for the linked list siblings, set = setter, m = modifier, mSet = modifierSetter (the original setter, before a modifier was added)
+
+
+exports._sortPropTweensByPriority = _sortPropTweensByPriority;
+exports._renderComplexString = _renderComplexString;
+exports._getSetter = _getSetter;
+
+var PropTween = /*#__PURE__*/function () {
+  function PropTween(next, target, prop, start, change, renderer, data, setter, priority) {
+    this.t = target;
+    this.s = start;
+    this.c = change;
+    this.p = prop;
+    this.r = renderer || _renderPlain;
+    this.d = data || this;
+    this.set = setter || _setterPlain;
+    this.pr = priority || 0;
+    this._next = next;
+
+    if (next) {
+      next._prev = this;
+    }
+  }
+
+  var _proto4 = PropTween.prototype;
+
+  _proto4.modifier = function modifier(func, tween, target) {
+    this.mSet = this.mSet || this.set; //in case it was already set (a PropTween can only have one modifier)
+
+    this.set = _setterWithModifier;
+    this.m = func;
+    this.mt = target; //modifier target
+
+    this.tween = tween;
+  };
+
+  return PropTween;
+}(); //Initialization tasks
+
+
+exports.PropTween = PropTween;
+
+_forEachName(_callbackNames + "parent,duration,ease,delay,overwrite,runBackwards,startAt,yoyo,immediateRender,repeat,repeatDelay,data,paused,reversed,lazy,callbackScope,stringFilter,id,yoyoEase,stagger,inherit,repeatRefresh,keyframes,autoRevert", function (name) {
+  return _reservedProps[name] = 1;
+});
+
+_globals.TweenMax = _globals.TweenLite = Tween;
+_globals.TimelineLite = _globals.TimelineMax = Timeline;
+_globalTimeline = new Timeline({
+  sortChildren: false,
+  defaults: _defaults,
+  autoRemoveChildren: true,
+  id: "root",
+  smoothChildTiming: true
+});
+_config.stringFilter = _colorStringFilter;
+/*
+ * --------------------------------------------------------------------------------------
+ * GSAP
+ * --------------------------------------------------------------------------------------
+ */
+
+var _gsap = {
+  registerPlugin: function registerPlugin() {
+    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
+    }
+
+    args.forEach(function (config) {
+      return _createPlugin(config);
+    });
+  },
+  timeline: function timeline(vars) {
+    return new Timeline(vars);
+  },
+  getTweensOf: function getTweensOf(targets, onlyActive) {
+    return _globalTimeline.getTweensOf(targets, onlyActive);
+  },
+  getProperty: function getProperty(target, property, unit, uncache) {
+    if (_isString(target)) {
+      //in case selector text or an array is passed in
+      target = toArray(target)[0];
+    }
+
+    var getter = _getCache(target || {}).get,
+        format = unit ? _passThrough : _numericIfPossible;
+
+    if (unit === "native") {
+      unit = "";
+    }
+
+    return !target ? target : !property ? function (property, unit, uncache) {
+      return format((_plugins[property] && _plugins[property].get || getter)(target, property, unit, uncache));
+    } : format((_plugins[property] && _plugins[property].get || getter)(target, property, unit, uncache));
+  },
+  quickSetter: function quickSetter(target, property, unit) {
+    target = toArray(target);
+
+    if (target.length > 1) {
+      var setters = target.map(function (t) {
+        return gsap.quickSetter(t, property, unit);
+      }),
+          l = setters.length;
+      return function (value) {
+        var i = l;
+
+        while (i--) {
+          setters[i](value);
+        }
+      };
+    }
+
+    target = target[0] || {};
+
+    var Plugin = _plugins[property],
+        cache = _getCache(target),
+        setter = Plugin ? function (value) {
+      var p = new Plugin();
+      _quickTween._pt = 0;
+      p.init(target, unit ? value + unit : value, _quickTween, 0, [target]);
+      p.render(1, p);
+      _quickTween._pt && _renderPropTweens(1, _quickTween);
+    } : cache.set(target, property);
+
+    return Plugin ? setter : function (value) {
+      return setter(target, property, unit ? value + unit : value, cache, 1);
+    };
+  },
+  isTweening: function isTweening(targets) {
+    return _globalTimeline.getTweensOf(targets, true).length > 0;
+  },
+  defaults: function defaults(value) {
+    if (value && value.ease) {
+      value.ease = _parseEase(value.ease, _defaults.ease);
+    }
+
+    return _mergeDeep(_defaults, value || {});
+  },
+  config: function config(value) {
+    return _mergeDeep(_config, value || {});
+  },
+  registerEffect: function registerEffect(_ref) {
+    var name = _ref.name,
+        effect = _ref.effect,
+        plugins = _ref.plugins,
+        defaults = _ref.defaults,
+        extendTimeline = _ref.extendTimeline;
+    (plugins || "").split(",").forEach(function (pluginName) {
+      return pluginName && !_plugins[pluginName] && !_globals[pluginName] && _warn(name + " effect requires " + pluginName + " plugin.");
+    });
+
+    _effects[name] = function (targets, vars, tl) {
+      return effect(toArray(targets), _setDefaults(vars || {}, defaults), tl);
+    };
+
+    if (extendTimeline) {
+      Timeline.prototype[name] = function (targets, vars, position) {
+        return this.add(_effects[name](targets, _isObject(vars) ? vars : (position = vars) && {}, this), position);
+      };
+    }
+  },
+  registerEase: function registerEase(name, ease) {
+    _easeMap[name] = _parseEase(ease);
+  },
+  parseEase: function parseEase(ease, defaultEase) {
+    return arguments.length ? _parseEase(ease, defaultEase) : _easeMap;
+  },
+  getById: function getById(id) {
+    return _globalTimeline.getById(id);
+  },
+  exportRoot: function exportRoot(vars, includeDelayedCalls) {
+    if (vars === void 0) {
+      vars = {};
+    }
+
+    var tl = new Timeline(vars),
+        child,
+        next;
+    tl.smoothChildTiming = _isNotFalse(vars.smoothChildTiming);
+
+    _globalTimeline.remove(tl);
+
+    tl._dp = 0; //otherwise it'll get re-activated when adding children and be re-introduced into _globalTimeline's linked list (then added to itself).
+
+    tl._time = tl._tTime = _globalTimeline._time;
+    child = _globalTimeline._first;
+
+    while (child) {
+      next = child._next;
+
+      if (includeDelayedCalls || !(!child._dur && child instanceof Tween && child.vars.onComplete === child._targets[0])) {
+        _addToTimeline(tl, child, child._start - child._delay);
+      }
+
+      child = next;
+    }
+
+    _addToTimeline(_globalTimeline, tl, 0);
+
+    return tl;
+  },
+  utils: {
+    wrap: wrap,
+    wrapYoyo: wrapYoyo,
+    distribute: distribute,
+    random: random,
+    snap: snap,
+    normalize: normalize,
+    getUnit: getUnit,
+    clamp: clamp,
+    splitColor: splitColor,
+    toArray: toArray,
+    mapRange: mapRange,
+    pipe: pipe,
+    unitize: unitize,
+    interpolate: interpolate,
+    shuffle: shuffle
+  },
+  install: _install,
+  effects: _effects,
+  ticker: _ticker,
+  updateRoot: Timeline.updateRoot,
+  plugins: _plugins,
+  globalTimeline: _globalTimeline,
+  core: {
+    PropTween: PropTween,
+    globals: _addGlobal,
+    Tween: Tween,
+    Timeline: Timeline,
+    Animation: Animation,
+    getCache: _getCache,
+    _removeLinkedListItem: _removeLinkedListItem
+  }
+};
+
+_forEachName("to,from,fromTo,delayedCall,set,killTweensOf", function (name) {
+  return _gsap[name] = Tween[name];
+});
+
+_ticker.add(Timeline.updateRoot);
+
+_quickTween = _gsap.to({}, {
+  duration: 0
+}); // ---- EXTRA PLUGINS --------------------------------------------------------
+
+var _getPluginPropTween = function _getPluginPropTween(plugin, prop) {
+  var pt = plugin._pt;
+
+  while (pt && pt.p !== prop && pt.op !== prop && pt.fp !== prop) {
+    pt = pt._next;
+  }
+
+  return pt;
+},
+    _addModifiers = function _addModifiers(tween, modifiers) {
+  var targets = tween._targets,
+      p,
+      i,
+      pt;
+
+  for (p in modifiers) {
+    i = targets.length;
+
+    while (i--) {
+      pt = tween._ptLookup[i][p];
+
+      if (pt && (pt = pt.d)) {
+        if (pt._pt) {
+          // is a plugin
+          pt = _getPluginPropTween(pt, p);
+        }
+
+        pt && pt.modifier && pt.modifier(modifiers[p], tween, targets[i], p);
+      }
+    }
+  }
+},
+    _buildModifierPlugin = function _buildModifierPlugin(name, modifier) {
+  return {
+    name: name,
+    rawVars: 1,
+    //don't pre-process function-based values or "random()" strings.
+    init: function init(target, vars, tween) {
+      tween._onInit = function (tween) {
+        var temp, p;
+
+        if (_isString(vars)) {
+          temp = {};
+
+          _forEachName(vars, function (name) {
+            return temp[name] = 1;
+          }); //if the user passes in a comma-delimited list of property names to roundProps, like "x,y", we round to whole numbers.
+
+
+          vars = temp;
+        }
+
+        if (modifier) {
+          temp = {};
+
+          for (p in vars) {
+            temp[p] = modifier(vars[p]);
+          }
+
+          vars = temp;
+        }
+
+        _addModifiers(tween, vars);
+      };
+    }
+  };
+}; //register core plugins
+
+
+var gsap = _gsap.registerPlugin({
+  name: "attr",
+  init: function init(target, vars, tween, index, targets) {
+    for (var p in vars) {
+      this.add(target, "setAttribute", (target.getAttribute(p) || 0) + "", vars[p], index, targets, 0, 0, p); //this.add(target, "setAttribute", (target.getAttribute((p in target.dataset ? (p = "data-" + p) : p)) || 0) + "", vars[p], index, targets, 0, 0, p);
+
+      this._props.push(p);
+    }
+  }
+}, {
+  name: "endArray",
+  init: function init(target, value) {
+    var i = value.length;
+
+    while (i--) {
+      this.add(target, i, target[i] || 0, value[i]);
+    }
+  }
+}, _buildModifierPlugin("roundProps", _roundModifier), _buildModifierPlugin("modifiers"), _buildModifierPlugin("snap", snap)) || _gsap; //to prevent the core plugins from being dropped via aggressive tree shaking, we must include them in the variable declaration in this way.
+
+
+exports.default = exports.gsap = gsap;
+Tween.version = Timeline.version = gsap.version = "3.2.6";
+_coreReady = 1;
+
+if (_windowExists()) {
+  _wake();
+}
+
+var Power0 = _easeMap.Power0,
+    Power1 = _easeMap.Power1,
+    Power2 = _easeMap.Power2,
+    Power3 = _easeMap.Power3,
+    Power4 = _easeMap.Power4,
+    Linear = _easeMap.Linear,
+    Quad = _easeMap.Quad,
+    Cubic = _easeMap.Cubic,
+    Quart = _easeMap.Quart,
+    Quint = _easeMap.Quint,
+    Strong = _easeMap.Strong,
+    Elastic = _easeMap.Elastic,
+    Back = _easeMap.Back,
+    SteppedEase = _easeMap.SteppedEase,
+    Bounce = _easeMap.Bounce,
+    Sine = _easeMap.Sine,
+    Expo = _easeMap.Expo,
+    Circ = _easeMap.Circ;
+exports.Circ = Circ;
+exports.Expo = Expo;
+exports.Sine = Sine;
+exports.Bounce = Bounce;
+exports.SteppedEase = SteppedEase;
+exports.Back = Back;
+exports.Elastic = Elastic;
+exports.Strong = Strong;
+exports.Quint = Quint;
+exports.Quart = Quart;
+exports.Cubic = Cubic;
+exports.Quad = Quad;
+exports.Linear = Linear;
+exports.Power4 = Power4;
+exports.Power3 = Power3;
+exports.Power2 = Power2;
+exports.Power1 = Power1;
+exports.Power0 = Power0;
+},{}],"bp4Z":[function(require,module,exports) {
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.checkPrefix = exports._createElement = exports._getBBox = exports.default = exports.CSSPlugin = void 0;
+
+var _gsapCore = require("./gsap-core.js");
+
+/*!
+ * CSSPlugin 3.2.6
+ * https://greensock.com
+ *
+ * Copyright 2008-2020, GreenSock. All rights reserved.
+ * Subject to the terms at https://greensock.com/standard-license or for
+ * Club GreenSock members, the agreement issued with that membership.
+ * @author: Jack Doyle, jack@greensock.com
+*/
+
+/* eslint-disable */
+var _win,
+    _doc,
+    _docElement,
+    _pluginInitted,
+    _tempDiv,
+    _tempDivStyler,
+    _recentSetterPlugin,
+    _windowExists = function _windowExists() {
+  return typeof window !== "undefined";
+},
+    _transformProps = {},
+    _RAD2DEG = 180 / Math.PI,
+    _DEG2RAD = Math.PI / 180,
+    _atan2 = Math.atan2,
+    _bigNum = 1e8,
+    _capsExp = /([A-Z])/g,
+    _horizontalExp = /(?:left|right|width|margin|padding|x)/i,
+    _complexExp = /[\s,\(]\S/,
+    _propertyAliases = {
+  autoAlpha: "opacity,visibility",
+  scale: "scaleX,scaleY",
+  alpha: "opacity"
+},
+    _renderCSSProp = function _renderCSSProp(ratio, data) {
+  return data.set(data.t, data.p, Math.round((data.s + data.c * ratio) * 10000) / 10000 + data.u, data);
+},
+    _renderPropWithEnd = function _renderPropWithEnd(ratio, data) {
+  return data.set(data.t, data.p, ratio === 1 ? data.e : Math.round((data.s + data.c * ratio) * 10000) / 10000 + data.u, data);
+},
+    _renderCSSPropWithBeginning = function _renderCSSPropWithBeginning(ratio, data) {
+  return data.set(data.t, data.p, ratio ? Math.round((data.s + data.c * ratio) * 10000) / 10000 + data.u : data.b, data);
+},
+    //if units change, we need a way to render the original unit/value when the tween goes all the way back to the beginning (ratio:0)
+_renderRoundedCSSProp = function _renderRoundedCSSProp(ratio, data) {
+  var value = data.s + data.c * ratio;
+  data.set(data.t, data.p, ~~(value + (value < 0 ? -.5 : .5)) + data.u, data);
+},
+    _renderNonTweeningValue = function _renderNonTweeningValue(ratio, data) {
+  return data.set(data.t, data.p, ratio ? data.e : data.b, data);
+},
+    _renderNonTweeningValueOnlyAtEnd = function _renderNonTweeningValueOnlyAtEnd(ratio, data) {
+  return data.set(data.t, data.p, ratio !== 1 ? data.b : data.e, data);
+},
+    _setterCSSStyle = function _setterCSSStyle(target, property, value) {
+  return target.style[property] = value;
+},
+    _setterCSSProp = function _setterCSSProp(target, property, value) {
+  return target.style.setProperty(property, value);
+},
+    _setterTransform = function _setterTransform(target, property, value) {
+  return target._gsap[property] = value;
+},
+    _setterScale = function _setterScale(target, property, value) {
+  return target._gsap.scaleX = target._gsap.scaleY = value;
+},
+    _setterScaleWithRender = function _setterScaleWithRender(target, property, value, data, ratio) {
+  var cache = target._gsap;
+  cache.scaleX = cache.scaleY = value;
+  cache.renderTransform(ratio, cache);
+},
+    _setterTransformWithRender = function _setterTransformWithRender(target, property, value, data, ratio) {
+  var cache = target._gsap;
+  cache[property] = value;
+  cache.renderTransform(ratio, cache);
+},
+    _transformProp = "transform",
+    _transformOriginProp = _transformProp + "Origin",
+    _supports3D,
+    _createElement = function _createElement(type, ns) {
+  var e = _doc.createElementNS ? _doc.createElementNS((ns || "http://www.w3.org/1999/xhtml").replace(/^https/, "http"), type) : _doc.createElement(type); //some servers swap in https for http in the namespace which can break things, making "style" inaccessible.
+
+  return e.style ? e : _doc.createElement(type); //some environments won't allow access to the element's style when created with a namespace in which case we default to the standard createElement() to work around the issue. Also note that when GSAP is embedded directly inside an SVG file, createElement() won't allow access to the style object in Firefox (see https://greensock.com/forums/topic/20215-problem-using-tweenmax-in-standalone-self-containing-svg-file-err-cannot-set-property-csstext-of-undefined/).
+},
+    _getComputedProperty = function _getComputedProperty(target, property, skipPrefixFallback) {
+  var cs = getComputedStyle(target);
+  return cs[property] || cs.getPropertyValue(property.replace(_capsExp, "-$1").toLowerCase()) || cs.getPropertyValue(property) || !skipPrefixFallback && _getComputedProperty(target, _checkPropPrefix(property) || property, 1) || ""; //css variables may not need caps swapped out for dashes and lowercase.
+},
+    _prefixes = "O,Moz,ms,Ms,Webkit".split(","),
+    _checkPropPrefix = function _checkPropPrefix(property, element, preferPrefix) {
+  var e = element || _tempDiv,
+      s = e.style,
+      i = 5;
+
+  if (property in s && !preferPrefix) {
+    return property;
+  }
+
+  property = property.charAt(0).toUpperCase() + property.substr(1);
+
+  while (i-- && !(_prefixes[i] + property in s)) {}
+
+  return i < 0 ? null : (i === 3 ? "ms" : i >= 0 ? _prefixes[i] : "") + property;
+},
+    _initCore = function _initCore() {
+  if (_windowExists()) {
+    _win = window;
+    _doc = _win.document;
+    _docElement = _doc.documentElement;
+    _tempDiv = _createElement("div") || {
+      style: {}
+    };
+    _tempDivStyler = _createElement("div");
+    _transformProp = _checkPropPrefix(_transformProp);
+    _transformOriginProp = _checkPropPrefix(_transformOriginProp);
+    _tempDiv.style.cssText = "border-width:0;line-height:0;position:absolute;padding:0"; //make sure to override certain properties that may contaminate measurements, in case the user has overreaching style sheets.
+
+    _supports3D = !!_checkPropPrefix("perspective");
+    _pluginInitted = 1;
+  }
+},
+    _getBBoxHack = function _getBBoxHack(swapIfPossible) {
+  //works around issues in some browsers (like Firefox) that don't correctly report getBBox() on SVG elements inside a <defs> element and/or <mask>. We try creating an SVG, adding it to the documentElement and toss the element in there so that it's definitely part of the rendering tree, then grab the bbox and if it works, we actually swap out the original getBBox() method for our own that does these extra steps whenever getBBox is needed. This helps ensure that performance is optimal (only do all these extra steps when absolutely necessary...most elements don't need it).
+  var svg = _createElement("svg", this.ownerSVGElement && this.ownerSVGElement.getAttribute("xmlns") || "http://www.w3.org/2000/svg"),
+      oldParent = this.parentNode,
+      oldSibling = this.nextSibling,
+      oldCSS = this.style.cssText,
+      bbox;
+
+  _docElement.appendChild(svg);
+
+  svg.appendChild(this);
+  this.style.display = "block";
+
+  if (swapIfPossible) {
+    try {
+      bbox = this.getBBox();
+      this._gsapBBox = this.getBBox; //store the original
+
+      this.getBBox = _getBBoxHack;
+    } catch (e) {}
+  } else if (this._gsapBBox) {
+    bbox = this._gsapBBox();
+  }
+
+  if (oldParent) {
+    if (oldSibling) {
+      oldParent.insertBefore(this, oldSibling);
+    } else {
+      oldParent.appendChild(this);
+    }
+  }
+
+  _docElement.removeChild(svg);
+
+  this.style.cssText = oldCSS;
+  return bbox;
+},
+    _getAttributeFallbacks = function _getAttributeFallbacks(target, attributesArray) {
+  var i = attributesArray.length;
+
+  while (i--) {
+    if (target.hasAttribute(attributesArray[i])) {
+      return target.getAttribute(attributesArray[i]);
+    }
+  }
+},
+    _getBBox = function _getBBox(target) {
+  var bounds;
+
+  try {
+    bounds = target.getBBox(); //Firefox throws errors if you try calling getBBox() on an SVG element that's not rendered (like in a <symbol> or <defs>). https://bugzilla.mozilla.org/show_bug.cgi?id=612118
+  } catch (error) {
+    bounds = _getBBoxHack.call(target, true);
+  }
+
+  bounds && (bounds.width || bounds.height) || target.getBBox === _getBBoxHack || (bounds = _getBBoxHack.call(target, true)); //some browsers (like Firefox) misreport the bounds if the element has zero width and height (it just assumes it's at x:0, y:0), thus we need to manually grab the position in that case.
+
+  return bounds && !bounds.width && !bounds.x && !bounds.y ? {
+    x: +_getAttributeFallbacks(target, ["x", "cx", "x1"]) || 0,
+    y: +_getAttributeFallbacks(target, ["y", "cy", "y1"]) || 0,
+    width: 0,
+    height: 0
+  } : bounds;
+},
+    _isSVG = function _isSVG(e) {
+  return !!(e.getCTM && (!e.parentNode || e.ownerSVGElement) && _getBBox(e));
+},
+    //reports if the element is an SVG on which getBBox() actually works
+_removeProperty = function _removeProperty(target, property) {
+  if (property) {
+    var style = target.style;
+
+    if (property in _transformProps) {
+      property = _transformProp;
+    }
+
+    if (style.removeProperty) {
+      if (property.substr(0, 2) === "ms" || property.substr(0, 6) === "webkit") {
+        //Microsoft and some Webkit browsers don't conform to the standard of capitalizing the first prefix character, so we adjust so that when we prefix the caps with a dash, it's correct (otherwise it'd be "ms-transform" instead of "-ms-transform" for IE9, for example)
+        property = "-" + property;
+      }
+
+      style.removeProperty(property.replace(_capsExp, "-$1").toLowerCase());
+    } else {
+      //note: old versions of IE use "removeAttribute()" instead of "removeProperty()"
+      style.removeAttribute(property);
+    }
+  }
+},
+    _addNonTweeningPT = function _addNonTweeningPT(plugin, target, property, beginning, end, onlySetAtEnd) {
+  var pt = new _gsapCore.PropTween(plugin._pt, target, property, 0, 1, onlySetAtEnd ? _renderNonTweeningValueOnlyAtEnd : _renderNonTweeningValue);
+  plugin._pt = pt;
+  pt.b = beginning;
+  pt.e = end;
+
+  plugin._props.push(property);
+
+  return pt;
+},
+    _nonConvertibleUnits = {
+  deg: 1,
+  rad: 1,
+  turn: 1
+},
+    //takes a single value like 20px and converts it to the unit specified, like "%", returning only the numeric amount.
+_convertToUnit = function _convertToUnit(target, property, value, unit) {
+  var curValue = parseFloat(value) || 0,
+      curUnit = (value + "").trim().substr((curValue + "").length) || "px",
+      // some browsers leave extra whitespace at the beginning of CSS variables, hence the need to trim()
+  style = _tempDiv.style,
+      horizontal = _horizontalExp.test(property),
+      isRootSVG = target.tagName.toLowerCase() === "svg",
+      measureProperty = (isRootSVG ? "client" : "offset") + (horizontal ? "Width" : "Height"),
+      amount = 100,
+      toPixels = unit === "px",
+      toPercent = unit === "%",
+      px,
+      parent,
+      cache,
+      isSVG;
+
+  if (unit === curUnit || !curValue || _nonConvertibleUnits[unit] || _nonConvertibleUnits[curUnit]) {
+    return curValue;
+  }
+
+  curUnit !== "px" && !toPixels && (curValue = _convertToUnit(target, property, value, "px"));
+  isSVG = target.getCTM && _isSVG(target);
+
+  if (toPercent && (_transformProps[property] || ~property.indexOf("adius"))) {
+    //transforms and borderRadius are relative to the size of the element itself!
+    return (0, _gsapCore._round)(curValue / (isSVG ? target.getBBox()[horizontal ? "width" : "height"] : target[measureProperty]) * amount);
+  }
+
+  style[horizontal ? "width" : "height"] = amount + (toPixels ? curUnit : unit);
+  parent = ~property.indexOf("adius") || unit === "em" && target.appendChild && !isRootSVG ? target : target.parentNode;
+
+  if (isSVG) {
+    parent = (target.ownerSVGElement || {}).parentNode;
+  }
+
+  if (!parent || parent === _doc || !parent.appendChild) {
+    parent = _doc.body;
+  }
+
+  cache = parent._gsap;
+
+  if (cache && toPercent && cache.width && horizontal && cache.time === _gsapCore._ticker.time) {
+    return (0, _gsapCore._round)(curValue / cache.width * amount);
+  } else {
+    (toPercent || curUnit === "%") && (style.position = _getComputedProperty(target, "position"));
+    parent === target && (style.position = "static"); // like for borderRadius, if it's a % we must have it relative to the target itself but that may not have position: relative or position: absolute in which case it'd go up the chain until it finds its offsetParent (bad). position: static protects against that.
+
+    parent.appendChild(_tempDiv);
+    px = _tempDiv[measureProperty];
+    parent.removeChild(_tempDiv);
+    style.position = "absolute";
+
+    if (horizontal && toPercent) {
+      cache = (0, _gsapCore._getCache)(parent);
+      cache.time = _gsapCore._ticker.time;
+      cache.width = parent[measureProperty];
+    }
+  }
+
+  return (0, _gsapCore._round)(toPixels ? px * curValue / amount : px && curValue ? amount / px * curValue : 0);
+},
+    _get = function _get(target, property, unit, uncache) {
+  var value;
+
+  if (!_pluginInitted) {
+    _initCore();
+  }
+
+  if (property in _propertyAliases && property !== "transform") {
+    property = _propertyAliases[property];
+
+    if (~property.indexOf(",")) {
+      property = property.split(",")[0];
+    }
+  }
+
+  if (_transformProps[property] && property !== "transform") {
+    value = _parseTransform(target, uncache);
+    value = property !== "transformOrigin" ? value[property] : _firstTwoOnly(_getComputedProperty(target, _transformOriginProp)) + " " + value.zOrigin + "px";
+  } else {
+    value = target.style[property];
+
+    if (!value || value === "auto" || uncache || ~(value + "").indexOf("calc(")) {
+      value = _specialProps[property] && _specialProps[property](target, property, unit) || _getComputedProperty(target, property) || (0, _gsapCore._getProperty)(target, property) || (property === "opacity" ? 1 : 0); // note: some browsers, like Firefox, don't report borderRadius correctly! Instead, it only reports every corner like  borderTopLeftRadius
+    }
+  }
+
+  return unit && !~(value + "").indexOf(" ") ? _convertToUnit(target, property, value, unit) + unit : value;
+},
+    _tweenComplexCSSString = function _tweenComplexCSSString(target, prop, start, end) {
+  //note: we call _tweenComplexCSSString.call(pluginInstance...) to ensure that it's scoped properly. We may call it from within a plugin too, thus "this" would refer to the plugin.
+  if (!start || start === "none") {
+    // some browsers like Safari actually PREFER the prefixed property and mis-report the unprefixed value like clipPath (BUG). In other words, even though clipPath exists in the style ("clipPath" in target.style) and it's set in the CSS properly (along with -webkit-clip-path), Safari reports clipPath as "none" whereas WebkitClipPath reports accurately like "ellipse(100% 0% at 50% 0%)", so in this case we must SWITCH to using the prefixed property instead. See https://greensock.com/forums/topic/18310-clippath-doesnt-work-on-ios/
+    var p = _checkPropPrefix(prop, target, 1),
+        s = p && _getComputedProperty(target, p, 1);
+
+    if (s && s !== start) {
+      prop = p;
+      start = s;
+    }
+  }
+
+  var pt = new _gsapCore.PropTween(this._pt, target.style, prop, 0, 1, _gsapCore._renderComplexString),
+      index = 0,
+      matchIndex = 0,
+      a,
+      result,
+      startValues,
+      startNum,
+      color,
+      startValue,
+      endValue,
+      endNum,
+      chunk,
+      endUnit,
+      startUnit,
+      relative,
+      endValues;
+  pt.b = start;
+  pt.e = end;
+  start += ""; //ensure values are strings
+
+  end += "";
+
+  if (end === "auto") {
+    target.style[prop] = end;
+    end = _getComputedProperty(target, prop) || end;
+    target.style[prop] = start;
+  }
+
+  a = [start, end];
+  (0, _gsapCore._colorStringFilter)(a); //pass an array with the starting and ending values and let the filter do whatever it needs to the values. If colors are found, it returns true and then we must match where the color shows up order-wise because for things like boxShadow, sometimes the browser provides the computed values with the color FIRST, but the user provides it with the color LAST, so flip them if necessary. Same for drop-shadow().
+
+  start = a[0];
+  end = a[1];
+  startValues = start.match(_gsapCore._numWithUnitExp) || [];
+  endValues = end.match(_gsapCore._numWithUnitExp) || [];
+
+  if (endValues.length) {
+    while (result = _gsapCore._numWithUnitExp.exec(end)) {
+      endValue = result[0];
+      chunk = end.substring(index, result.index);
+
+      if (color) {
+        color = (color + 1) % 5;
+      } else if (chunk.substr(-5) === "rgba(" || chunk.substr(-5) === "hsla(") {
+        color = 1;
+      }
+
+      if (endValue !== (startValue = startValues[matchIndex++] || "")) {
+        startNum = parseFloat(startValue) || 0;
+        startUnit = startValue.substr((startNum + "").length);
+        relative = endValue.charAt(1) === "=" ? +(endValue.charAt(0) + "1") : 0;
+
+        if (relative) {
+          endValue = endValue.substr(2);
+        }
+
+        endNum = parseFloat(endValue);
+        endUnit = endValue.substr((endNum + "").length);
+        index = _gsapCore._numWithUnitExp.lastIndex - endUnit.length;
+
+        if (!endUnit) {
+          //if something like "perspective:300" is passed in and we must add a unit to the end
+          endUnit = endUnit || _gsapCore._config.units[prop] || startUnit;
+
+          if (index === end.length) {
+            end += endUnit;
+            pt.e += endUnit;
+          }
+        }
+
+        if (startUnit !== endUnit) {
+          startNum = _convertToUnit(target, prop, startValue, endUnit) || 0;
+        } //these nested PropTweens are handled in a special way - we'll never actually call a render or setter method on them. We'll just loop through them in the parent complex string PropTween's render method.
+
+
+        pt._pt = {
+          _next: pt._pt,
+          p: chunk || matchIndex === 1 ? chunk : ",",
+          //note: SVG spec allows omission of comma/space when a negative sign is wedged between two numbers, like 2.5-5.3 instead of 2.5,-5.3 but when tweening, the negative value may switch to positive, so we insert the comma just in case.
+          s: startNum,
+          c: relative ? relative * endNum : endNum - startNum,
+          m: color && color < 4 ? Math.round : 0
+        };
+      }
+    }
+
+    pt.c = index < end.length ? end.substring(index, end.length) : ""; //we use the "c" of the PropTween to store the final part of the string (after the last number)
+  } else {
+    pt.r = prop === "display" && end === "none" ? _renderNonTweeningValueOnlyAtEnd : _renderNonTweeningValue;
+  }
+
+  if (_gsapCore._relExp.test(end)) {
+    pt.e = 0; //if the end string contains relative values or dynamic random(...) values, delete the end it so that on the final render we don't actually set it to the string with += or -= characters (forces it to use the calculated value).
+  }
+
+  this._pt = pt; //start the linked list with this new PropTween. Remember, we call _tweenComplexCSSString.call(pluginInstance...) to ensure that it's scoped properly. We may call it from within another plugin too, thus "this" would refer to the plugin.
+
+  return pt;
+},
+    _keywordToPercent = {
+  top: "0%",
+  bottom: "100%",
+  left: "0%",
+  right: "100%",
+  center: "50%"
+},
+    _convertKeywordsToPercentages = function _convertKeywordsToPercentages(value) {
+  var split = value.split(" "),
+      x = split[0],
+      y = split[1] || "50%";
+
+  if (x === "top" || x === "bottom" || y === "left" || y === "right") {
+    //the user provided them in the wrong order, so flip them
+    value = x;
+    x = y;
+    y = value;
+  }
+
+  split[0] = _keywordToPercent[x] || x;
+  split[1] = _keywordToPercent[y] || y;
+  return split.join(" ");
+},
+    _renderClearProps = function _renderClearProps(ratio, data) {
+  if (data.tween && data.tween._time === data.tween._dur) {
+    var target = data.t,
+        style = target.style,
+        props = data.u,
+        cache = target._gsap,
+        prop,
+        clearTransforms,
+        i;
+
+    if (props === "all" || props === true) {
+      style.cssText = "";
+      clearTransforms = 1;
+    } else {
+      props = props.split(",");
+      i = props.length;
+
+      while (--i > -1) {
+        prop = props[i];
+
+        if (_transformProps[prop]) {
+          clearTransforms = 1;
+          prop = prop === "transformOrigin" ? _transformOriginProp : _transformProp;
+        }
+
+        _removeProperty(target, prop);
+      }
+    }
+
+    if (clearTransforms) {
+      _removeProperty(target, _transformProp);
+
+      if (cache) {
+        cache.svg && target.removeAttribute("transform");
+
+        _parseTransform(target, 1); // force all the cached values back to "normal"/identity, otherwise if there's another tween that's already set to render transforms on this element, it could display the wrong values.
+
+
+        cache.uncache = 1;
+      }
+    }
+  }
+},
+    // note: specialProps should return 1 if (and only if) they have a non-zero priority. It indicates we need to sort the linked list.
+_specialProps = {
+  clearProps: function clearProps(plugin, target, property, endValue, tween) {
+    if (tween.data !== "isFromStart") {
+      var pt = plugin._pt = new _gsapCore.PropTween(plugin._pt, target, property, 0, 0, _renderClearProps);
+      pt.u = endValue;
+      pt.pr = -10;
+      pt.tween = tween;
+
+      plugin._props.push(property);
+
+      return 1;
+    }
+  }
+  /* className feature (about 0.4kb gzipped).
+  , className(plugin, target, property, endValue, tween) {
+  	let _renderClassName = (ratio, data) => {
+  			data.css.render(ratio, data.css);
+  			if (!ratio || ratio === 1) {
+  				let inline = data.rmv,
+  					target = data.t,
+  					p;
+  				target.setAttribute("class", ratio ? data.e : data.b);
+  				for (p in inline) {
+  					_removeProperty(target, p);
+  				}
+  			}
+  		},
+  		_getAllStyles = (target) => {
+  			let styles = {},
+  				computed = getComputedStyle(target),
+  				p;
+  			for (p in computed) {
+  				if (isNaN(p) && p !== "cssText" && p !== "length") {
+  					styles[p] = computed[p];
+  				}
+  			}
+  			_setDefaults(styles, _parseTransform(target, 1));
+  			return styles;
+  		},
+  		startClassList = target.getAttribute("class"),
+  		style = target.style,
+  		cssText = style.cssText,
+  		cache = target._gsap,
+  		classPT = cache.classPT,
+  		inlineToRemoveAtEnd = {},
+  		data = {t:target, plugin:plugin, rmv:inlineToRemoveAtEnd, b:startClassList, e:(endValue.charAt(1) !== "=") ? endValue : startClassList.replace(new RegExp("(?:\\s|^)" + endValue.substr(2) + "(?![\\w-])"), "") + ((endValue.charAt(0) === "+") ? " " + endValue.substr(2) : "")},
+  		changingVars = {},
+  		startVars = _getAllStyles(target),
+  		transformRelated = /(transform|perspective)/i,
+  		endVars, p;
+  	if (classPT) {
+  		classPT.r(1, classPT.d);
+  		_removeLinkedListItem(classPT.d.plugin, classPT, "_pt");
+  	}
+  	target.setAttribute("class", data.e);
+  	endVars = _getAllStyles(target, true);
+  	target.setAttribute("class", startClassList);
+  	for (p in endVars) {
+  		if (endVars[p] !== startVars[p] && !transformRelated.test(p)) {
+  			changingVars[p] = endVars[p];
+  			if (!style[p] && style[p] !== "0") {
+  				inlineToRemoveAtEnd[p] = 1;
+  			}
+  		}
+  	}
+  	cache.classPT = plugin._pt = new PropTween(plugin._pt, target, "className", 0, 0, _renderClassName, data, 0, -11);
+  	if (style.cssText !== cssText) { //only apply if things change. Otherwise, in cases like a background-image that's pulled dynamically, it could cause a refresh. See https://greensock.com/forums/topic/20368-possible-gsap-bug-switching-classnames-in-chrome/.
+  		style.cssText = cssText; //we recorded cssText before we swapped classes and ran _getAllStyles() because in cases when a className tween is overwritten, we remove all the related tweening properties from that class change (otherwise class-specific stuff can't override properties we've directly set on the target's style object due to specificity).
+  	}
+  	_parseTransform(target, true); //to clear the caching of transforms
+  	data.css = new gsap.plugins.css();
+  	data.css.init(target, changingVars, tween);
+  	plugin._props.push(...data.css._props);
+  	return 1;
+  }
+  */
+
+},
+
+/*
+ * --------------------------------------------------------------------------------------
+ * TRANSFORMS
+ * --------------------------------------------------------------------------------------
+ */
+_identity2DMatrix = [1, 0, 0, 1, 0, 0],
+    _rotationalProperties = {},
+    _isNullTransform = function _isNullTransform(value) {
+  return value === "matrix(1, 0, 0, 1, 0, 0)" || value === "none" || !value;
+},
+    _getComputedTransformMatrixAsArray = function _getComputedTransformMatrixAsArray(target) {
+  var matrixString = _getComputedProperty(target, _transformProp);
+
+  return _isNullTransform(matrixString) ? _identity2DMatrix : matrixString.substr(7).match(_gsapCore._numExp).map(_gsapCore._round);
+},
+    _getMatrix = function _getMatrix(target, force2D) {
+  var cache = target._gsap || (0, _gsapCore._getCache)(target),
+      style = target.style,
+      matrix = _getComputedTransformMatrixAsArray(target),
+      parent,
+      nextSibling,
+      temp,
+      addedToDOM;
+
+  if (cache.svg && target.getAttribute("transform")) {
+    temp = target.transform.baseVal.consolidate().matrix; //ensures that even complex values like "translate(50,60) rotate(135,0,0)" are parsed because it mashes it into a matrix.
+
+    matrix = [temp.a, temp.b, temp.c, temp.d, temp.e, temp.f];
+    return matrix.join(",") === "1,0,0,1,0,0" ? _identity2DMatrix : matrix;
+  } else if (matrix === _identity2DMatrix && !target.offsetParent && target !== _docElement && !cache.svg) {
+    //note: if offsetParent is null, that means the element isn't in the normal document flow, like if it has display:none or one of its ancestors has display:none). Firefox returns null for getComputedStyle() if the element is in an iframe that has display:none. https://bugzilla.mozilla.org/show_bug.cgi?id=548397
+    //browsers don't report transforms accurately unless the element is in the DOM and has a display value that's not "none". Firefox and Microsoft browsers have a partial bug where they'll report transforms even if display:none BUT not any percentage-based values like translate(-50%, 8px) will be reported as if it's translate(0, 8px).
+    temp = style.display;
+    style.display = "block";
+    parent = target.parentNode;
+
+    if (!parent || !target.offsetParent) {
+      addedToDOM = 1; //flag
+
+      nextSibling = target.nextSibling;
+
+      _docElement.appendChild(target); //we must add it to the DOM in order to get values properly
+
+    }
+
+    matrix = _getComputedTransformMatrixAsArray(target);
+
+    if (temp) {
+      style.display = temp;
+    } else {
+      _removeProperty(target, "display");
+    }
+
+    if (addedToDOM) {
+      if (nextSibling) {
+        parent.insertBefore(target, nextSibling);
+      } else if (parent) {
+        parent.appendChild(target);
+      } else {
+        _docElement.removeChild(target);
+      }
+    }
+  }
+
+  return force2D && matrix.length > 6 ? [matrix[0], matrix[1], matrix[4], matrix[5], matrix[12], matrix[13]] : matrix;
+},
+    _applySVGOrigin = function _applySVGOrigin(target, origin, originIsAbsolute, smooth, matrixArray, pluginToAddPropTweensTo) {
+  var cache = target._gsap,
+      matrix = matrixArray || _getMatrix(target, true),
+      xOriginOld = cache.xOrigin || 0,
+      yOriginOld = cache.yOrigin || 0,
+      xOffsetOld = cache.xOffset || 0,
+      yOffsetOld = cache.yOffset || 0,
+      a = matrix[0],
+      b = matrix[1],
+      c = matrix[2],
+      d = matrix[3],
+      tx = matrix[4],
+      ty = matrix[5],
+      originSplit = origin.split(" "),
+      xOrigin = parseFloat(originSplit[0]) || 0,
+      yOrigin = parseFloat(originSplit[1]) || 0,
+      bounds,
+      determinant,
+      x,
+      y;
+
+  if (!originIsAbsolute) {
+    bounds = _getBBox(target);
+    xOrigin = bounds.x + (~originSplit[0].indexOf("%") ? xOrigin / 100 * bounds.width : xOrigin);
+    yOrigin = bounds.y + (~(originSplit[1] || originSplit[0]).indexOf("%") ? yOrigin / 100 * bounds.height : yOrigin);
+  } else if (matrix !== _identity2DMatrix && (determinant = a * d - b * c)) {
+    //if it's zero (like if scaleX and scaleY are zero), skip it to avoid errors with dividing by zero.
+    x = xOrigin * (d / determinant) + yOrigin * (-c / determinant) + (c * ty - d * tx) / determinant;
+    y = xOrigin * (-b / determinant) + yOrigin * (a / determinant) - (a * ty - b * tx) / determinant;
+    xOrigin = x;
+    yOrigin = y;
+  }
+
+  if (smooth || smooth !== false && cache.smooth) {
+    tx = xOrigin - xOriginOld;
+    ty = yOrigin - yOriginOld;
+    cache.xOffset = xOffsetOld + (tx * a + ty * c) - tx;
+    cache.yOffset = yOffsetOld + (tx * b + ty * d) - ty;
+  } else {
+    cache.xOffset = cache.yOffset = 0;
+  }
+
+  cache.xOrigin = xOrigin;
+  cache.yOrigin = yOrigin;
+  cache.smooth = !!smooth;
+  cache.origin = origin;
+  cache.originIsAbsolute = !!originIsAbsolute;
+  target.style[_transformOriginProp] = "0px 0px"; //otherwise, if someone sets  an origin via CSS, it will likely interfere with the SVG transform attribute ones (because remember, we're baking the origin into the matrix() value).
+
+  if (pluginToAddPropTweensTo) {
+    _addNonTweeningPT(pluginToAddPropTweensTo, cache, "xOrigin", xOriginOld, xOrigin);
+
+    _addNonTweeningPT(pluginToAddPropTweensTo, cache, "yOrigin", yOriginOld, yOrigin);
+
+    _addNonTweeningPT(pluginToAddPropTweensTo, cache, "xOffset", xOffsetOld, cache.xOffset);
+
+    _addNonTweeningPT(pluginToAddPropTweensTo, cache, "yOffset", yOffsetOld, cache.yOffset);
+  }
+
+  target.setAttribute("data-svg-origin", xOrigin + " " + yOrigin);
+},
+    _parseTransform = function _parseTransform(target, uncache) {
+  var cache = target._gsap || new _gsapCore.GSCache(target);
+
+  if ("x" in cache && !uncache && !cache.uncache) {
+    return cache;
+  }
+
+  var style = target.style,
+      invertedScaleX = cache.scaleX < 0,
+      px = "px",
+      deg = "deg",
+      origin = _getComputedProperty(target, _transformOriginProp) || "0",
+      x,
+      y,
+      z,
+      scaleX,
+      scaleY,
+      rotation,
+      rotationX,
+      rotationY,
+      skewX,
+      skewY,
+      perspective,
+      xOrigin,
+      yOrigin,
+      matrix,
+      angle,
+      cos,
+      sin,
+      a,
+      b,
+      c,
+      d,
+      a12,
+      a22,
+      t1,
+      t2,
+      t3,
+      a13,
+      a23,
+      a33,
+      a42,
+      a43,
+      a32;
+  x = y = z = rotation = rotationX = rotationY = skewX = skewY = perspective = 0;
+  scaleX = scaleY = 1;
+  cache.svg = !!(target.getCTM && _isSVG(target));
+  matrix = _getMatrix(target, cache.svg);
+
+  if (cache.svg) {
+    t1 = !cache.uncache && target.getAttribute("data-svg-origin");
+
+    _applySVGOrigin(target, t1 || origin, !!t1 || cache.originIsAbsolute, cache.smooth !== false, matrix);
+  }
+
+  xOrigin = cache.xOrigin || 0;
+  yOrigin = cache.yOrigin || 0;
+
+  if (matrix !== _identity2DMatrix) {
+    a = matrix[0]; //a11
+
+    b = matrix[1]; //a21
+
+    c = matrix[2]; //a31
+
+    d = matrix[3]; //a41
+
+    x = a12 = matrix[4];
+    y = a22 = matrix[5]; //2D matrix
+
+    if (matrix.length === 6) {
+      scaleX = Math.sqrt(a * a + b * b);
+      scaleY = Math.sqrt(d * d + c * c);
+      rotation = a || b ? _atan2(b, a) * _RAD2DEG : 0; //note: if scaleX is 0, we cannot accurately measure rotation. Same for skewX with a scaleY of 0. Therefore, we default to the previously recorded value (or zero if that doesn't exist).
+
+      skewX = c || d ? _atan2(c, d) * _RAD2DEG + rotation : 0;
+      skewX && (scaleY *= Math.cos(skewX * _DEG2RAD));
+
+      if (cache.svg) {
+        x -= xOrigin - (xOrigin * a + yOrigin * c);
+        y -= yOrigin - (xOrigin * b + yOrigin * d);
+      } //3D matrix
+
+    } else {
+      a32 = matrix[6];
+      a42 = matrix[7];
+      a13 = matrix[8];
+      a23 = matrix[9];
+      a33 = matrix[10];
+      a43 = matrix[11];
+      x = matrix[12];
+      y = matrix[13];
+      z = matrix[14];
+      angle = _atan2(a32, a33);
+      rotationX = angle * _RAD2DEG; //rotationX
+
+      if (angle) {
+        cos = Math.cos(-angle);
+        sin = Math.sin(-angle);
+        t1 = a12 * cos + a13 * sin;
+        t2 = a22 * cos + a23 * sin;
+        t3 = a32 * cos + a33 * sin;
+        a13 = a12 * -sin + a13 * cos;
+        a23 = a22 * -sin + a23 * cos;
+        a33 = a32 * -sin + a33 * cos;
+        a43 = a42 * -sin + a43 * cos;
+        a12 = t1;
+        a22 = t2;
+        a32 = t3;
+      } //rotationY
+
+
+      angle = _atan2(-c, a33);
+      rotationY = angle * _RAD2DEG;
+
+      if (angle) {
+        cos = Math.cos(-angle);
+        sin = Math.sin(-angle);
+        t1 = a * cos - a13 * sin;
+        t2 = b * cos - a23 * sin;
+        t3 = c * cos - a33 * sin;
+        a43 = d * sin + a43 * cos;
+        a = t1;
+        b = t2;
+        c = t3;
+      } //rotationZ
+
+
+      angle = _atan2(b, a);
+      rotation = angle * _RAD2DEG;
+
+      if (angle) {
+        cos = Math.cos(angle);
+        sin = Math.sin(angle);
+        t1 = a * cos + b * sin;
+        t2 = a12 * cos + a22 * sin;
+        b = b * cos - a * sin;
+        a22 = a22 * cos - a12 * sin;
+        a = t1;
+        a12 = t2;
+      }
+
+      if (rotationX && Math.abs(rotationX) + Math.abs(rotation) > 359.9) {
+        //when rotationY is set, it will often be parsed as 180 degrees different than it should be, and rotationX and rotation both being 180 (it looks the same), so we adjust for that here.
+        rotationX = rotation = 0;
+        rotationY = 180 - rotationY;
+      }
+
+      scaleX = (0, _gsapCore._round)(Math.sqrt(a * a + b * b + c * c));
+      scaleY = (0, _gsapCore._round)(Math.sqrt(a22 * a22 + a32 * a32));
+      angle = _atan2(a12, a22);
+      skewX = Math.abs(angle) > 0.0002 ? angle * _RAD2DEG : 0;
+      perspective = a43 ? 1 / (a43 < 0 ? -a43 : a43) : 0;
+    }
+
+    if (cache.svg) {
+      //sense if there are CSS transforms applied on an SVG element in which case we must overwrite them when rendering. The transform attribute is more reliable cross-browser, but we can't just remove the CSS ones because they may be applied in a CSS rule somewhere (not just inline).
+      matrix = target.getAttribute("transform");
+      cache.forceCSS = target.setAttribute("transform", "") || !_isNullTransform(_getComputedProperty(target, _transformProp));
+      matrix && target.setAttribute("transform", matrix);
+    }
+  }
+
+  if (Math.abs(skewX) > 90 && Math.abs(skewX) < 270) {
+    if (invertedScaleX) {
+      scaleX *= -1;
+      skewX += rotation <= 0 ? 180 : -180;
+      rotation += rotation <= 0 ? 180 : -180;
+    } else {
+      scaleY *= -1;
+      skewX += skewX <= 0 ? 180 : -180;
+    }
+  }
+
+  cache.x = ((cache.xPercent = x && Math.round(target.offsetWidth / 2) === Math.round(-x) ? -50 : 0) ? 0 : x) + px;
+  cache.y = ((cache.yPercent = y && Math.round(target.offsetHeight / 2) === Math.round(-y) ? -50 : 0) ? 0 : y) + px;
+  cache.z = z + px;
+  cache.scaleX = (0, _gsapCore._round)(scaleX);
+  cache.scaleY = (0, _gsapCore._round)(scaleY);
+  cache.rotation = (0, _gsapCore._round)(rotation) + deg;
+  cache.rotationX = (0, _gsapCore._round)(rotationX) + deg;
+  cache.rotationY = (0, _gsapCore._round)(rotationY) + deg;
+  cache.skewX = skewX + deg;
+  cache.skewY = skewY + deg;
+  cache.transformPerspective = perspective + px;
+
+  if (cache.zOrigin = parseFloat(origin.split(" ")[2]) || 0) {
+    style[_transformOriginProp] = _firstTwoOnly(origin);
+  }
+
+  cache.xOffset = cache.yOffset = 0;
+  cache.force3D = _gsapCore._config.force3D;
+  cache.renderTransform = cache.svg ? _renderSVGTransforms : _supports3D ? _renderCSSTransforms : _renderNon3DTransforms;
+  cache.uncache = 0;
+  return cache;
+},
+    _firstTwoOnly = function _firstTwoOnly(value) {
+  return (value = value.split(" "))[0] + " " + value[1];
+},
+    //for handling transformOrigin values, stripping out the 3rd dimension
+_addPxTranslate = function _addPxTranslate(target, start, value) {
+  var unit = (0, _gsapCore.getUnit)(start);
+  return (0, _gsapCore._round)(parseFloat(start) + parseFloat(_convertToUnit(target, "x", value + "px", unit))) + unit;
+},
+    _renderNon3DTransforms = function _renderNon3DTransforms(ratio, cache) {
+  cache.z = "0px";
+  cache.rotationY = cache.rotationX = "0deg";
+  cache.force3D = 0;
+
+  _renderCSSTransforms(ratio, cache);
+},
+    _zeroDeg = "0deg",
+    _zeroPx = "0px",
+    _endParenthesis = ") ",
+    _renderCSSTransforms = function _renderCSSTransforms(ratio, cache) {
+  var _ref = cache || this,
+      xPercent = _ref.xPercent,
+      yPercent = _ref.yPercent,
+      x = _ref.x,
+      y = _ref.y,
+      z = _ref.z,
+      rotation = _ref.rotation,
+      rotationY = _ref.rotationY,
+      rotationX = _ref.rotationX,
+      skewX = _ref.skewX,
+      skewY = _ref.skewY,
+      scaleX = _ref.scaleX,
+      scaleY = _ref.scaleY,
+      transformPerspective = _ref.transformPerspective,
+      force3D = _ref.force3D,
+      target = _ref.target,
+      zOrigin = _ref.zOrigin,
+      transforms = "",
+      use3D = force3D === "auto" && ratio && ratio !== 1 || force3D === true; // Safari has a bug that causes it not to render 3D transform-origin values properly, so we force the z origin to 0, record it in the cache, and then do the math here to offset the translate values accordingly (basically do the 3D transform-origin part manually)
+
+
+  if (zOrigin && (rotationX !== _zeroDeg || rotationY !== _zeroDeg)) {
+    var angle = parseFloat(rotationY) * _DEG2RAD,
+        a13 = Math.sin(angle),
+        a33 = Math.cos(angle),
+        cos;
+
+    angle = parseFloat(rotationX) * _DEG2RAD;
+    cos = Math.cos(angle);
+    x = _addPxTranslate(target, x, a13 * cos * -zOrigin);
+    y = _addPxTranslate(target, y, -Math.sin(angle) * -zOrigin);
+    z = _addPxTranslate(target, z, a33 * cos * -zOrigin + zOrigin);
+  }
+
+  if (transformPerspective !== _zeroPx) {
+    transforms += "perspective(" + transformPerspective + _endParenthesis;
+  }
+
+  if (xPercent || yPercent) {
+    transforms += "translate(" + xPercent + "%, " + yPercent + "%) ";
+  }
+
+  if (use3D || x !== _zeroPx || y !== _zeroPx || z !== _zeroPx) {
+    transforms += z !== _zeroPx || use3D ? "translate3d(" + x + ", " + y + ", " + z + ") " : "translate(" + x + ", " + y + _endParenthesis;
+  }
+
+  if (rotation !== _zeroDeg) {
+    transforms += "rotate(" + rotation + _endParenthesis;
+  }
+
+  if (rotationY !== _zeroDeg) {
+    transforms += "rotateY(" + rotationY + _endParenthesis;
+  }
+
+  if (rotationX !== _zeroDeg) {
+    transforms += "rotateX(" + rotationX + _endParenthesis;
+  }
+
+  if (skewX !== _zeroDeg || skewY !== _zeroDeg) {
+    transforms += "skew(" + skewX + ", " + skewY + _endParenthesis;
+  }
+
+  if (scaleX !== 1 || scaleY !== 1) {
+    transforms += "scale(" + scaleX + ", " + scaleY + _endParenthesis;
+  }
+
+  target.style[_transformProp] = transforms || "translate(0, 0)";
+},
+    _renderSVGTransforms = function _renderSVGTransforms(ratio, cache) {
+  var _ref2 = cache || this,
+      xPercent = _ref2.xPercent,
+      yPercent = _ref2.yPercent,
+      x = _ref2.x,
+      y = _ref2.y,
+      rotation = _ref2.rotation,
+      skewX = _ref2.skewX,
+      skewY = _ref2.skewY,
+      scaleX = _ref2.scaleX,
+      scaleY = _ref2.scaleY,
+      target = _ref2.target,
+      xOrigin = _ref2.xOrigin,
+      yOrigin = _ref2.yOrigin,
+      xOffset = _ref2.xOffset,
+      yOffset = _ref2.yOffset,
+      forceCSS = _ref2.forceCSS,
+      tx = parseFloat(x),
+      ty = parseFloat(y),
+      a11,
+      a21,
+      a12,
+      a22,
+      temp;
+
+  rotation = parseFloat(rotation);
+  skewX = parseFloat(skewX);
+  skewY = parseFloat(skewY);
+
+  if (skewY) {
+    //for performance reasons, we combine all skewing into the skewX and rotation values. Remember, a skewY of 10 degrees looks the same as a rotation of 10 degrees plus a skewX of 10 degrees.
+    skewY = parseFloat(skewY);
+    skewX += skewY;
+    rotation += skewY;
+  }
+
+  if (rotation || skewX) {
+    rotation *= _DEG2RAD;
+    skewX *= _DEG2RAD;
+    a11 = Math.cos(rotation) * scaleX;
+    a21 = Math.sin(rotation) * scaleX;
+    a12 = Math.sin(rotation - skewX) * -scaleY;
+    a22 = Math.cos(rotation - skewX) * scaleY;
+
+    if (skewX) {
+      skewY *= _DEG2RAD;
+      temp = Math.tan(skewX - skewY);
+      temp = Math.sqrt(1 + temp * temp);
+      a12 *= temp;
+      a22 *= temp;
+
+      if (skewY) {
+        temp = Math.tan(skewY);
+        temp = Math.sqrt(1 + temp * temp);
+        a11 *= temp;
+        a21 *= temp;
+      }
+    }
+
+    a11 = (0, _gsapCore._round)(a11);
+    a21 = (0, _gsapCore._round)(a21);
+    a12 = (0, _gsapCore._round)(a12);
+    a22 = (0, _gsapCore._round)(a22);
+  } else {
+    a11 = scaleX;
+    a22 = scaleY;
+    a21 = a12 = 0;
+  }
+
+  if (tx && !~(x + "").indexOf("px") || ty && !~(y + "").indexOf("px")) {
+    tx = _convertToUnit(target, "x", x, "px");
+    ty = _convertToUnit(target, "y", y, "px");
+  }
+
+  if (xOrigin || yOrigin || xOffset || yOffset) {
+    tx = (0, _gsapCore._round)(tx + xOrigin - (xOrigin * a11 + yOrigin * a12) + xOffset);
+    ty = (0, _gsapCore._round)(ty + yOrigin - (xOrigin * a21 + yOrigin * a22) + yOffset);
+  }
+
+  if (xPercent || yPercent) {
+    //The SVG spec doesn't support percentage-based translation in the "transform" attribute, so we merge it into the translation to simulate it.
+    temp = target.getBBox();
+    tx = (0, _gsapCore._round)(tx + xPercent / 100 * temp.width);
+    ty = (0, _gsapCore._round)(ty + yPercent / 100 * temp.height);
+  }
+
+  temp = "matrix(" + a11 + "," + a21 + "," + a12 + "," + a22 + "," + tx + "," + ty + ")";
+  target.setAttribute("transform", temp);
+
+  if (forceCSS) {
+    //some browsers prioritize CSS transforms over the transform attribute. When we sense that the user has CSS transforms applied, we must overwrite them this way (otherwise some browser simply won't render the  transform attribute changes!)
+    target.style[_transformProp] = temp;
+  }
+},
+    _addRotationalPropTween = function _addRotationalPropTween(plugin, target, property, startNum, endValue, relative) {
+  var cap = 360,
+      isString = (0, _gsapCore._isString)(endValue),
+      endNum = parseFloat(endValue) * (isString && ~endValue.indexOf("rad") ? _RAD2DEG : 1),
+      change = relative ? endNum * relative : endNum - startNum,
+      finalValue = startNum + change + "deg",
+      direction,
+      pt;
+
+  if (isString) {
+    direction = endValue.split("_")[1];
+
+    if (direction === "short") {
+      change %= cap;
+
+      if (change !== change % (cap / 2)) {
+        change += change < 0 ? cap : -cap;
+      }
+    }
+
+    if (direction === "cw" && change < 0) {
+      change = (change + cap * _bigNum) % cap - ~~(change / cap) * cap;
+    } else if (direction === "ccw" && change > 0) {
+      change = (change - cap * _bigNum) % cap - ~~(change / cap) * cap;
+    }
+  }
+
+  plugin._pt = pt = new _gsapCore.PropTween(plugin._pt, target, property, startNum, change, _renderPropWithEnd);
+  pt.e = finalValue;
+  pt.u = "deg";
+
+  plugin._props.push(property);
+
+  return pt;
+},
+    _addRawTransformPTs = function _addRawTransformPTs(plugin, transforms, target) {
+  //for handling cases where someone passes in a whole transform string, like transform: "scale(2, 3) rotate(20deg) translateY(30em)"
+  var style = _tempDivStyler.style,
+      startCache = target._gsap,
+      exclude = "perspective,force3D,transformOrigin,svgOrigin",
+      endCache,
+      p,
+      startValue,
+      endValue,
+      startNum,
+      endNum,
+      startUnit,
+      endUnit;
+  style.cssText = getComputedStyle(target).cssText + ";position:absolute;display:block;"; //%-based translations will fail unless we set the width/height to match the original target (and padding/borders can affect it)
+
+  style[_transformProp] = transforms;
+
+  _doc.body.appendChild(_tempDivStyler);
+
+  endCache = _parseTransform(_tempDivStyler, 1);
+
+  for (p in _transformProps) {
+    startValue = startCache[p];
+    endValue = endCache[p];
+
+    if (startValue !== endValue && exclude.indexOf(p) < 0) {
+      //tweening to no perspective gives very unintuitive results - just keep the same perspective in that case.
+      startUnit = (0, _gsapCore.getUnit)(startValue);
+      endUnit = (0, _gsapCore.getUnit)(endValue);
+      startNum = startUnit !== endUnit ? _convertToUnit(target, p, startValue, endUnit) : parseFloat(startValue);
+      endNum = parseFloat(endValue);
+      plugin._pt = new _gsapCore.PropTween(plugin._pt, startCache, p, startNum, endNum - startNum, _renderCSSProp);
+      plugin._pt.u = endUnit || 0;
+
+      plugin._props.push(p);
+    }
+  }
+
+  _doc.body.removeChild(_tempDivStyler);
+}; // handle splitting apart padding, margin, borderWidth, and borderRadius into their 4 components. Firefox, for example, won't report borderRadius correctly - it will only do borderTopLeftRadius and the other corners. We also want to handle paddingTop, marginLeft, borderRightWidth, etc.
+
+
+exports._getBBox = _getBBox;
+exports.checkPrefix = _checkPropPrefix;
+exports._createElement = _createElement;
+(0, _gsapCore._forEachName)("padding,margin,Width,Radius", function (name, index) {
+  var t = "Top",
+      r = "Right",
+      b = "Bottom",
+      l = "Left",
+      props = (index < 3 ? [t, r, b, l] : [t + l, t + r, b + r, b + l]).map(function (side) {
+    return index < 2 ? name + side : "border" + side + name;
+  });
+
+  _specialProps[index > 1 ? "border" + name : name] = function (plugin, target, property, endValue, tween) {
+    var a, vars;
+
+    if (arguments.length < 4) {
+      // getter, passed target, property, and unit (from _get())
+      a = props.map(function (prop) {
+        return _get(plugin, prop, property);
+      });
+      vars = a.join(" ");
+      return vars.split(a[0]).length === 5 ? a[0] : vars;
+    }
+
+    a = (endValue + "").split(" ");
+    vars = {};
+    props.forEach(function (prop, i) {
+      return vars[prop] = a[i] = a[i] || a[(i - 1) / 2 | 0];
+    });
+    plugin.init(target, vars, tween);
+  };
+});
+var CSSPlugin = {
+  name: "css",
+  register: _initCore,
+  targetTest: function targetTest(target) {
+    return target.style && target.nodeType;
+  },
+  init: function init(target, vars, tween, index, targets) {
+    var props = this._props,
+        style = target.style,
+        startValue,
+        endValue,
+        endNum,
+        startNum,
+        type,
+        specialProp,
+        p,
+        startUnit,
+        endUnit,
+        relative,
+        isTransformRelated,
+        transformPropTween,
+        cache,
+        smooth,
+        hasPriority;
+
+    if (!_pluginInitted) {
+      _initCore();
+    }
+
+    for (p in vars) {
+      if (p === "autoRound") {
+        continue;
+      }
+
+      endValue = vars[p];
+
+      if (_gsapCore._plugins[p] && (0, _gsapCore._checkPlugin)(p, vars, tween, index, target, targets)) {
+        //plugins
+        continue;
+      }
+
+      type = typeof endValue;
+      specialProp = _specialProps[p];
+
+      if (type === "function") {
+        endValue = endValue.call(tween, index, target, targets);
+        type = typeof endValue;
+      }
+
+      if (type === "string" && ~endValue.indexOf("random(")) {
+        endValue = (0, _gsapCore._replaceRandom)(endValue);
+      }
+
+      if (specialProp) {
+        if (specialProp(this, target, p, endValue, tween)) {
+          hasPriority = 1;
+        }
+      } else if (p.substr(0, 2) === "--") {
+        //CSS variable
+        this.add(style, "setProperty", getComputedStyle(target).getPropertyValue(p) + "", endValue + "", index, targets, 0, 0, p);
+      } else {
+        startValue = _get(target, p);
+        startNum = parseFloat(startValue);
+        relative = type === "string" && endValue.charAt(1) === "=" ? +(endValue.charAt(0) + "1") : 0;
+
+        if (relative) {
+          endValue = endValue.substr(2);
+        }
+
+        endNum = parseFloat(endValue);
+
+        if (p in _propertyAliases) {
+          if (p === "autoAlpha") {
+            //special case where we control the visibility along with opacity. We still allow the opacity value to pass through and get tweened.
+            if (startNum === 1 && _get(target, "visibility") === "hidden" && endNum) {
+              //if visibility is initially set to "hidden", we should interpret that as intent to make opacity 0 (a convenience)
+              startNum = 0;
+            }
+
+            _addNonTweeningPT(this, style, "visibility", startNum ? "inherit" : "hidden", endNum ? "inherit" : "hidden", !endNum);
+          }
+
+          if (p !== "scale" && p !== "transform") {
+            p = _propertyAliases[p];
+
+            if (~p.indexOf(",")) {
+              p = p.split(",")[0];
+            }
+          }
+        }
+
+        isTransformRelated = p in _transformProps; //--- TRANSFORM-RELATED ---
+
+        if (isTransformRelated) {
+          if (!transformPropTween) {
+            cache = target._gsap;
+            cache.renderTransform || _parseTransform(target); // if, for example, gsap.set(... {transform:"translateX(50vw)"}), the _get() call doesn't parse the transform, thus cache.renderTransform won't be set yet so force the parsing of the transform here.
+
+            smooth = vars.smoothOrigin !== false && cache.smooth;
+            transformPropTween = this._pt = new _gsapCore.PropTween(this._pt, style, _transformProp, 0, 1, cache.renderTransform, cache, 0, -1); //the first time through, create the rendering PropTween so that it runs LAST (in the linked list, we keep adding to the beginning)
+
+            transformPropTween.dep = 1; //flag it as dependent so that if things get killed/overwritten and this is the only PropTween left, we can safely kill the whole tween.
+          }
+
+          if (p === "scale") {
+            this._pt = new _gsapCore.PropTween(this._pt, cache, "scaleY", cache.scaleY, relative ? relative * endNum : endNum - cache.scaleY);
+            props.push("scaleY", p);
+            p += "X";
+          } else if (p === "transformOrigin") {
+            endValue = _convertKeywordsToPercentages(endValue); //in case something like "left top" or "bottom right" is passed in. Convert to percentages.
+
+            if (cache.svg) {
+              _applySVGOrigin(target, endValue, 0, smooth, 0, this);
+            } else {
+              endUnit = parseFloat(endValue.split(" ")[2]) || 0; //handle the zOrigin separately!
+
+              if (endUnit !== cache.zOrigin) {
+                _addNonTweeningPT(this, cache, "zOrigin", cache.zOrigin, endUnit);
+              }
+
+              _addNonTweeningPT(this, style, p, _firstTwoOnly(startValue), _firstTwoOnly(endValue));
+            }
+
+            continue;
+          } else if (p === "svgOrigin") {
+            _applySVGOrigin(target, endValue, 1, smooth, 0, this);
+
+            continue;
+          } else if (p in _rotationalProperties) {
+            _addRotationalPropTween(this, cache, p, startNum, endValue, relative);
+
+            continue;
+          } else if (p === "smoothOrigin") {
+            _addNonTweeningPT(this, cache, "smooth", cache.smooth, endValue);
+
+            continue;
+          } else if (p === "force3D") {
+            cache[p] = endValue;
+            continue;
+          } else if (p === "transform") {
+            _addRawTransformPTs(this, endValue, target);
+
+            continue;
+          }
+        } else if (!(p in style)) {
+          p = _checkPropPrefix(p) || p;
+        }
+
+        if (isTransformRelated || (endNum || endNum === 0) && (startNum || startNum === 0) && !_complexExp.test(endValue) && p in style) {
+          startUnit = (startValue + "").substr((startNum + "").length);
+          endNum || (endNum = 0); // protect against NaN
+
+          endUnit = (endValue + "").substr((endNum + "").length) || (p in _gsapCore._config.units ? _gsapCore._config.units[p] : startUnit);
+
+          if (startUnit !== endUnit) {
+            startNum = _convertToUnit(target, p, startValue, endUnit);
+          }
+
+          this._pt = new _gsapCore.PropTween(this._pt, isTransformRelated ? cache : style, p, startNum, relative ? relative * endNum : endNum - startNum, endUnit === "px" && vars.autoRound !== false && !isTransformRelated ? _renderRoundedCSSProp : _renderCSSProp);
+          this._pt.u = endUnit || 0;
+
+          if (startUnit !== endUnit) {
+            //when the tween goes all the way back to the beginning, we need to revert it to the OLD/ORIGINAL value (with those units). We record that as a "b" (beginning) property and point to a render method that handles that. (performance optimization)
+            this._pt.b = startValue;
+            this._pt.r = _renderCSSPropWithBeginning;
+          }
+        } else if (!(p in style)) {
+          if (p in target) {
+            //maybe it's not a style - it could be a property added directly to an element in which case we'll try to animate that.
+            this.add(target, p, target[p], endValue, index, targets);
+          } else {
+            (0, _gsapCore._missingPlugin)(p, endValue);
+            continue;
+          }
+        } else {
+          _tweenComplexCSSString.call(this, target, p, startValue, endValue);
+        }
+
+        props.push(p);
+      }
+    }
+
+    if (hasPriority) {
+      (0, _gsapCore._sortPropTweensByPriority)(this);
+    }
+  },
+  get: _get,
+  aliases: _propertyAliases,
+  getSetter: function getSetter(target, property, plugin) {
+    //returns a setter function that accepts target, property, value and applies it accordingly. Remember, properties like "x" aren't as simple as target.style.property = value because they've got to be applied to a proxy object and then merged into a transform string in a renderer.
+    var p = _propertyAliases[property];
+    p && p.indexOf(",") < 0 && (property = p);
+    return property in _transformProps && property !== _transformOriginProp && (target._gsap.x || _get(target, "x")) ? plugin && _recentSetterPlugin === plugin ? property === "scale" ? _setterScale : _setterTransform : (_recentSetterPlugin = plugin || {}) && (property === "scale" ? _setterScaleWithRender : _setterTransformWithRender) : target.style && !(0, _gsapCore._isUndefined)(target.style[property]) ? _setterCSSStyle : ~property.indexOf("-") ? _setterCSSProp : (0, _gsapCore._getSetter)(target, property);
+  },
+  core: {
+    _removeProperty: _removeProperty,
+    _getMatrix: _getMatrix
+  }
+};
+exports.default = exports.CSSPlugin = CSSPlugin;
+_gsapCore.gsap.utils.checkPrefix = _checkPropPrefix;
+
+(function (positionAndScale, rotation, others, aliases) {
+  var all = (0, _gsapCore._forEachName)(positionAndScale + "," + rotation + "," + others, function (name) {
+    _transformProps[name] = 1;
+  });
+  (0, _gsapCore._forEachName)(rotation, function (name) {
+    _gsapCore._config.units[name] = "deg";
+    _rotationalProperties[name] = 1;
+  });
+  _propertyAliases[all[13]] = positionAndScale + "," + rotation;
+  (0, _gsapCore._forEachName)(aliases, function (name) {
+    var split = name.split(":");
+    _propertyAliases[split[1]] = all[split[0]];
+  });
+})("x,y,z,scale,scaleX,scaleY,xPercent,yPercent", "rotation,rotationX,rotationY,skewX,skewY", "transform,transformOrigin,svgOrigin,force3D,smoothOrigin,transformPerspective", "0:translateX,1:translateY,2:translateZ,8:rotate,8:rotationZ,8:rotateZ,9:rotateX,10:rotateY");
+
+(0, _gsapCore._forEachName)("x,y,z,top,right,bottom,left,width,height,fontSize,padding,margin,perspective", function (name) {
+  _gsapCore._config.units[name] = "px";
+});
+
+_gsapCore.gsap.registerPlugin(CSSPlugin);
+},{"./gsap-core.js":"TNS6"}],"TpQl":[function(require,module,exports) {
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Power0", {
+  enumerable: true,
+  get: function () {
+    return _gsapCore.Power0;
+  }
+});
+Object.defineProperty(exports, "Power1", {
+  enumerable: true,
+  get: function () {
+    return _gsapCore.Power1;
+  }
+});
+Object.defineProperty(exports, "Power2", {
+  enumerable: true,
+  get: function () {
+    return _gsapCore.Power2;
+  }
+});
+Object.defineProperty(exports, "Power3", {
+  enumerable: true,
+  get: function () {
+    return _gsapCore.Power3;
+  }
+});
+Object.defineProperty(exports, "Power4", {
+  enumerable: true,
+  get: function () {
+    return _gsapCore.Power4;
+  }
+});
+Object.defineProperty(exports, "Linear", {
+  enumerable: true,
+  get: function () {
+    return _gsapCore.Linear;
+  }
+});
+Object.defineProperty(exports, "Quad", {
+  enumerable: true,
+  get: function () {
+    return _gsapCore.Quad;
+  }
+});
+Object.defineProperty(exports, "Cubic", {
+  enumerable: true,
+  get: function () {
+    return _gsapCore.Cubic;
+  }
+});
+Object.defineProperty(exports, "Quart", {
+  enumerable: true,
+  get: function () {
+    return _gsapCore.Quart;
+  }
+});
+Object.defineProperty(exports, "Quint", {
+  enumerable: true,
+  get: function () {
+    return _gsapCore.Quint;
+  }
+});
+Object.defineProperty(exports, "Strong", {
+  enumerable: true,
+  get: function () {
+    return _gsapCore.Strong;
+  }
+});
+Object.defineProperty(exports, "Elastic", {
+  enumerable: true,
+  get: function () {
+    return _gsapCore.Elastic;
+  }
+});
+Object.defineProperty(exports, "Back", {
+  enumerable: true,
+  get: function () {
+    return _gsapCore.Back;
+  }
+});
+Object.defineProperty(exports, "SteppedEase", {
+  enumerable: true,
+  get: function () {
+    return _gsapCore.SteppedEase;
+  }
+});
+Object.defineProperty(exports, "Bounce", {
+  enumerable: true,
+  get: function () {
+    return _gsapCore.Bounce;
+  }
+});
+Object.defineProperty(exports, "Sine", {
+  enumerable: true,
+  get: function () {
+    return _gsapCore.Sine;
+  }
+});
+Object.defineProperty(exports, "Expo", {
+  enumerable: true,
+  get: function () {
+    return _gsapCore.Expo;
+  }
+});
+Object.defineProperty(exports, "Circ", {
+  enumerable: true,
+  get: function () {
+    return _gsapCore.Circ;
+  }
+});
+Object.defineProperty(exports, "TweenLite", {
+  enumerable: true,
+  get: function () {
+    return _gsapCore.TweenLite;
+  }
+});
+Object.defineProperty(exports, "TimelineLite", {
+  enumerable: true,
+  get: function () {
+    return _gsapCore.TimelineLite;
+  }
+});
+Object.defineProperty(exports, "TimelineMax", {
+  enumerable: true,
+  get: function () {
+    return _gsapCore.TimelineMax;
+  }
+});
+Object.defineProperty(exports, "CSSPlugin", {
+  enumerable: true,
+  get: function () {
+    return _CSSPlugin.CSSPlugin;
+  }
+});
+exports.TweenMax = exports.default = exports.gsap = void 0;
+
+var _gsapCore = require("./gsap-core.js");
+
+var _CSSPlugin = require("./CSSPlugin.js");
+
+var gsapWithCSS = _gsapCore.gsap.registerPlugin(_CSSPlugin.CSSPlugin) || _gsapCore.gsap,
+    // to protect from tree shaking
+TweenMaxWithCSS = gsapWithCSS.core.Tween;
+
+exports.TweenMax = TweenMaxWithCSS;
+exports.default = exports.gsap = gsapWithCSS;
+},{"./gsap-core.js":"TNS6","./CSSPlugin.js":"bp4Z"}],"AHog":[function(require,module,exports) {
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _gsap = require("gsap");
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(n); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+var MenuItem = /*#__PURE__*/function () {
+  function MenuItem(el) {
+    _classCallCheck(this, MenuItem);
+
+    this.DOM = {
+      el: el
+    };
+    this.DOM.textsGroupEl = this.DOM.el.querySelector('svg > g');
+    this.filterId = this.DOM.el.querySelector('svg filter').id;
+
+    var _this$DOM$textsGroupE = this.DOM.textsGroupEl.querySelectorAll('text');
+
+    var _this$DOM$textsGroupE2 = _slicedToArray(_this$DOM$textsGroupE, 2);
+
+    this.DOM.text_1 = _this$DOM$textsGroupE2[0];
+    this.DOM.text_2 = _this$DOM$textsGroupE2[1];
+    this.DOM.feBlur = document.querySelector("#".concat(this.filterId, " > feGaussianBlur"));
+    this.primitiveValues = {
+      stdDeviation: 0
+    };
+    this.createTimeline();
+    this.initEvents();
+  }
+
+  _createClass(MenuItem, [{
+    key: "initEvents",
+    value: function initEvents() {
+      var _this = this;
+
+      this.onMouseEnterFn = function () {
+        _this.DOM.textsGroupEl.style.filter = "url(#".concat(_this.filterId, ")");
+
+        _this.tl.play();
+      };
+
+      this.onMouseLeaveFn = function () {
+        _this.DOM.textsGroupEl.style.filter = "url(#".concat(_this.filterId, ")");
+
+        _this.tl.reverse();
+      };
+
+      this.DOM.el.addEventListener('mouseenter', this.onMouseEnterFn);
+      this.DOM.el.addEventListener('mouseleave', this.onMouseLeaveFn);
+    }
+  }, {
+    key: "createTimeline",
+    value: function createTimeline() {
+      var _this2 = this;
+
+      // init timeline
+      this.tl = _gsap.gsap.timeline({
+        paused: true,
+        onComplete: function onComplete() {
+          _this2.DOM.textsGroupEl.style.filter = 'none';
+        },
+        onReverseComplete: function onReverseComplete() {
+          _this2.DOM.textsGroupEl.style.filter = 'none';
+        },
+        onUpdate: function onUpdate() {
+          _this2.DOM.feBlur.setAttribute('stdDeviation', _this2.primitiveValues.stdDeviation);
+        }
+      }).to(this.primitiveValues, {
+        duration: 0.4,
+        ease: "none",
+        startAt: {
+          stdDeviation: 0
+        },
+        stdDeviation: 1
+      }, 0).to(this.primitiveValues, {
+        duration: 0.4,
+        ease: "none",
+        stdDeviation: 0
+      }).to(this.DOM.text_1, {
+        duration: 0.8,
+        ease: "none",
+        // Power1.easeInOut
+        opacity: 0
+      }, 0).to(this.DOM.text_2, {
+        duration: 0.8,
+        ease: "none",
+        // Power1.easeInOut
+        opacity: 1
+      }, 0).to(this.DOM.text_1, {
+        duration: 0.8,
+        ease: "Power1.easeInOut",
+        y: -5
+      }, 0).to(this.DOM.text_2, {
+        duration: 0.8,
+        ease: "Power1.easeInOut",
+        startAt: {
+          y: 5
+        },
+        y: 0
+      }, 0);
+    }
+  }]);
+
+  return MenuItem;
+}();
+
+exports.default = MenuItem;
+},{"gsap":"TpQl"}],"CLsk":[function(require,module,exports) {
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _menuItem = _interopRequireDefault(require("./menuItem"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(n); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+var Menu = function Menu(el) {
+  var _this = this;
+
+  _classCallCheck(this, Menu);
+
+  this.DOM = {
+    el: el
+  };
+  this.items = [];
+
+  _toConsumableArray(this.DOM.el.querySelectorAll('.menu__item')).forEach(function (item) {
+    return _this.items.push(new _menuItem.default(item));
+  });
+};
+
+exports.default = Menu;
+},{"./menuItem":"AHog"}],"MgTz":[function(require,module,exports) {
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.preloadFonts = void 0;
+
+// Preload images
+var preloadFonts = function preloadFonts(id) {
+  return new Promise(function (resolve, reject) {
+    WebFont.load({
+      typekit: {
+        id: id
+      },
+      active: resolve
+    });
+  });
+};
+
+exports.preloadFonts = preloadFonts;
+},{}],"toeh":[function(require,module,exports) {
+"use strict";
+
+var _menu = _interopRequireDefault(require("./menu"));
+
+var _utils = require("../utils");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// Preload typekit fonts
+(0, _utils.preloadFonts)('dba6omz').then(function () {
+  document.body.classList.remove('loading');
+});
+var menu = new _menu.default(document.querySelector('nav.menu'));
+},{"./menu":"CLsk","../utils":"MgTz"}]},{},["toeh"], null)
\ No newline at end of file
diff --git a/website/gooey/favicon.ico b/website/gooey/favicon.ico
new file mode 100644
index 00000000..2a904e4c
Binary files /dev/null and b/website/gooey/favicon.ico differ
diff --git a/website/gooey/index.html b/website/gooey/index.html
new file mode 100644
index 00000000..d5440431
--- /dev/null
+++ b/website/gooey/index.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html lang="en" class="no-js">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Kafka Archives - Millions of text and audiobooks</title>
+    <meta name="description" content="Millions of text and audiobooks, all free and open source">
+    <meta name="keywords" content="Audiobooks, pdf, books, internet archive, archive.org, Kafka archives">
+    <meta name="author" content="Codrops">
+    <link rel="shortcut icon" href="favicon.ico">
+    <link rel="stylesheet" href="https://use.typekit.net/dba6omz.css">
+    <link rel="stylesheet" type="text/css" href="base.98fd6c19.css">
+    <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
+    <script>document.documentElement.className = "js";
+
+var supportsCssVars = function supportsCssVars() {
+  var e,
+      t = document.createElement("style");
+  return t.innerHTML = "root: { --tmp-var: bold; }", document.head.appendChild(t), e = !!(window.CSS && window.CSS.supports && window.CSS.supports("font-weight", "var(--tmp-var)")), t.parentNode.removeChild(t), e;
+};
+
+supportsCssVars() || alert("Please view this demo in a modern browser that supports CSS Variables.");</script>
+</head>
+
+<body class="demo-3 loading">
+<main>
+    <h1 class="title">Kafka Archives</h1>
+    <nav class="menu">
+        <a class="menu__item" href="https://play.google.com/store/apps/details?id=com.kafka.user">
+            <svg class="menu__text" viewBox="0 0 150 20" preserveAspectRatio="xMinYMid meet">
+                <defs>
+                    <filter id="goo-1">
+                        <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="blur"></feGaussianBlur>
+                        <feColorMatrix in="blur" mode="matrix" values="	1 0 0 0 0
+																			0 1 0 0 0  
+																			1 0 1 0 0  
+																			0 0 0 18 -8" result="goo"></feColorMatrix>
+                        <feComposite in="SourceGraphic" in2="goo" operator="atop"></feComposite>
+                    </filter>
+                </defs>
+                <g>
+                    <text x="0" y="15">Download</text>
+                    <text x="0" y="15">Play Store</text>
+                </g>
+            </svg>
+        </a>
+        <a class="menu__item" href="https://www.kafkaarchives.com">
+            <svg class="menu__text" viewBox="0 0 150 20" preserveAspectRatio="xMinYMid meet">
+                <defs>
+                    <filter id="goo-2">
+                        <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="blur"></feGaussianBlur>
+                        <feColorMatrix in="blur" mode="matrix" values="	1 0 0 0 0
+																			0 1 0 0 0  
+																			1 0 1 0 0  
+																			0 0 0 18 -8" result="goo"></feColorMatrix>
+                        <feComposite in="SourceGraphic" in2="goo" operator="atop"></feComposite>
+                    </filter>
+                </defs>
+                <g>
+                    <text x="0" y="15">Visit</text>
+                    <text x="0" y="15">Website</text>
+                </g>
+            </svg>
+        </a>
+        <a class="menu__item" href="https://github.com/vipulyaara/Kafka">
+            <svg class="menu__text" viewBox="0 0 150 20" preserveAspectRatio="xMinYMid meet">
+                <defs>
+                    <filter id="goo-3">
+                        <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="blur"></feGaussianBlur>
+                        <feColorMatrix in="blur" mode="matrix" values="	1 0 0 0 0
+																			0 1 0 0 0  
+																			1 0 1 0 0  
+																			0 0 0 18 -8" result="goo"></feColorMatrix>
+                        <feComposite in="SourceGraphic" in2="goo" operator="atop"></feComposite>
+                    </filter>
+                </defs>
+                <g>
+                    <text x="0" y="15">See Code</text>
+                    <text x="0" y="15">Github</text>
+                </g>
+            </svg>
+        </a>
+    </nav>
+</main>
+<script src="demo3.b516845c.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/website/magnetic/404.html b/website/magnetic/404.html
new file mode 100644
index 00000000..1691cd71
--- /dev/null
+++ b/website/magnetic/404.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en" class="no-js">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>Kafka Archives</title>
+	<meta name="description" content="Millions of text and audiobooks, all free and open source">
+	<meta name="keywords" content="Audiobooks, pdf, books, internet archive, archive.org, Kafka archives">
+	<meta name="author" content="Codrops">
+	<link rel="shortcut icon" href="favicon.ico">
+	<link rel="stylesheet" href="https://use.typekit.net/jpv1bvw.css">
+	<link rel="stylesheet" type="text/css" href="base.98fd6c19.css">
+	<link rel="stylesheet" type="text/css" href="button.93b3ed9d.css">
+	<script>document.documentElement.className = "js";
+
+var supportsCssVars = function supportsCssVars() {
+  var e,
+      t = document.createElement("style");
+  return t.innerHTML = "root: { --tmp-var: bold; }", document.head.appendChild(t), e = !!(window.CSS && window.CSS.supports && window.CSS.supports("font-weight", "var(--tmp-var)")), t.parentNode.removeChild(t), e;
+};
+
+supportsCssVars() || alert("Please view this demo in a modern browser that supports CSS Variables.");</script>
+</head>
+<body class="demo-3">
+<main>
+	<div class="content">
+		<button class="button" id="download">
+					<span class="button__text">
+						<span class="button__text-inner">Download</span>
+					</span>
+		</button>
+	</div>
+</main>
+<svg class="cursor" width="25" height="25" viewBox="0 0 25 25">
+	<circle class="cursor__inner" cx="12.5" cy="12.5" r="6.25"></circle>
+</svg>
+<script src="demo.9ce5c2ea.js"></script>
+<script src="demo3.b516845c.js"></script>
+<script>
+	var button = document.getElementById("download");
+
+    button.addEventListener("click", function() {
+        var redirectURL = "https://play.google.com/store/apps/details?id=com.kafka.user";
+        window.location.href = redirectURL;
+    });
+</script>
+</body>
+</html>
diff --git a/website/magnetic/base.98fd6c19.css b/website/magnetic/base.98fd6c19.css
new file mode 100644
index 00000000..9908ed18
--- /dev/null
+++ b/website/magnetic/base.98fd6c19.css
@@ -0,0 +1,184 @@
+*,
+*::after,
+*::before {
+	box-sizing: border-box;
+}
+
+:root {
+	font-size: 12px;
+}
+
+body {
+	margin: 0;
+	--color-text: #111;
+	--color-bg: #e5e3df;
+	--color-link: #000;
+	--color-link-hover: #000;
+	color: var(--color-text);
+	background-color: var(--color-bg);
+	font-family: tenon, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif;
+}
+
+.button {
+	position: relative;
+}
+
+.active {
+	cursor: pointer;
+}
+
+/* Fade effect */
+.js body {
+	opacity: 0;
+	transition: opacity 0.3s;
+}
+
+.js body.render {
+	opacity: 1;
+}
+
+/* Page Loader */
+.js .loading::before,
+.js .loading::after {
+	content: '';
+	position: fixed;
+	z-index: 1000;
+}
+
+.js .loading::before {
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background: var(--color-bg);
+}
+
+.js .loading::after {
+	top: 50%;
+	left: 50%;
+	width: 60px;
+	height: 60px;
+	margin: -30px 0 0 -30px;
+	border-radius: 50%;
+	opacity: 0.4;
+	background: var(--color-link);
+	animation: loaderAnim 0.7s linear infinite alternate forwards;
+
+}
+
+@keyframes loaderAnim {
+	to {
+		opacity: 1;
+		transform: scale3d(0.5,0.5,1);
+	}
+}
+
+a {
+	text-decoration: underline;
+	color: var(--color-link);
+	outline: none;
+}
+
+a:hover,
+a:focus {
+	color: var(--color-link-hover);
+	outline: none;
+	text-decoration: none;
+}
+
+main {
+	background-color: inherit;
+	display: grid;
+	height: 100vh;
+	width: 100%;
+	padding: 3rem;
+	align-content: space-between;
+	grid-column-gap: 5vw;
+	grid-template-columns: 1fr;
+	grid-template-rows: auto auto auto;
+	grid-template-areas: 'header'
+						'content'
+						'demos';
+
+}
+
+.header {
+	grid-area: header;
+	display: flex;
+	flex-wrap: wrap;
+	text-transform: uppercase;
+}
+
+.header__title {
+	font-size: 1rem;
+	margin: 0 7vw 1rem 0;
+	font-weight: normal;
+	text-transform: uppercase;
+}
+
+.header__links a:not(:last-child) {
+	margin-right: 1rem;
+}
+
+.demos {
+	grid-area: demos;
+	justify-self: center;
+	position: relative;
+	text-align: center;
+	display: flex;
+}
+
+.demo {
+	display: block;
+	width: 14px;
+	height: 14px;
+	margin: 0 4px;
+	border-radius: 50%;
+	border: 2px solid var(--color-link);
+	background: var(--color-link);
+}
+
+.demo--current {
+	border-color: var(--color-link-hover);
+	background: none;
+	pointer-events: none;
+}
+
+.demo:hover,
+.demo:focus {
+	opacity: 0.5;
+}
+
+.content {
+	grid-area: content;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	-webkit-touch-callout: none;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.cursor {
+	display: none;
+}
+
+@media (any-pointer: fine) {
+	.cursor {
+		position: fixed;
+		top: 0;
+		left: 0;
+		display: block;
+		pointer-events: none;
+	}
+	.cursor__inner {
+		fill: var(--cursor-fill);
+		stroke: var(--cursor-stroke);
+		stroke-width: var(--cursor-stroke-width);
+	}
+	.credits {
+		padding-left: 25vw;
+	}
+}
diff --git a/website/magnetic/button.93b3ed9d.css b/website/magnetic/button.93b3ed9d.css
new file mode 100644
index 00000000..31fc6071
--- /dev/null
+++ b/website/magnetic/button.93b3ed9d.css
@@ -0,0 +1,81 @@
+
+body {
+	--button-border-radius: 7px;
+    --button-bg: transparent;
+    --button-stroke: #d8d4cf;
+    --button-stroke-width: 0px;
+    --button-text: #000;
+    --button-bg-hover: #000;
+    --button-stroke-hover: #000;
+    --button-stroke-width-hover: 0px;
+    --button-text-hover: #000;
+    --button-text-focus: red;
+    --cursor-stroke: red;
+    --cursor-fill: red;
+    --cursor-stroke-width: 0px;
+	--button-bg-text: #e0d9d2;
+	--color-bg: #d6ccc1;
+}
+
+.button {
+	cursor: pointer;
+	-moz-appearance: none;
+	-webkit-appearance: none;
+	border-width: var(--button-stroke-width);
+	border-color: var(--button-stroke);
+	border-style: solid;
+	color: var(--button-text);
+	background: var(--button-bg);
+	border-radius: var(--button-border-radius);
+	min-width: 12rem;
+	height: 6rem;
+	padding: 0;
+	margin: 1rem;
+	font-family: inherit;
+	font-size: 1.5rem;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.button:focus,
+.button--hover {
+	outline: none;
+	border-width: var(--button-stroke-width-hover);
+	border-color: var(--button-stroke-hover);
+	color: var(--button-text-hover);
+}
+
+.button:focus {
+	color: var(--button-text-focus);
+}
+
+.button::before {
+	content: '';
+	position: absolute;
+	top: 5px;
+	left: 5px;
+	width: calc(100% - 10px);
+	height: calc(100% - 10px);
+	background: rgba(0,0,0,0.3);
+	filter: blur(13px);
+	border-radius: var(--button-border-radius);
+}
+
+.button__text, 
+.button__text-inner {
+	position: relative;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 100%;
+	height: 100%;
+}
+
+.button__text {
+	flex: none;
+	background: var(--button-bg-text);
+	width: 100%;
+	height: 100%;
+	border-radius: var(--button-border-radius);
+}
\ No newline at end of file
diff --git a/website/magnetic/demo.9ce5c2ea.js b/website/magnetic/demo.9ce5c2ea.js
new file mode 100644
index 00000000..76c54a3e
--- /dev/null
+++ b/website/magnetic/demo.9ce5c2ea.js
@@ -0,0 +1,139 @@
+// modules are defined as an array
+// [ module function, map of requires ]
+//
+// map of requires is short require name -> numeric require
+//
+// anything defined in a previous bundle is accessed via the
+// orig method which is the require for previous bundles
+parcelRequire = (function (modules, cache, entry, globalName) {
+  // Save the require from previous bundle to this closure if any
+  var previousRequire = typeof parcelRequire === 'function' && parcelRequire;
+  var nodeRequire = typeof require === 'function' && require;
+
+  function newRequire(name, jumped) {
+    if (!cache[name]) {
+      if (!modules[name]) {
+        // if we cannot find the module within our internal map or
+        // cache jump to the current global require ie. the last bundle
+        // that was added to the page.
+        var currentRequire = typeof parcelRequire === 'function' && parcelRequire;
+        if (!jumped && currentRequire) {
+          return currentRequire(name, true);
+        }
+
+        // If there are other bundles on this page the require from the
+        // previous one is saved to 'previousRequire'. Repeat this as
+        // many times as there are bundles until the module is found or
+        // we exhaust the require chain.
+        if (previousRequire) {
+          return previousRequire(name, true);
+        }
+
+        // Try the node require function if it exists.
+        if (nodeRequire && typeof name === 'string') {
+          return nodeRequire(name);
+        }
+
+        var err = new Error('Cannot find module \'' + name + '\'');
+        err.code = 'MODULE_NOT_FOUND';
+        throw err;
+      }
+
+      localRequire.resolve = resolve;
+      localRequire.cache = {};
+
+      var module = cache[name] = new newRequire.Module(name);
+
+      modules[name][0].call(module.exports, localRequire, module, module.exports, this);
+    }
+
+    return cache[name].exports;
+
+    function localRequire(x){
+      return newRequire(localRequire.resolve(x));
+    }
+
+    function resolve(x){
+      return modules[name][1][x] || x;
+    }
+  }
+
+  function Module(moduleName) {
+    this.id = moduleName;
+    this.bundle = newRequire;
+    this.exports = {};
+  }
+
+  newRequire.isParcelRequire = true;
+  newRequire.Module = Module;
+  newRequire.modules = modules;
+  newRequire.cache = cache;
+  newRequire.parent = previousRequire;
+  newRequire.register = function (id, exports) {
+    modules[id] = [function (require, module) {
+      module.exports = exports;
+    }, {}];
+  };
+
+  var error;
+  for (var i = 0; i < entry.length; i++) {
+    try {
+      newRequire(entry[i]);
+    } catch (e) {
+      // Save first error but execute all entries
+      if (!error) {
+        error = e;
+      }
+    }
+  }
+
+  if (entry.length) {
+    // Expose entry point to Node, AMD or browser globals
+    // Based on https://github.com/ForbesLindesay/umd/blob/master/template.js
+    var mainExports = newRequire(entry[entry.length - 1]);
+
+    // CommonJS
+    if (typeof exports === "object" && typeof module !== "undefined") {
+      module.exports = mainExports;
+
+    // RequireJS
+    } else if (typeof define === "function" && define.amd) {
+     define(function () {
+       return mainExports;
+     });
+
+    // <script>
+    } else if (globalName) {
+      this[globalName] = mainExports;
+    }
+  }
+
+  // Override the current require with this new one
+  parcelRequire = newRequire;
+
+  if (error) {
+    // throw error from earlier, _after updating parcelRequire_
+    throw error;
+  }
+
+  return newRequire;
+})({"Mfih":[function(require,module,exports) {
+setTimeout(function () {
+  return document.body.classList.add('render');
+}, 60);
+var navdemos = Array.from(document.querySelectorAll('nav.demos > .demo'));
+
+var navigate = function navigate(linkEl) {
+  document.body.classList.remove('render');
+  document.body.addEventListener('transitionend', function () {
+    return window.location = linkEl.href;
+  });
+};
+
+navdemos.forEach(function (link) {
+  return link.addEventListener('click', function (ev) {
+    ev.preventDefault();
+    navigate(ev.target);
+  });
+});
+},{}]},{},["Mfih"], null)
\ No newline at end of file
diff --git a/website/magnetic/demo3.b516845c.js b/website/magnetic/demo3.b516845c.js
new file mode 100644
index 00000000..08b28f1d
--- /dev/null
+++ b/website/magnetic/demo3.b516845c.js
@@ -0,0 +1,6434 @@
+// modules are defined as an array
+// [ module function, map of requires ]
+//
+// map of requires is short require name -> numeric require
+//
+// anything defined in a previous bundle is accessed via the
+// orig method which is the require for previous bundles
+parcelRequire = (function (modules, cache, entry, globalName) {
+  // Save the require from previous bundle to this closure if any
+  var previousRequire = typeof parcelRequire === 'function' && parcelRequire;
+  var nodeRequire = typeof require === 'function' && require;
+
+  function newRequire(name, jumped) {
+    if (!cache[name]) {
+      if (!modules[name]) {
+        // if we cannot find the module within our internal map or
+        // cache jump to the current global require ie. the last bundle
+        // that was added to the page.
+        var currentRequire = typeof parcelRequire === 'function' && parcelRequire;
+        if (!jumped && currentRequire) {
+          return currentRequire(name, true);
+        }
+
+        // If there are other bundles on this page the require from the
+        // previous one is saved to 'previousRequire'. Repeat this as
+        // many times as there are bundles until the module is found or
+        // we exhaust the require chain.
+        if (previousRequire) {
+          return previousRequire(name, true);
+        }
+
+        // Try the node require function if it exists.
+        if (nodeRequire && typeof name === 'string') {
+          return nodeRequire(name);
+        }
+
+        var err = new Error('Cannot find module \'' + name + '\'');
+        err.code = 'MODULE_NOT_FOUND';
+        throw err;
+      }
+
+      localRequire.resolve = resolve;
+      localRequire.cache = {};
+
+      var module = cache[name] = new newRequire.Module(name);
+
+      modules[name][0].call(module.exports, localRequire, module, module.exports, this);
+    }
+
+    return cache[name].exports;
+
+    function localRequire(x){
+      return newRequire(localRequire.resolve(x));
+    }
+
+    function resolve(x){
+      return modules[name][1][x] || x;
+    }
+  }
+
+  function Module(moduleName) {
+    this.id = moduleName;
+    this.bundle = newRequire;
+    this.exports = {};
+  }
+
+  newRequire.isParcelRequire = true;
+  newRequire.Module = Module;
+  newRequire.modules = modules;
+  newRequire.cache = cache;
+  newRequire.parent = previousRequire;
+  newRequire.register = function (id, exports) {
+    modules[id] = [function (require, module) {
+      module.exports = exports;
+    }, {}];
+  };
+
+  var error;
+  for (var i = 0; i < entry.length; i++) {
+    try {
+      newRequire(entry[i]);
+    } catch (e) {
+      // Save first error but execute all entries
+      if (!error) {
+        error = e;
+      }
+    }
+  }
+
+  if (entry.length) {
+    // Expose entry point to Node, AMD or browser globals
+    // Based on https://github.com/ForbesLindesay/umd/blob/master/template.js
+    var mainExports = newRequire(entry[entry.length - 1]);
+
+    // CommonJS
+    if (typeof exports === "object" && typeof module !== "undefined") {
+      module.exports = mainExports;
+
+    // RequireJS
+    } else if (typeof define === "function" && define.amd) {
+     define(function () {
+       return mainExports;
+     });
+
+    // <script>
+    } else if (globalName) {
+      this[globalName] = mainExports;
+    }
+  }
+
+  // Override the current require with this new one
+  parcelRequire = newRequire;
+
+  if (error) {
+    // throw error from earlier, _after updating parcelRequire_
+    throw error;
+  }
+
+  return newRequire;
+})({"TNS6":[function(require,module,exports) {
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports._getCache = exports._getSetter = exports._missingPlugin = exports._round = exports._roundModifier = exports._config = exports._ticker = exports._plugins = exports._checkPlugin = exports._replaceRandom = exports._colorStringFilter = exports._sortPropTweensByPriority = exports._forEachName = exports._removeLinkedListItem = exports._setDefaults = exports._relExp = exports._renderComplexString = exports._isUndefined = exports._isString = exports._numWithUnitExp = exports._numExp = exports._getProperty = exports.shuffle = exports.interpolate = exports.unitize = exports.pipe = exports.mapRange = exports.toArray = exports.splitColor = exports.clamp = exports.getUnit = exports.normalize = exports.snap = exports.random = exports.distribute = exports.wrapYoyo = exports.wrap = exports.Circ = exports.Expo = exports.Sine = exports.Bounce = exports.SteppedEase = exports.Back = exports.Elastic = exports.Strong = exports.Quint = exports.Quart = exports.Cubic = exports.Quad = exports.Linear = exports.Power4 = exports.Power3 = exports.Power2 = exports.Power1 = exports.Power0 = exports.default = exports.gsap = exports.PropTween = exports.TweenLite = exports.TweenMax = exports.Tween = exports.TimelineLite = exports.TimelineMax = exports.Timeline = exports.Animation = exports.GSCache = void 0;
+
+function _assertThisInitialized(self) {
+  if (self === void 0) {
+    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+  }
+
+  return self;
+}
+
+function _inheritsLoose(subClass, superClass) {
+  subClass.prototype = Object.create(superClass.prototype);
+  subClass.prototype.constructor = subClass;
+  subClass.__proto__ = superClass;
+}
+/*!
+ * GSAP 3.4.2
+ * https://greensock.com
+ *
+ * @license Copyright 2008-2020, GreenSock. All rights reserved.
+ * Subject to the terms at https://greensock.com/standard-license or for
+ * Club GreenSock members, the agreement issued with that membership.
+ * @author: Jack Doyle, jack@greensock.com
+*/
+
+/* eslint-disable */
+
+
+var _config = {
+  autoSleep: 120,
+  force3D: "auto",
+  nullTargetWarn: 1,
+  units: {
+    lineHeight: ""
+  }
+},
+    _defaults = {
+  duration: .5,
+  overwrite: false,
+  delay: 0
+},
+    _bigNum = 1e8,
+    _tinyNum = 1 / _bigNum,
+    _2PI = Math.PI * 2,
+    _HALF_PI = _2PI / 4,
+    _gsID = 0,
+    _sqrt = Math.sqrt,
+    _cos = Math.cos,
+    _sin = Math.sin,
+    _isString = function _isString(value) {
+  return typeof value === "string";
+},
+    _isFunction = function _isFunction(value) {
+  return typeof value === "function";
+},
+    _isNumber = function _isNumber(value) {
+  return typeof value === "number";
+},
+    _isUndefined = function _isUndefined(value) {
+  return typeof value === "undefined";
+},
+    _isObject = function _isObject(value) {
+  return typeof value === "object";
+},
+    _isNotFalse = function _isNotFalse(value) {
+  return value !== false;
+},
+    _windowExists = function _windowExists() {
+  return typeof window !== "undefined";
+},
+    _isFuncOrString = function _isFuncOrString(value) {
+  return _isFunction(value) || _isString(value);
+},
+    _isArray = Array.isArray,
+    _strictNumExp = /(?:-?\.?\d|\.)+/gi,
+    //only numbers (including negatives and decimals) but NOT relative values.
+_numExp = /[-+=.]*\d+[.e\-+]*\d*[e\-\+]*\d*/g,
+    //finds any numbers, including ones that start with += or -=, negative numbers, and ones in scientific notation like 1e-8.
+_numWithUnitExp = /[-+=.]*\d+[.e-]*\d*[a-z%]*/g,
+    _complexStringNumExp = /[-+=.]*\d+(?:\.|e-|e)*\d*/gi,
+    //duplicate so that while we're looping through matches from exec(), it doesn't contaminate the lastIndex of _numExp which we use to search for colors too.
+_parenthesesExp = /\(([^()]+)\)/i,
+    //finds the string between parentheses.
+_relExp = /[+-]=-?[\.\d]+/,
+    _delimitedValueExp = /[#\-+.]*\b[a-z\d-=+%.]+/gi,
+    _globalTimeline,
+    _win,
+    _coreInitted,
+    _doc,
+    _globals = {},
+    _installScope = {},
+    _coreReady,
+    _install = function _install(scope) {
+  return (_installScope = _merge(scope, _globals)) && gsap;
+},
+    _missingPlugin = function _missingPlugin(property, value) {
+  return console.warn("Invalid property", property, "set to", value, "Missing plugin? gsap.registerPlugin()");
+},
+    _warn = function _warn(message, suppress) {
+  return !suppress && console.warn(message);
+},
+    _addGlobal = function _addGlobal(name, obj) {
+  return name && (_globals[name] = obj) && _installScope && (_installScope[name] = obj) || _globals;
+},
+    _emptyFunc = function _emptyFunc() {
+  return 0;
+},
+    _reservedProps = {},
+    _lazyTweens = [],
+    _lazyLookup = {},
+    _lastRenderedFrame,
+    _plugins = {},
+    _effects = {},
+    _nextGCFrame = 30,
+    _harnessPlugins = [],
+    _callbackNames = "",
+    _harness = function _harness(targets) {
+  var target = targets[0],
+      harnessPlugin,
+      i;
+
+  if (!_isObject(target) && !_isFunction(target)) {
+    targets = [targets];
+  }
+
+  if (!(harnessPlugin = (target._gsap || {}).harness)) {
+    i = _harnessPlugins.length;
+
+    while (i-- && !_harnessPlugins[i].targetTest(target)) {}
+
+    harnessPlugin = _harnessPlugins[i];
+  }
+
+  i = targets.length;
+
+  while (i--) {
+    targets[i] && (targets[i]._gsap || (targets[i]._gsap = new GSCache(targets[i], harnessPlugin))) || targets.splice(i, 1);
+  }
+
+  return targets;
+},
+    _getCache = function _getCache(target) {
+  return target._gsap || _harness(toArray(target))[0]._gsap;
+},
+    _getProperty = function _getProperty(target, property) {
+  var currentValue = target[property];
+  return _isFunction(currentValue) ? target[property]() : _isUndefined(currentValue) && target.getAttribute(property) || currentValue;
+},
+    _forEachName = function _forEachName(names, func) {
+  return (names = names.split(",")).forEach(func) || names;
+},
+    //split a comma-delimited list of names into an array, then run a forEach() function and return the split array (this is just a way to consolidate/shorten some code).
+_round = function _round(value) {
+  return Math.round(value * 100000) / 100000 || 0;
+},
+    _arrayContainsAny = function _arrayContainsAny(toSearch, toFind) {
+  //searches one array to find matches for any of the items in the toFind array. As soon as one is found, it returns true. It does NOT return all the matches; it's simply a boolean search.
+  var l = toFind.length,
+      i = 0;
+
+  for (; toSearch.indexOf(toFind[i]) < 0 && ++i < l;) {}
+
+  return i < l;
+},
+    _parseVars = function _parseVars(params, type, parent) {
+  //reads the arguments passed to one of the key methods and figures out if the user is defining things with the OLD/legacy syntax where the duration is the 2nd parameter, and then it adjusts things accordingly and spits back the corrected vars object (with the duration added if necessary, as well as runBackwards or startAt or immediateRender). type 0 = to()/staggerTo(), 1 = from()/staggerFrom(), 2 = fromTo()/staggerFromTo()
+  var isLegacy = _isNumber(params[1]),
+      varsIndex = (isLegacy ? 2 : 1) + (type < 2 ? 0 : 1),
+      vars = params[varsIndex],
+      irVars;
+
+  if (isLegacy) {
+    vars.duration = params[1];
+  }
+
+  vars.parent = parent;
+
+  if (type) {
+    irVars = vars;
+
+    while (parent && !("immediateRender" in irVars)) {
+      // inheritance hasn't happened yet, but someone may have set a default in an ancestor timeline. We could do vars.immediateRender = _isNotFalse(_inheritDefaults(vars).immediateRender) but that'd exact a slight performance penalty because _inheritDefaults() also runs in the Tween constructor. We're paying a small kb price here to gain speed.
+      irVars = parent.vars.defaults || {};
+      parent = _isNotFalse(parent.vars.inherit) && parent.parent;
+    }
+
+    vars.immediateRender = _isNotFalse(irVars.immediateRender);
+
+    if (type < 2) {
+      vars.runBackwards = 1;
+    } else {
+      vars.startAt = params[varsIndex - 1]; // "from" vars
+    }
+  }
+
+  return vars;
+},
+    _lazyRender = function _lazyRender() {
+  var l = _lazyTweens.length,
+      a = _lazyTweens.slice(0),
+      i,
+      tween;
+
+  _lazyLookup = {};
+  _lazyTweens.length = 0;
+
+  for (i = 0; i < l; i++) {
+    tween = a[i];
+    tween && tween._lazy && (tween.render(tween._lazy[0], tween._lazy[1], true)._lazy = 0);
+  }
+},
+    _lazySafeRender = function _lazySafeRender(animation, time, suppressEvents, force) {
+  _lazyTweens.length && _lazyRender();
+  animation.render(time, suppressEvents, force);
+  _lazyTweens.length && _lazyRender(); //in case rendering caused any tweens to lazy-init, we should render them because typically when someone calls seek() or time() or progress(), they expect an immediate render.
+},
+    _numericIfPossible = function _numericIfPossible(value) {
+  var n = parseFloat(value);
+  return (n || n === 0) && (value + "").match(_delimitedValueExp).length < 2 ? n : value;
+},
+    _passThrough = function _passThrough(p) {
+  return p;
+},
+    _setDefaults = function _setDefaults(obj, defaults) {
+  for (var p in defaults) {
+    p in obj || (obj[p] = defaults[p]);
+  }
+
+  return obj;
+},
+    _setKeyframeDefaults = function _setKeyframeDefaults(obj, defaults) {
+  for (var p in defaults) {
+    if (!(p in obj) && p !== "duration" && p !== "ease") {
+      obj[p] = defaults[p];
+    }
+  }
+},
+    _merge = function _merge(base, toMerge) {
+  for (var p in toMerge) {
+    base[p] = toMerge[p];
+  }
+
+  return base;
+},
+    _mergeDeep = function _mergeDeep(base, toMerge) {
+  for (var p in toMerge) {
+    base[p] = _isObject(toMerge[p]) ? _mergeDeep(base[p] || (base[p] = {}), toMerge[p]) : toMerge[p];
+  }
+
+  return base;
+},
+    _copyExcluding = function _copyExcluding(obj, excluding) {
+  var copy = {},
+      p;
+
+  for (p in obj) {
+    p in excluding || (copy[p] = obj[p]);
+  }
+
+  return copy;
+},
+    _inheritDefaults = function _inheritDefaults(vars) {
+  var parent = vars.parent || _globalTimeline,
+      func = vars.keyframes ? _setKeyframeDefaults : _setDefaults;
+
+  if (_isNotFalse(vars.inherit)) {
+    while (parent) {
+      func(vars, parent.vars.defaults);
+      parent = parent.parent || parent._dp;
+    }
+  }
+
+  return vars;
+},
+    _arraysMatch = function _arraysMatch(a1, a2) {
+  var i = a1.length,
+      match = i === a2.length;
+
+  while (match && i-- && a1[i] === a2[i]) {}
+
+  return i < 0;
+},
+    _addLinkedListItem = function _addLinkedListItem(parent, child, firstProp, lastProp, sortBy) {
+  if (firstProp === void 0) {
+    firstProp = "_first";
+  }
+
+  if (lastProp === void 0) {
+    lastProp = "_last";
+  }
+
+  var prev = parent[lastProp],
+      t;
+
+  if (sortBy) {
+    t = child[sortBy];
+
+    while (prev && prev[sortBy] > t) {
+      prev = prev._prev;
+    }
+  }
+
+  if (prev) {
+    child._next = prev._next;
+    prev._next = child;
+  } else {
+    child._next = parent[firstProp];
+    parent[firstProp] = child;
+  }
+
+  if (child._next) {
+    child._next._prev = child;
+  } else {
+    parent[lastProp] = child;
+  }
+
+  child._prev = prev;
+  child.parent = child._dp = parent;
+  return child;
+},
+    _removeLinkedListItem = function _removeLinkedListItem(parent, child, firstProp, lastProp) {
+  if (firstProp === void 0) {
+    firstProp = "_first";
+  }
+
+  if (lastProp === void 0) {
+    lastProp = "_last";
+  }
+
+  var prev = child._prev,
+      next = child._next;
+
+  if (prev) {
+    prev._next = next;
+  } else if (parent[firstProp] === child) {
+    parent[firstProp] = next;
+  }
+
+  if (next) {
+    next._prev = prev;
+  } else if (parent[lastProp] === child) {
+    parent[lastProp] = prev;
+  }
+
+  child._next = child._prev = child.parent = null; // don't delete the _dp just so we can revert if necessary. But parent should be null to indicate the item isn't in a linked list.
+},
+    _removeFromParent = function _removeFromParent(child, onlyIfParentHasAutoRemove) {
+  child.parent && (!onlyIfParentHasAutoRemove || child.parent.autoRemoveChildren) && child.parent.remove(child);
+  child._act = 0;
+},
+    _uncache = function _uncache(animation) {
+  var a = animation;
+
+  while (a) {
+    a._dirty = 1;
+    a = a.parent;
+  }
+
+  return animation;
+},
+    _recacheAncestors = function _recacheAncestors(animation) {
+  var parent = animation.parent;
+
+  while (parent && parent.parent) {
+    //sometimes we must force a re-sort of all children and update the duration/totalDuration of all ancestor timelines immediately in case, for example, in the middle of a render loop, one tween alters another tween's timeScale which shoves its startTime before 0, forcing the parent timeline to shift around and shiftChildren() which could affect that next tween's render (startTime). Doesn't matter for the root timeline though.
+    parent._dirty = 1;
+    parent.totalDuration();
+    parent = parent.parent;
+  }
+
+  return animation;
+},
+    _hasNoPausedAncestors = function _hasNoPausedAncestors(animation) {
+  return !animation || animation._ts && _hasNoPausedAncestors(animation.parent);
+},
+    _elapsedCycleDuration = function _elapsedCycleDuration(animation) {
+  return animation._repeat ? _animationCycle(animation._tTime, animation = animation.duration() + animation._rDelay) * animation : 0;
+},
+    // feed in the totalTime and cycleDuration and it'll return the cycle (iteration minus 1) and if the playhead is exactly at the very END, it will NOT bump up to the next cycle.
+_animationCycle = function _animationCycle(tTime, cycleDuration) {
+  return (tTime /= cycleDuration) && ~~tTime === tTime ? ~~tTime - 1 : ~~tTime;
+},
+    _parentToChildTotalTime = function _parentToChildTotalTime(parentTime, child) {
+  return (parentTime - child._start) * child._ts + (child._ts >= 0 ? 0 : child._dirty ? child.totalDuration() : child._tDur);
+},
+    _setEnd = function _setEnd(animation) {
+  return animation._end = _round(animation._start + (animation._tDur / Math.abs(animation._ts || animation._rts || _tinyNum) || 0));
+},
+    _alignPlayhead = function _alignPlayhead(animation, totalTime) {
+  // adjusts the animation's _start and _end according to the provided totalTime (only if the parent's smoothChildTiming is true and the animation isn't paused). It doesn't do any rendering or forcing things back into parent timelines, etc. - that's what totalTime() is for.
+  var parent = animation._dp;
+
+  if (parent && parent.smoothChildTiming && animation._ts) {
+    animation._start = _round(animation._dp._time - (animation._ts > 0 ? totalTime / animation._ts : ((animation._dirty ? animation.totalDuration() : animation._tDur) - totalTime) / -animation._ts));
+
+    _setEnd(animation);
+
+    parent._dirty || _uncache(parent); //for performance improvement. If the parent's cache is already dirty, it already took care of marking the ancestors as dirty too, so skip the function call here.
+  }
+
+  return animation;
+},
+
+/*
+_totalTimeToTime = (clampedTotalTime, duration, repeat, repeatDelay, yoyo) => {
+	let cycleDuration = duration + repeatDelay,
+		time = _round(clampedTotalTime % cycleDuration);
+	if (time > duration) {
+		time = duration;
+	}
+	return (yoyo && (~~(clampedTotalTime / cycleDuration) & 1)) ? duration - time : time;
+},
+*/
+_postAddChecks = function _postAddChecks(timeline, child) {
+  var t;
+
+  if (child._time || child._initted && !child._dur) {
+    //in case, for example, the _start is moved on a tween that has already rendered. Imagine it's at its end state, then the startTime is moved WAY later (after the end of this timeline), it should render at its beginning.
+    t = _parentToChildTotalTime(timeline.rawTime(), child);
+
+    if (!child._dur || _clamp(0, child.totalDuration(), t) - child._tTime > _tinyNum) {
+      child.render(t, true);
+    }
+  } //if the timeline has already ended but the inserted tween/timeline extends the duration, we should enable this timeline again so that it renders properly. We should also align the playhead with the parent timeline's when appropriate.
+
+
+  if (_uncache(timeline)._dp && timeline._initted && timeline._time >= timeline._dur && timeline._ts) {
+    //in case any of the ancestors had completed but should now be enabled...
+    if (timeline._dur < timeline.duration()) {
+      t = timeline;
+
+      while (t._dp) {
+        t.rawTime() >= 0 && t.totalTime(t._tTime); //moves the timeline (shifts its startTime) if necessary, and also enables it. If it's currently zero, though, it may not be scheduled to render until later so there's no need to force it to align with the current playhead position. Only move to catch up with the playhead.
+
+        t = t._dp;
+      }
+    }
+
+    timeline._zTime = -_tinyNum; // helps ensure that the next render() will be forced (crossingStart = true in render()), even if the duration hasn't changed (we're adding a child which would need to get rendered). Definitely an edge case. Note: we MUST do this AFTER the loop above where the totalTime() might trigger a render() because this _addToTimeline() method gets called from the Animation constructor, BEFORE tweens even record their targets, etc. so we wouldn't want things to get triggered in the wrong order.
+  }
+},
+    _addToTimeline = function _addToTimeline(timeline, child, position, skipChecks) {
+  child.parent && _removeFromParent(child);
+  child._start = _round(position + child._delay);
+  child._end = _round(child._start + (child.totalDuration() / Math.abs(child.timeScale()) || 0));
+
+  _addLinkedListItem(timeline, child, "_first", "_last", timeline._sort ? "_start" : 0);
+
+  timeline._recent = child;
+  skipChecks || _postAddChecks(timeline, child);
+  return timeline;
+},
+    _scrollTrigger = function _scrollTrigger(animation, trigger) {
+  return (_globals.ScrollTrigger || _missingPlugin("scrollTrigger", trigger)) && _globals.ScrollTrigger.create(trigger, animation);
+},
+    _attemptInitTween = function _attemptInitTween(tween, totalTime, force, suppressEvents) {
+  _initTween(tween, totalTime);
+
+  if (!tween._initted) {
+    return 1;
+  }
+
+  if (!force && tween._pt && (tween._dur && tween.vars.lazy !== false || !tween._dur && tween.vars.lazy) && _lastRenderedFrame !== _ticker.frame) {
+    _lazyTweens.push(tween);
+
+    tween._lazy = [totalTime, suppressEvents];
+    return 1;
+  }
+},
+    _renderZeroDurationTween = function _renderZeroDurationTween(tween, totalTime, suppressEvents, force) {
+  var prevRatio = tween.ratio,
+      ratio = totalTime < 0 || !totalTime && prevRatio && !tween._start && tween._zTime > _tinyNum && !tween._dp._lock || tween._ts < 0 || tween._dp._ts < 0 ? 0 : 1,
+      // check parent's _lock because when a timeline repeats/yoyos and does its artificial wrapping, we shouldn't force the ratio back to 0. Also, if the tween or its parent is reversed and the totalTime is 0, we should go to a ratio of 0.
+  repeatDelay = tween._rDelay,
+      tTime = 0,
+      pt,
+      iteration,
+      prevIteration;
+
+  if (repeatDelay && tween._repeat) {
+    // in case there's a zero-duration tween that has a repeat with a repeatDelay
+    tTime = _clamp(0, tween._tDur, totalTime);
+    iteration = _animationCycle(tTime, repeatDelay);
+    prevIteration = _animationCycle(tween._tTime, repeatDelay);
+
+    if (iteration !== prevIteration) {
+      prevRatio = 1 - ratio;
+      tween.vars.repeatRefresh && tween._initted && tween.invalidate();
+    }
+  }
+
+  if (!tween._initted && _attemptInitTween(tween, totalTime, force, suppressEvents)) {
+    // if we render the very beginning (time == 0) of a fromTo(), we must force the render (normal tweens wouldn't need to render at a time of 0 when the prevTime was also 0). This is also mandatory to make sure overwriting kicks in immediately.
+    return;
+  }
+
+  if (ratio !== prevRatio || force || tween._zTime === _tinyNum || !totalTime && tween._zTime) {
+    prevIteration = tween._zTime;
+    tween._zTime = totalTime || (suppressEvents ? _tinyNum : 0); // when the playhead arrives at EXACTLY time 0 (right on top) of a zero-duration tween, we need to discern if events are suppressed so that when the playhead moves again (next time), it'll trigger the callback. If events are NOT suppressed, obviously the callback would be triggered in this render. Basically, the callback should fire either when the playhead ARRIVES or LEAVES this exact spot, not both. Imagine doing a timeline.seek(0) and there's a callback that sits at 0. Since events are suppressed on that seek() by default, nothing will fire, but when the playhead moves off of that position, the callback should fire. This behavior is what people intuitively expect.
+
+    suppressEvents || (suppressEvents = totalTime && !prevIteration); // if it was rendered previously at exactly 0 (_zTime) and now the playhead is moving away, DON'T fire callbacks otherwise they'll seem like duplicates.
+
+    tween.ratio = ratio;
+    tween._from && (ratio = 1 - ratio);
+    tween._time = 0;
+    tween._tTime = tTime;
+    suppressEvents || _callback(tween, "onStart");
+    pt = tween._pt;
+
+    while (pt) {
+      pt.r(ratio, pt.d);
+      pt = pt._next;
+    }
+
+    tween._startAt && totalTime < 0 && tween._startAt.render(totalTime, true, true);
+    tween._onUpdate && !suppressEvents && _callback(tween, "onUpdate");
+    tTime && tween._repeat && !suppressEvents && tween.parent && _callback(tween, "onRepeat");
+
+    if ((totalTime >= tween._tDur || totalTime < 0) && tween.ratio === ratio) {
+      ratio && _removeFromParent(tween, 1);
+
+      if (!suppressEvents) {
+        _callback(tween, ratio ? "onComplete" : "onReverseComplete", true);
+
+        tween._prom && tween._prom();
+      }
+    }
+  } else if (!tween._zTime) {
+    tween._zTime = totalTime;
+  }
+},
+    _findNextPauseTween = function _findNextPauseTween(animation, prevTime, time) {
+  var child;
+
+  if (time > prevTime) {
+    child = animation._first;
+
+    while (child && child._start <= time) {
+      if (!child._dur && child.data === "isPause" && child._start > prevTime) {
+        return child;
+      }
+
+      child = child._next;
+    }
+  } else {
+    child = animation._last;
+
+    while (child && child._start >= time) {
+      if (!child._dur && child.data === "isPause" && child._start < prevTime) {
+        return child;
+      }
+
+      child = child._prev;
+    }
+  }
+},
+    _setDuration = function _setDuration(animation, duration, skipUncache) {
+  var repeat = animation._repeat,
+      dur = _round(duration) || 0;
+  animation._dur = dur;
+  animation._tDur = !repeat ? dur : repeat < 0 ? 1e10 : _round(dur * (repeat + 1) + animation._rDelay * repeat);
+
+  if (animation._time > dur) {
+    animation._time = dur;
+    animation._tTime = Math.min(animation._tTime, animation._tDur);
+  }
+
+  !skipUncache && _uncache(animation.parent);
+  animation.parent && _setEnd(animation);
+  return animation;
+},
+    _onUpdateTotalDuration = function _onUpdateTotalDuration(animation) {
+  return animation instanceof Timeline ? _uncache(animation) : _setDuration(animation, animation._dur);
+},
+    _zeroPosition = {
+  _start: 0,
+  endTime: _emptyFunc
+},
+    _parsePosition = function _parsePosition(animation, position) {
+  var labels = animation.labels,
+      recent = animation._recent || _zeroPosition,
+      clippedDuration = animation.duration() >= _bigNum ? recent.endTime(false) : animation._dur,
+      //in case there's a child that infinitely repeats, users almost never intend for the insertion point of a new child to be based on a SUPER long value like that so we clip it and assume the most recently-added child's endTime should be used instead.
+  i,
+      offset;
+
+  if (_isString(position) && (isNaN(position) || position in labels)) {
+    //if the string is a number like "1", check to see if there's a label with that name, otherwise interpret it as a number (absolute value).
+    i = position.charAt(0);
+
+    if (i === "<" || i === ">") {
+      return (i === "<" ? recent._start : recent.endTime(recent._repeat >= 0)) + (parseFloat(position.substr(1)) || 0);
+    }
+
+    i = position.indexOf("=");
+
+    if (i < 0) {
+      position in labels || (labels[position] = clippedDuration);
+      return labels[position];
+    }
+
+    offset = +(position.charAt(i - 1) + position.substr(i + 1));
+    return i > 1 ? _parsePosition(animation, position.substr(0, i - 1)) + offset : clippedDuration + offset;
+  }
+
+  return position == null ? clippedDuration : +position;
+},
+    _conditionalReturn = function _conditionalReturn(value, func) {
+  return value || value === 0 ? func(value) : func;
+},
+    _clamp = function _clamp(min, max, value) {
+  return value < min ? min : value > max ? max : value;
+},
+    getUnit = function getUnit(value) {
+  return (value + "").substr((parseFloat(value) + "").length);
+},
+    clamp = function clamp(min, max, value) {
+  return _conditionalReturn(value, function (v) {
+    return _clamp(min, max, v);
+  });
+},
+    _slice = [].slice,
+    _isArrayLike = function _isArrayLike(value, nonEmpty) {
+  return value && _isObject(value) && "length" in value && (!nonEmpty && !value.length || value.length - 1 in value && _isObject(value[0])) && !value.nodeType && value !== _win;
+},
+    _flatten = function _flatten(ar, leaveStrings, accumulator) {
+  if (accumulator === void 0) {
+    accumulator = [];
+  }
+
+  return ar.forEach(function (value) {
+    var _accumulator;
+
+    return _isString(value) && !leaveStrings || _isArrayLike(value, 1) ? (_accumulator = accumulator).push.apply(_accumulator, toArray(value)) : accumulator.push(value);
+  }) || accumulator;
+},
+    //takes any value and returns an array. If it's a string (and leaveStrings isn't true), it'll use document.querySelectorAll() and convert that to an array. It'll also accept iterables like jQuery objects.
+toArray = function toArray(value, leaveStrings) {
+  return _isString(value) && !leaveStrings && (_coreInitted || !_wake()) ? _slice.call(_doc.querySelectorAll(value), 0) : _isArray(value) ? _flatten(value, leaveStrings) : _isArrayLike(value) ? _slice.call(value, 0) : value ? [value] : [];
+},
+    shuffle = function shuffle(a) {
+  return a.sort(function () {
+    return .5 - Math.random();
+  });
+},
+    // alternative that's a bit faster and more reliably diverse but bigger:   for (let j, v, i = a.length; i; j = Math.floor(Math.random() * i), v = a[--i], a[i] = a[j], a[j] = v); return a;
+//for distributing values across an array. Can accept a number, a function or (most commonly) a function which can contain the following properties: {base, amount, from, ease, grid, axis, length, each}. Returns a function that expects the following parameters: index, target, array. Recognizes the following
+distribute = function distribute(v) {
+  if (_isFunction(v)) {
+    return v;
+  }
+
+  var vars = _isObject(v) ? v : {
+    each: v
+  },
+      //n:1 is just to indicate v was a number; we leverage that later to set v according to the length we get. If a number is passed in, we treat it like the old stagger value where 0.1, for example, would mean that things would be distributed with 0.1 between each element in the array rather than a total "amount" that's chunked out among them all.
+  ease = _parseEase(vars.ease),
+      from = vars.from || 0,
+      base = parseFloat(vars.base) || 0,
+      cache = {},
+      isDecimal = from > 0 && from < 1,
+      ratios = isNaN(from) || isDecimal,
+      axis = vars.axis,
+      ratioX = from,
+      ratioY = from;
+
+  if (_isString(from)) {
+    ratioX = ratioY = {
+      center: .5,
+      edges: .5,
+      end: 1
+    }[from] || 0;
+  } else if (!isDecimal && ratios) {
+    ratioX = from[0];
+    ratioY = from[1];
+  }
+
+  return function (i, target, a) {
+    var l = (a || vars).length,
+        distances = cache[l],
+        originX,
+        originY,
+        x,
+        y,
+        d,
+        j,
+        max,
+        min,
+        wrapAt;
+
+    if (!distances) {
+      wrapAt = vars.grid === "auto" ? 0 : (vars.grid || [1, _bigNum])[1];
+
+      if (!wrapAt) {
+        max = -_bigNum;
+
+        while (max < (max = a[wrapAt++].getBoundingClientRect().left) && wrapAt < l) {}
+
+        wrapAt--;
+      }
+
+      distances = cache[l] = [];
+      originX = ratios ? Math.min(wrapAt, l) * ratioX - .5 : from % wrapAt;
+      originY = ratios ? l * ratioY / wrapAt - .5 : from / wrapAt | 0;
+      max = 0;
+      min = _bigNum;
+
+      for (j = 0; j < l; j++) {
+        x = j % wrapAt - originX;
+        y = originY - (j / wrapAt | 0);
+        distances[j] = d = !axis ? _sqrt(x * x + y * y) : Math.abs(axis === "y" ? y : x);
+        d > max && (max = d);
+        d < min && (min = d);
+      }
+
+      from === "random" && shuffle(distances);
+      distances.max = max - min;
+      distances.min = min;
+      distances.v = l = (parseFloat(vars.amount) || parseFloat(vars.each) * (wrapAt > l ? l - 1 : !axis ? Math.max(wrapAt, l / wrapAt) : axis === "y" ? l / wrapAt : wrapAt) || 0) * (from === "edges" ? -1 : 1);
+      distances.b = l < 0 ? base - l : base;
+      distances.u = getUnit(vars.amount || vars.each) || 0; //unit
+
+      ease = ease && l < 0 ? _invertEase(ease) : ease;
+    }
+
+    l = (distances[i] - distances.min) / distances.max || 0;
+    return _round(distances.b + (ease ? ease(l) : l) * distances.v) + distances.u; //round in order to work around floating point errors
+  };
+},
+    _roundModifier = function _roundModifier(v) {
+  //pass in 0.1 get a function that'll round to the nearest tenth, or 5 to round to the closest 5, or 0.001 to the closest 1000th, etc.
+  var p = v < 1 ? Math.pow(10, (v + "").length - 2) : 1; //to avoid floating point math errors (like 24 * 0.1 == 2.4000000000000004), we chop off at a specific number of decimal places (much faster than toFixed()
+
+  return function (raw) {
+    return Math.floor(Math.round(parseFloat(raw) / v) * v * p) / p + (_isNumber(raw) ? 0 : getUnit(raw));
+  };
+},
+    snap = function snap(snapTo, value) {
+  var isArray = _isArray(snapTo),
+      radius,
+      is2D;
+
+  if (!isArray && _isObject(snapTo)) {
+    radius = isArray = snapTo.radius || _bigNum;
+
+    if (snapTo.values) {
+      snapTo = toArray(snapTo.values);
+
+      if (is2D = !_isNumber(snapTo[0])) {
+        radius *= radius; //performance optimization so we don't have to Math.sqrt() in the loop.
+      }
+    } else {
+      snapTo = _roundModifier(snapTo.increment);
+    }
+  }
+
+  return _conditionalReturn(value, !isArray ? _roundModifier(snapTo) : _isFunction(snapTo) ? function (raw) {
+    is2D = snapTo(raw);
+    return Math.abs(is2D - raw) <= radius ? is2D : raw;
+  } : function (raw) {
+    var x = parseFloat(is2D ? raw.x : raw),
+        y = parseFloat(is2D ? raw.y : 0),
+        min = _bigNum,
+        closest = 0,
+        i = snapTo.length,
+        dx,
+        dy;
+
+    while (i--) {
+      if (is2D) {
+        dx = snapTo[i].x - x;
+        dy = snapTo[i].y - y;
+        dx = dx * dx + dy * dy;
+      } else {
+        dx = Math.abs(snapTo[i] - x);
+      }
+
+      if (dx < min) {
+        min = dx;
+        closest = i;
+      }
+    }
+
+    closest = !radius || min <= radius ? snapTo[closest] : raw;
+    return is2D || closest === raw || _isNumber(raw) ? closest : closest + getUnit(raw);
+  });
+},
+    random = function random(min, max, roundingIncrement, returnFunction) {
+  return _conditionalReturn(_isArray(min) ? !max : roundingIncrement === true ? !!(roundingIncrement = 0) : !returnFunction, function () {
+    return _isArray(min) ? min[~~(Math.random() * min.length)] : (roundingIncrement = roundingIncrement || 1e-5) && (returnFunction = roundingIncrement < 1 ? Math.pow(10, (roundingIncrement + "").length - 2) : 1) && Math.floor(Math.round((min + Math.random() * (max - min)) / roundingIncrement) * roundingIncrement * returnFunction) / returnFunction;
+  });
+},
+    pipe = function pipe() {
+  for (var _len = arguments.length, functions = new Array(_len), _key = 0; _key < _len; _key++) {
+    functions[_key] = arguments[_key];
+  }
+
+  return function (value) {
+    return functions.reduce(function (v, f) {
+      return f(v);
+    }, value);
+  };
+},
+    unitize = function unitize(func, unit) {
+  return function (value) {
+    return func(parseFloat(value)) + (unit || getUnit(value));
+  };
+},
+    normalize = function normalize(min, max, value) {
+  return mapRange(min, max, 0, 1, value);
+},
+    _wrapArray = function _wrapArray(a, wrapper, value) {
+  return _conditionalReturn(value, function (index) {
+    return a[~~wrapper(index)];
+  });
+},
+    wrap = function wrap(min, max, value) {
+  // NOTE: wrap() CANNOT be an arrow function! A very odd compiling bug causes problems (unrelated to GSAP).
+  var range = max - min;
+  return _isArray(min) ? _wrapArray(min, wrap(0, min.length), max) : _conditionalReturn(value, function (value) {
+    return (range + (value - min) % range) % range + min;
+  });
+},
+    wrapYoyo = function wrapYoyo(min, max, value) {
+  var range = max - min,
+      total = range * 2;
+  return _isArray(min) ? _wrapArray(min, wrapYoyo(0, min.length - 1), max) : _conditionalReturn(value, function (value) {
+    value = (total + (value - min) % total) % total || 0;
+    return min + (value > range ? total - value : value);
+  });
+},
+    _replaceRandom = function _replaceRandom(value) {
+  //replaces all occurrences of random(...) in a string with the calculated random value. can be a range like random(-100, 100, 5) or an array like random([0, 100, 500])
+  var prev = 0,
+      s = "",
+      i,
+      nums,
+      end,
+      isArray;
+
+  while (~(i = value.indexOf("random(", prev))) {
+    end = value.indexOf(")", i);
+    isArray = value.charAt(i + 7) === "[";
+    nums = value.substr(i + 7, end - i - 7).match(isArray ? _delimitedValueExp : _strictNumExp);
+    s += value.substr(prev, i - prev) + random(isArray ? nums : +nums[0], +nums[1], +nums[2] || 1e-5);
+    prev = end + 1;
+  }
+
+  return s + value.substr(prev, value.length - prev);
+},
+    mapRange = function mapRange(inMin, inMax, outMin, outMax, value) {
+  var inRange = inMax - inMin,
+      outRange = outMax - outMin;
+  return _conditionalReturn(value, function (value) {
+    return outMin + ((value - inMin) / inRange * outRange || 0);
+  });
+},
+    interpolate = function interpolate(start, end, progress, mutate) {
+  var func = isNaN(start + end) ? 0 : function (p) {
+    return (1 - p) * start + p * end;
+  };
+
+  if (!func) {
+    var isString = _isString(start),
+        master = {},
+        p,
+        i,
+        interpolators,
+        l,
+        il;
+
+    progress === true && (mutate = 1) && (progress = null);
+
+    if (isString) {
+      start = {
+        p: start
+      };
+      end = {
+        p: end
+      };
+    } else if (_isArray(start) && !_isArray(end)) {
+      interpolators = [];
+      l = start.length;
+      il = l - 2;
+
+      for (i = 1; i < l; i++) {
+        interpolators.push(interpolate(start[i - 1], start[i])); //build the interpolators up front as a performance optimization so that when the function is called many times, it can just reuse them.
+      }
+
+      l--;
+
+      func = function func(p) {
+        p *= l;
+        var i = Math.min(il, ~~p);
+        return interpolators[i](p - i);
+      };
+
+      progress = end;
+    } else if (!mutate) {
+      start = _merge(_isArray(start) ? [] : {}, start);
+    }
+
+    if (!interpolators) {
+      for (p in end) {
+        _addPropTween.call(master, start, p, "get", end[p]);
+      }
+
+      func = function func(p) {
+        return _renderPropTweens(p, master) || (isString ? start.p : start);
+      };
+    }
+  }
+
+  return _conditionalReturn(progress, func);
+},
+    _getLabelInDirection = function _getLabelInDirection(timeline, fromTime, backward) {
+  //used for nextLabel() and previousLabel()
+  var labels = timeline.labels,
+      min = _bigNum,
+      p,
+      distance,
+      label;
+
+  for (p in labels) {
+    distance = labels[p] - fromTime;
+
+    if (distance < 0 === !!backward && distance && min > (distance = Math.abs(distance))) {
+      label = p;
+      min = distance;
+    }
+  }
+
+  return label;
+},
+    _callback = function _callback(animation, type, executeLazyFirst) {
+  var v = animation.vars,
+      callback = v[type],
+      params,
+      scope;
+
+  if (!callback) {
+    return;
+  }
+
+  params = v[type + "Params"];
+  scope = v.callbackScope || animation;
+  executeLazyFirst && _lazyTweens.length && _lazyRender(); //in case rendering caused any tweens to lazy-init, we should render them because typically when a timeline finishes, users expect things to have rendered fully. Imagine an onUpdate on a timeline that reports/checks tweened values.
+
+  return params ? callback.apply(scope, params) : callback.call(scope);
+},
+    _interrupt = function _interrupt(animation) {
+  _removeFromParent(animation);
+
+  if (animation.progress() < 1) {
+    _callback(animation, "onInterrupt");
+  }
+
+  return animation;
+},
+    _quickTween,
+    _createPlugin = function _createPlugin(config) {
+  config = !config.name && config["default"] || config; //UMD packaging wraps things oddly, so for example MotionPathHelper becomes {MotionPathHelper:MotionPathHelper, default:MotionPathHelper}.
+
+  var name = config.name,
+      isFunc = _isFunction(config),
+      Plugin = name && !isFunc && config.init ? function () {
+    this._props = [];
+  } : config,
+      //in case someone passes in an object that's not a plugin, like CustomEase
+  instanceDefaults = {
+    init: _emptyFunc,
+    render: _renderPropTweens,
+    add: _addPropTween,
+    kill: _killPropTweensOf,
+    modifier: _addPluginModifier,
+    rawVars: 0
+  },
+      statics = {
+    targetTest: 0,
+    get: 0,
+    getSetter: _getSetter,
+    aliases: {},
+    register: 0
+  };
+
+  _wake();
+
+  if (config !== Plugin) {
+    if (_plugins[name]) {
+      return;
+    }
+
+    _setDefaults(Plugin, _setDefaults(_copyExcluding(config, instanceDefaults), statics)); //static methods
+
+
+    _merge(Plugin.prototype, _merge(instanceDefaults, _copyExcluding(config, statics))); //instance methods
+
+
+    _plugins[Plugin.prop = name] = Plugin;
+
+    if (config.targetTest) {
+      _harnessPlugins.push(Plugin);
+
+      _reservedProps[name] = 1;
+    }
+
+    name = (name === "css" ? "CSS" : name.charAt(0).toUpperCase() + name.substr(1)) + "Plugin"; //for the global name. "motionPath" should become MotionPathPlugin
+  }
+
+  _addGlobal(name, Plugin);
+
+  if (config.register) {
+    config.register(gsap, Plugin, PropTween);
+  }
+},
+
+/*
+ * --------------------------------------------------------------------------------------
+ * COLORS
+ * --------------------------------------------------------------------------------------
+ */
+_255 = 255,
+    _colorLookup = {
+  aqua: [0, _255, _255],
+  lime: [0, _255, 0],
+  silver: [192, 192, 192],
+  black: [0, 0, 0],
+  maroon: [128, 0, 0],
+  teal: [0, 128, 128],
+  blue: [0, 0, _255],
+  navy: [0, 0, 128],
+  white: [_255, _255, _255],
+  olive: [128, 128, 0],
+  yellow: [_255, _255, 0],
+  orange: [_255, 165, 0],
+  gray: [128, 128, 128],
+  purple: [128, 0, 128],
+  green: [0, 128, 0],
+  red: [_255, 0, 0],
+  pink: [_255, 192, 203],
+  cyan: [0, _255, _255],
+  transparent: [_255, _255, _255, 0]
+},
+    _hue = function _hue(h, m1, m2) {
+  h = h < 0 ? h + 1 : h > 1 ? h - 1 : h;
+  return (h * 6 < 1 ? m1 + (m2 - m1) * h * 6 : h < .5 ? m2 : h * 3 < 2 ? m1 + (m2 - m1) * (2 / 3 - h) * 6 : m1) * _255 + .5 | 0;
+},
+    splitColor = function splitColor(v, toHSL, forceAlpha) {
+  var a = !v ? _colorLookup.black : _isNumber(v) ? [v >> 16, v >> 8 & _255, v & _255] : 0,
+      r,
+      g,
+      b,
+      h,
+      s,
+      l,
+      max,
+      min,
+      d,
+      wasHSL;
+
+  if (!a) {
+    if (v.substr(-1) === ",") {
+      //sometimes a trailing comma is included and we should chop it off (typically from a comma-delimited list of values like a textShadow:"2px 2px 2px blue, 5px 5px 5px rgb(255,0,0)" - in this example "blue," has a trailing comma. We could strip it out inside parseComplex() but we'd need to do it to the beginning and ending values plus it wouldn't provide protection from other potential scenarios like if the user passes in a similar value.
+      v = v.substr(0, v.length - 1);
+    }
+
+    if (_colorLookup[v]) {
+      a = _colorLookup[v];
+    } else if (v.charAt(0) === "#") {
+      if (v.length === 4) {
+        //for shorthand like #9F0
+        r = v.charAt(1);
+        g = v.charAt(2);
+        b = v.charAt(3);
+        v = "#" + r + r + g + g + b + b;
+      }
+
+      v = parseInt(v.substr(1), 16);
+      a = [v >> 16, v >> 8 & _255, v & _255];
+    } else if (v.substr(0, 3) === "hsl") {
+      a = wasHSL = v.match(_strictNumExp);
+
+      if (!toHSL) {
+        h = +a[0] % 360 / 360;
+        s = +a[1] / 100;
+        l = +a[2] / 100;
+        g = l <= .5 ? l * (s + 1) : l + s - l * s;
+        r = l * 2 - g;
+
+        if (a.length > 3) {
+          a[3] *= 1; //cast as number
+        }
+
+        a[0] = _hue(h + 1 / 3, r, g);
+        a[1] = _hue(h, r, g);
+        a[2] = _hue(h - 1 / 3, r, g);
+      } else if (~v.indexOf("=")) {
+        //if relative values are found, just return the raw strings with the relative prefixes in place.
+        a = v.match(_numExp);
+        forceAlpha && a.length < 4 && (a[3] = 1);
+        return a;
+      }
+    } else {
+      a = v.match(_strictNumExp) || _colorLookup.transparent;
+    }
+
+    a = a.map(Number);
+  }
+
+  if (toHSL && !wasHSL) {
+    r = a[0] / _255;
+    g = a[1] / _255;
+    b = a[2] / _255;
+    max = Math.max(r, g, b);
+    min = Math.min(r, g, b);
+    l = (max + min) / 2;
+
+    if (max === min) {
+      h = s = 0;
+    } else {
+      d = max - min;
+      s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+      h = max === r ? (g - b) / d + (g < b ? 6 : 0) : max === g ? (b - r) / d + 2 : (r - g) / d + 4;
+      h *= 60;
+    }
+
+    a[0] = ~~(h + .5);
+    a[1] = ~~(s * 100 + .5);
+    a[2] = ~~(l * 100 + .5);
+  }
+
+  forceAlpha && a.length < 4 && (a[3] = 1);
+  return a;
+},
+    _colorOrderData = function _colorOrderData(v) {
+  // strips out the colors from the string, finds all the numeric slots (with units) and returns an array of those. The Array also has a "c" property which is an Array of the index values where the colors belong. This is to help work around issues where there's a mis-matched order of color/numeric data like drop-shadow(#f00 0px 1px 2px) and drop-shadow(0x 1px 2px #f00). This is basically a helper function used in _formatColors()
+  var values = [],
+      c = [],
+      i = -1;
+  v.split(_colorExp).forEach(function (v) {
+    var a = v.match(_numWithUnitExp) || [];
+    values.push.apply(values, a);
+    c.push(i += a.length + 1);
+  });
+  values.c = c;
+  return values;
+},
+    _formatColors = function _formatColors(s, toHSL, orderMatchData) {
+  var result = "",
+      colors = (s + result).match(_colorExp),
+      type = toHSL ? "hsla(" : "rgba(",
+      i = 0,
+      c,
+      shell,
+      d,
+      l;
+
+  if (!colors) {
+    return s;
+  }
+
+  colors = colors.map(function (color) {
+    return (color = splitColor(color, toHSL, 1)) && type + (toHSL ? color[0] + "," + color[1] + "%," + color[2] + "%," + color[3] : color.join(",")) + ")";
+  });
+
+  if (orderMatchData) {
+    d = _colorOrderData(s);
+    c = orderMatchData.c;
+
+    if (c.join(result) !== d.c.join(result)) {
+      shell = s.replace(_colorExp, "1").split(_numWithUnitExp);
+      l = shell.length - 1;
+
+      for (; i < l; i++) {
+        result += shell[i] + (~c.indexOf(i) ? colors.shift() || type + "0,0,0,0)" : (d.length ? d : colors.length ? colors : orderMatchData).shift());
+      }
+    }
+  }
+
+  if (!shell) {
+    shell = s.split(_colorExp);
+    l = shell.length - 1;
+
+    for (; i < l; i++) {
+      result += shell[i] + colors[i];
+    }
+  }
+
+  return result + shell[l];
+},
+    _colorExp = function () {
+  var s = "(?:\\b(?:(?:rgb|rgba|hsl|hsla)\\(.+?\\))|\\B#(?:[0-9a-f]{3}){1,2}\\b",
+      //we'll dynamically build this Regular Expression to conserve file size. After building it, it will be able to find rgb(), rgba(), # (hexadecimal), and named color values like red, blue, purple, etc.,
+  p;
+
+  for (p in _colorLookup) {
+    s += "|" + p + "\\b";
+  }
+
+  return new RegExp(s + ")", "gi");
+}(),
+    _hslExp = /hsl[a]?\(/,
+    _colorStringFilter = function _colorStringFilter(a) {
+  var combined = a.join(" "),
+      toHSL;
+  _colorExp.lastIndex = 0;
+
+  if (_colorExp.test(combined)) {
+    toHSL = _hslExp.test(combined);
+    a[1] = _formatColors(a[1], toHSL);
+    a[0] = _formatColors(a[0], toHSL, _colorOrderData(a[1])); // make sure the order of numbers/colors match with the END value.
+
+    return true;
+  }
+},
+
+/*
+ * --------------------------------------------------------------------------------------
+ * TICKER
+ * --------------------------------------------------------------------------------------
+ */
+_tickerActive,
+    _ticker = function () {
+  var _getTime = Date.now,
+      _lagThreshold = 500,
+      _adjustedLag = 33,
+      _startTime = _getTime(),
+      _lastUpdate = _startTime,
+      _gap = 1 / 240,
+      _nextTime = _gap,
+      _listeners = [],
+      _id,
+      _req,
+      _raf,
+      _self,
+      _tick = function _tick(v) {
+    var elapsed = _getTime() - _lastUpdate,
+        manual = v === true,
+        overlap,
+        dispatch;
+
+    if (elapsed > _lagThreshold) {
+      _startTime += elapsed - _adjustedLag;
+    }
+
+    _lastUpdate += elapsed;
+    _self.time = (_lastUpdate - _startTime) / 1000;
+    overlap = _self.time - _nextTime;
+
+    if (overlap > 0 || manual) {
+      _self.frame++;
+      _nextTime += overlap + (overlap >= _gap ? 0.004 : _gap - overlap);
+      dispatch = 1;
+    }
+
+    manual || (_id = _req(_tick)); //make sure the request is made before we dispatch the "tick" event so that timing is maintained. Otherwise, if processing the "tick" requires a bunch of time (like 15ms) and we're using a setTimeout() that's based on 16.7ms, it'd technically take 31.7ms between frames otherwise.
+
+    dispatch && _listeners.forEach(function (l) {
+      return l(_self.time, elapsed, _self.frame, v);
+    });
+  };
+
+  _self = {
+    time: 0,
+    frame: 0,
+    tick: function tick() {
+      _tick(true);
+    },
+    wake: function wake() {
+      if (_coreReady) {
+        if (!_coreInitted && _windowExists()) {
+          _win = _coreInitted = window;
+          _doc = _win.document || {};
+          _globals.gsap = gsap;
+          (_win.gsapVersions || (_win.gsapVersions = [])).push(gsap.version);
+
+          _install(_installScope || _win.GreenSockGlobals || !_win.gsap && _win || {});
+
+          _raf = _win.requestAnimationFrame;
+        }
+
+        _id && _self.sleep();
+
+        _req = _raf || function (f) {
+          return setTimeout(f, (_nextTime - _self.time) * 1000 + 1 | 0);
+        };
+
+        _tickerActive = 1;
+
+        _tick(2);
+      }
+    },
+    sleep: function sleep() {
+      (_raf ? _win.cancelAnimationFrame : clearTimeout)(_id);
+      _tickerActive = 0;
+      _req = _emptyFunc;
+    },
+    lagSmoothing: function lagSmoothing(threshold, adjustedLag) {
+      _lagThreshold = threshold || 1 / _tinyNum; //zero should be interpreted as basically unlimited
+
+      _adjustedLag = Math.min(adjustedLag, _lagThreshold, 0);
+    },
+    fps: function fps(_fps) {
+      _gap = 1 / (_fps || 240);
+      _nextTime = _self.time + _gap;
+    },
+    add: function add(callback) {
+      _listeners.indexOf(callback) < 0 && _listeners.push(callback);
+
+      _wake();
+    },
+    remove: function remove(callback) {
+      var i;
+      ~(i = _listeners.indexOf(callback)) && _listeners.splice(i, 1);
+    },
+    _listeners: _listeners
+  };
+  return _self;
+}(),
+    _wake = function _wake() {
+  return !_tickerActive && _ticker.wake();
+},
+    //also ensures the core classes are initialized.
+
+/*
+* -------------------------------------------------
+* EASING
+* -------------------------------------------------
+*/
+_easeMap = {},
+    _customEaseExp = /^[\d.\-M][\d.\-,\s]/,
+    _quotesExp = /["']/g,
+    _parseObjectInString = function _parseObjectInString(value) {
+  //takes a string like "{wiggles:10, type:anticipate})" and turns it into a real object. Notice it ends in ")" and includes the {} wrappers. This is because we only use this function for parsing ease configs and prioritized optimization rather than reusability.
+  var obj = {},
+      split = value.substr(1, value.length - 3).split(":"),
+      key = split[0],
+      i = 1,
+      l = split.length,
+      index,
+      val,
+      parsedVal;
+
+  for (; i < l; i++) {
+    val = split[i];
+    index = i !== l - 1 ? val.lastIndexOf(",") : val.length;
+    parsedVal = val.substr(0, index);
+    obj[key] = isNaN(parsedVal) ? parsedVal.replace(_quotesExp, "").trim() : +parsedVal;
+    key = val.substr(index + 1).trim();
+  }
+
+  return obj;
+},
+    _configEaseFromString = function _configEaseFromString(name) {
+  //name can be a string like "elastic.out(1,0.5)", and pass in _easeMap as obj and it'll parse it out and call the actual function like _easeMap.Elastic.easeOut.config(1,0.5). It will also parse custom ease strings as long as CustomEase is loaded and registered (internally as _easeMap._CE).
+  var split = (name + "").split("("),
+      ease = _easeMap[split[0]];
+  return ease && split.length > 1 && ease.config ? ease.config.apply(null, ~name.indexOf("{") ? [_parseObjectInString(split[1])] : _parenthesesExp.exec(name)[1].split(",").map(_numericIfPossible)) : _easeMap._CE && _customEaseExp.test(name) ? _easeMap._CE("", name) : ease;
+},
+    _invertEase = function _invertEase(ease) {
+  return function (p) {
+    return 1 - ease(1 - p);
+  };
+},
+    // allow yoyoEase to be set in children and have those affected when the parent/ancestor timeline yoyos.
+_propagateYoyoEase = function _propagateYoyoEase(timeline, isYoyo) {
+  var child = timeline._first,
+      ease;
+
+  while (child) {
+    if (child instanceof Timeline) {
+      _propagateYoyoEase(child, isYoyo);
+    } else if (child.vars.yoyoEase && (!child._yoyo || !child._repeat) && child._yoyo !== isYoyo) {
+      if (child.timeline) {
+        _propagateYoyoEase(child.timeline, isYoyo);
+      } else {
+        ease = child._ease;
+        child._ease = child._yEase;
+        child._yEase = ease;
+        child._yoyo = isYoyo;
+      }
+    }
+
+    child = child._next;
+  }
+},
+    _parseEase = function _parseEase(ease, defaultEase) {
+  return !ease ? defaultEase : (_isFunction(ease) ? ease : _easeMap[ease] || _configEaseFromString(ease)) || defaultEase;
+},
+    _insertEase = function _insertEase(names, easeIn, easeOut, easeInOut) {
+  if (easeOut === void 0) {
+    easeOut = function easeOut(p) {
+      return 1 - easeIn(1 - p);
+    };
+  }
+
+  if (easeInOut === void 0) {
+    easeInOut = function easeInOut(p) {
+      return p < .5 ? easeIn(p * 2) / 2 : 1 - easeIn((1 - p) * 2) / 2;
+    };
+  }
+
+  var ease = {
+    easeIn: easeIn,
+    easeOut: easeOut,
+    easeInOut: easeInOut
+  },
+      lowercaseName;
+
+  _forEachName(names, function (name) {
+    _easeMap[name] = _globals[name] = ease;
+    _easeMap[lowercaseName = name.toLowerCase()] = easeOut;
+
+    for (var p in ease) {
+      _easeMap[lowercaseName + (p === "easeIn" ? ".in" : p === "easeOut" ? ".out" : ".inOut")] = _easeMap[name + "." + p] = ease[p];
+    }
+  });
+
+  return ease;
+},
+    _easeInOutFromOut = function _easeInOutFromOut(easeOut) {
+  return function (p) {
+    return p < .5 ? (1 - easeOut(1 - p * 2)) / 2 : .5 + easeOut((p - .5) * 2) / 2;
+  };
+},
+    _configElastic = function _configElastic(type, amplitude, period) {
+  var p1 = amplitude >= 1 ? amplitude : 1,
+      //note: if amplitude is < 1, we simply adjust the period for a more natural feel. Otherwise the math doesn't work right and the curve starts at 1.
+  p2 = (period || (type ? .3 : .45)) / (amplitude < 1 ? amplitude : 1),
+      p3 = p2 / _2PI * (Math.asin(1 / p1) || 0),
+      easeOut = function easeOut(p) {
+    return p === 1 ? 1 : p1 * Math.pow(2, -10 * p) * _sin((p - p3) * p2) + 1;
+  },
+      ease = type === "out" ? easeOut : type === "in" ? function (p) {
+    return 1 - easeOut(1 - p);
+  } : _easeInOutFromOut(easeOut);
+
+  p2 = _2PI / p2; //precalculate to optimize
+
+  ease.config = function (amplitude, period) {
+    return _configElastic(type, amplitude, period);
+  };
+
+  return ease;
+},
+    _configBack = function _configBack(type, overshoot) {
+  if (overshoot === void 0) {
+    overshoot = 1.70158;
+  }
+
+  var easeOut = function easeOut(p) {
+    return p ? --p * p * ((overshoot + 1) * p + overshoot) + 1 : 0;
+  },
+      ease = type === "out" ? easeOut : type === "in" ? function (p) {
+    return 1 - easeOut(1 - p);
+  } : _easeInOutFromOut(easeOut);
+
+  ease.config = function (overshoot) {
+    return _configBack(type, overshoot);
+  };
+
+  return ease;
+}; // a cheaper (kb and cpu) but more mild way to get a parameterized weighted ease by feeding in a value between -1 (easeIn) and 1 (easeOut) where 0 is linear.
+// _weightedEase = ratio => {
+// 	let y = 0.5 + ratio / 2;
+// 	return p => (2 * (1 - p) * p * y + p * p);
+// },
+// a stronger (but more expensive kb/cpu) parameterized weighted ease that lets you feed in a value between -1 (easeIn) and 1 (easeOut) where 0 is linear.
+// _weightedEaseStrong = ratio => {
+// 	ratio = .5 + ratio / 2;
+// 	let o = 1 / 3 * (ratio < .5 ? ratio : 1 - ratio),
+// 		b = ratio - o,
+// 		c = ratio + o;
+// 	return p => p === 1 ? p : 3 * b * (1 - p) * (1 - p) * p + 3 * c * (1 - p) * p * p + p * p * p;
+// };
+
+
+exports._ticker = _ticker;
+exports._colorStringFilter = _colorStringFilter;
+exports.splitColor = splitColor;
+exports.interpolate = interpolate;
+exports.mapRange = mapRange;
+exports._replaceRandom = _replaceRandom;
+exports.wrapYoyo = wrapYoyo;
+exports.wrap = wrap;
+exports.normalize = normalize;
+exports.unitize = unitize;
+exports.pipe = pipe;
+exports.random = random;
+exports.snap = snap;
+exports._roundModifier = _roundModifier;
+exports.distribute = distribute;
+exports.shuffle = shuffle;
+exports.toArray = toArray;
+exports.clamp = clamp;
+exports.getUnit = getUnit;
+exports._removeLinkedListItem = _removeLinkedListItem;
+exports._setDefaults = _setDefaults;
+exports._round = _round;
+exports._forEachName = _forEachName;
+exports._getProperty = _getProperty;
+exports._getCache = _getCache;
+exports._plugins = _plugins;
+exports._missingPlugin = _missingPlugin;
+exports._relExp = _relExp;
+exports._numWithUnitExp = _numWithUnitExp;
+exports._numExp = _numExp;
+exports._isUndefined = _isUndefined;
+exports._isString = _isString;
+exports._config = _config;
+
+_forEachName("Linear,Quad,Cubic,Quart,Quint,Strong", function (name, i) {
+  var power = i < 5 ? i + 1 : i;
+
+  _insertEase(name + ",Power" + (power - 1), i ? function (p) {
+    return Math.pow(p, power);
+  } : function (p) {
+    return p;
+  }, function (p) {
+    return 1 - Math.pow(1 - p, power);
+  }, function (p) {
+    return p < .5 ? Math.pow(p * 2, power) / 2 : 1 - Math.pow((1 - p) * 2, power) / 2;
+  });
+});
+
+_easeMap.Linear.easeNone = _easeMap.none = _easeMap.Linear.easeIn;
+
+_insertEase("Elastic", _configElastic("in"), _configElastic("out"), _configElastic());
+
+(function (n, c) {
+  var n1 = 1 / c,
+      n2 = 2 * n1,
+      n3 = 2.5 * n1,
+      easeOut = function easeOut(p) {
+    return p < n1 ? n * p * p : p < n2 ? n * Math.pow(p - 1.5 / c, 2) + .75 : p < n3 ? n * (p -= 2.25 / c) * p + .9375 : n * Math.pow(p - 2.625 / c, 2) + .984375;
+  };
+
+  _insertEase("Bounce", function (p) {
+    return 1 - easeOut(1 - p);
+  }, easeOut);
+})(7.5625, 2.75);
+
+_insertEase("Expo", function (p) {
+  return p ? Math.pow(2, 10 * (p - 1)) : 0;
+});
+
+_insertEase("Circ", function (p) {
+  return -(_sqrt(1 - p * p) - 1);
+});
+
+_insertEase("Sine", function (p) {
+  return p === 1 ? 1 : -_cos(p * _HALF_PI) + 1;
+});
+
+_insertEase("Back", _configBack("in"), _configBack("out"), _configBack());
+
+_easeMap.SteppedEase = _easeMap.steps = _globals.SteppedEase = {
+  config: function config(steps, immediateStart) {
+    if (steps === void 0) {
+      steps = 1;
+    }
+
+    var p1 = 1 / steps,
+        p2 = steps + (immediateStart ? 0 : 1),
+        p3 = immediateStart ? 1 : 0,
+        max = 1 - _tinyNum;
+    return function (p) {
+      return ((p2 * _clamp(0, max, p) | 0) + p3) * p1;
+    };
+  }
+};
+_defaults.ease = _easeMap["quad.out"];
+
+_forEachName("onComplete,onUpdate,onStart,onRepeat,onReverseComplete,onInterrupt", function (name) {
+  return _callbackNames += name + "," + name + "Params,";
+});
+/*
+ * --------------------------------------------------------------------------------------
+ * CACHE
+ * --------------------------------------------------------------------------------------
+ */
+
+
+var GSCache = function GSCache(target, harness) {
+  this.id = _gsID++;
+  target._gsap = this;
+  this.target = target;
+  this.harness = harness;
+  this.get = harness ? harness.get : _getProperty;
+  this.set = harness ? harness.getSetter : _getSetter;
+};
+/*
+ * --------------------------------------------------------------------------------------
+ * ANIMATION
+ * --------------------------------------------------------------------------------------
+ */
+
+
+exports.GSCache = GSCache;
+
+var Animation = /*#__PURE__*/function () {
+  function Animation(vars, time) {
+    var parent = vars.parent || _globalTimeline;
+    this.vars = vars;
+    this._delay = +vars.delay || 0;
+
+    if (this._repeat = vars.repeat || 0) {
+      this._rDelay = vars.repeatDelay || 0;
+      this._yoyo = !!vars.yoyo || !!vars.yoyoEase;
+    }
+
+    this._ts = 1;
+
+    _setDuration(this, +vars.duration, 1);
+
+    this.data = vars.data;
+    _tickerActive || _ticker.wake();
+    parent && _addToTimeline(parent, this, time || time === 0 ? time : parent._time, 1);
+    vars.reversed && this.reverse();
+    vars.paused && this.paused(true);
+  }
+
+  var _proto = Animation.prototype;
+
+  _proto.delay = function delay(value) {
+    if (value || value === 0) {
+      this.parent && this.parent.smoothChildTiming && this.startTime(this._start + value - this._delay);
+      this._delay = value;
+      return this;
+    }
+
+    return this._delay;
+  };
+
+  _proto.duration = function duration(value) {
+    return arguments.length ? this.totalDuration(this._repeat > 0 ? value + (value + this._rDelay) * this._repeat : value) : this.totalDuration() && this._dur;
+  };
+
+  _proto.totalDuration = function totalDuration(value) {
+    if (!arguments.length) {
+      return this._tDur;
+    }
+
+    this._dirty = 0;
+    var t = this._time / this._dur || 0;
+
+    _setDuration(this, this._repeat < 0 ? value : (value - this._repeat * this._rDelay) / (this._repeat + 1));
+
+    return this._tTime ? _alignPlayhead(this, t * value + _elapsedCycleDuration(this)) : this; // in case the animation hasn't even started yet and it has a delay. Aligning the playhead in that case would make it appear to lose the delay.
+  };
+
+  _proto.totalTime = function totalTime(_totalTime, suppressEvents) {
+    _wake();
+
+    if (!arguments.length) {
+      return this._tTime;
+    }
+
+    var parent = this._dp;
+
+    if (parent && parent.smoothChildTiming && this._ts) {
+      _alignPlayhead(this, _totalTime); //in case any of the ancestor timelines had completed but should now be enabled, we should reset their totalTime() which will also ensure that they're lined up properly and enabled. Skip for animations that are on the root (wasteful). Example: a TimelineLite.exportRoot() is performed when there's a paused tween on the root, the export will not complete until that tween is unpaused, but imagine a child gets restarted later, after all [unpaused] tweens have completed. The start of that child would get pushed out, but one of the ancestors may have completed.
+
+
+      while (parent.parent) {
+        if (parent.parent._time !== parent._start + (parent._ts >= 0 ? parent._tTime / parent._ts : (parent.totalDuration() - parent._tTime) / -parent._ts)) {
+          parent.totalTime(parent._tTime, true);
+        }
+
+        parent = parent.parent;
+      }
+
+      if (!this.parent && this._dp.autoRemoveChildren && (this._ts > 0 && _totalTime < this._tDur || this._ts < 0 && _totalTime > 0 || !this._tDur && !_totalTime)) {
+        //if the animation doesn't have a parent, put it back into its last parent (recorded as _dp for exactly cases like this). Limit to parents with autoRemoveChildren (like globalTimeline) so that if the user manually removes an animation from a timeline and then alters its playhead, it doesn't get added back in.
+        _addToTimeline(this._dp, this, this._start - this._delay);
+      }
+    }
+
+    if (this._tTime !== _totalTime || !this._dur && !suppressEvents || this._initted && Math.abs(this._zTime) === _tinyNum || !_totalTime && !this._initted) {
+      this._ts || (this._pTime = _totalTime); // otherwise, if an animation is paused, then the playhead is moved back to zero, then resumed, it'd revert back to the original time at the pause
+
+      _lazySafeRender(this, _totalTime, suppressEvents);
+    }
+
+    return this;
+  };
+
+  _proto.time = function time(value, suppressEvents) {
+    return arguments.length ? this.totalTime(Math.min(this.totalDuration(), value + _elapsedCycleDuration(this)) % this._dur || (value ? this._dur : 0), suppressEvents) : this._time; // note: if the modulus results in 0, the playhead could be exactly at the end or the beginning, and we always defer to the END with a non-zero value, otherwise if you set the time() to the very end (duration()), it would render at the START!
+  };
+
+  _proto.totalProgress = function totalProgress(value, suppressEvents) {
+    return arguments.length ? this.totalTime(this.totalDuration() * value, suppressEvents) : this.totalDuration() ? Math.min(1, this._tTime / this._tDur) : this.ratio;
+  };
+
+  _proto.progress = function progress(value, suppressEvents) {
+    return arguments.length ? this.totalTime(this.duration() * (this._yoyo && !(this.iteration() & 1) ? 1 - value : value) + _elapsedCycleDuration(this), suppressEvents) : this.duration() ? Math.min(1, this._time / this._dur) : this.ratio;
+  };
+
+  _proto.iteration = function iteration(value, suppressEvents) {
+    var cycleDuration = this.duration() + this._rDelay;
+
+    return arguments.length ? this.totalTime(this._time + (value - 1) * cycleDuration, suppressEvents) : this._repeat ? _animationCycle(this._tTime, cycleDuration) + 1 : 1;
+  } // potential future addition:
+  // isPlayingBackwards() {
+  // 	let animation = this,
+  // 		orientation = 1; // 1 = forward, -1 = backward
+  // 	while (animation) {
+  // 		orientation *= animation.reversed() || (animation.repeat() && !(animation.iteration() & 1)) ? -1 : 1;
+  // 		animation = animation.parent;
+  // 	}
+  // 	return orientation < 0;
+  // }
+  ;
+
+  _proto.timeScale = function timeScale(value) {
+    if (!arguments.length) {
+      return this._rts === -_tinyNum ? 0 : this._rts; // recorded timeScale. Special case: if someone calls reverse() on an animation with timeScale of 0, we assign it -_tinyNum to remember it's reversed.
+    }
+
+    if (this._rts === value) {
+      return this;
+    }
+
+    var tTime = this.parent && this._ts ? _parentToChildTotalTime(this.parent._time, this) : this._tTime; // make sure to do the parentToChildTotalTime() BEFORE setting the new _ts because the old one must be used in that calculation.
+    // prioritize rendering where the parent's playhead lines up instead of this._tTime because there could be a tween that's animating another tween's timeScale in the same rendering loop (same parent), thus if the timeScale tween renders first, it would alter _start BEFORE _tTime was set on that tick (in the rendering loop), effectively freezing it until the timeScale tween finishes.
+
+    this._rts = +value || 0;
+    this._ts = this._ps || value === -_tinyNum ? 0 : this._rts; // _ts is the functional timeScale which would be 0 if the animation is paused.
+
+    return _recacheAncestors(this.totalTime(_clamp(-this._delay, this._tDur, tTime), true));
+  };
+
+  _proto.paused = function paused(value) {
+    if (!arguments.length) {
+      return this._ps;
+    }
+
+    if (this._ps !== value) {
+      this._ps = value;
+
+      if (value) {
+        this._pTime = this._tTime || Math.max(-this._delay, this.rawTime()); // if the pause occurs during the delay phase, make sure that's factored in when resuming.
+
+        this._ts = this._act = 0; // _ts is the functional timeScale, so a paused tween would effectively have a timeScale of 0. We record the "real" timeScale as _rts (recorded time scale)
+      } else {
+        _wake();
+
+        this._ts = this._rts; //only defer to _pTime (pauseTime) if tTime is zero. Remember, someone could pause() an animation, then scrub the playhead and resume(). If the parent doesn't have smoothChildTiming, we render at the rawTime() because the startTime won't get updated.
+
+        this.totalTime(this.parent && !this.parent.smoothChildTiming ? this.rawTime() : this._tTime || this._pTime, this.progress() === 1 && (this._tTime -= _tinyNum) && Math.abs(this._zTime) !== _tinyNum); // edge case: animation.progress(1).pause().play() wouldn't render again because the playhead is already at the end, but the call to totalTime() below will add it back to its parent...and not remove it again (since removing only happens upon rendering at a new time). Offsetting the _tTime slightly is done simply to cause the final render in totalTime() that'll pop it off its timeline (if autoRemoveChildren is true, of course). Check to make sure _zTime isn't -_tinyNum to avoid an edge case where the playhead is pushed to the end but INSIDE a tween/callback, the timeline itself is paused thus halting rendering and leaving a few unrendered. When resuming, it wouldn't render those otherwise.
+      }
+    }
+
+    return this;
+  };
+
+  _proto.startTime = function startTime(value) {
+    if (arguments.length) {
+      this._start = value;
+      var parent = this.parent || this._dp;
+      parent && (parent._sort || !this.parent) && _addToTimeline(parent, this, value - this._delay);
+      return this;
+    }
+
+    return this._start;
+  };
+
+  _proto.endTime = function endTime(includeRepeats) {
+    return this._start + (_isNotFalse(includeRepeats) ? this.totalDuration() : this.duration()) / Math.abs(this._ts);
+  };
+
+  _proto.rawTime = function rawTime(wrapRepeats) {
+    var parent = this.parent || this._dp; // _dp = detatched parent
+
+    return !parent ? this._tTime : wrapRepeats && (!this._ts || this._repeat && this._time && this.totalProgress() < 1) ? this._tTime % (this._dur + this._rDelay) : !this._ts ? this._tTime : _parentToChildTotalTime(parent.rawTime(wrapRepeats), this);
+  };
+
+  _proto.globalTime = function globalTime(rawTime) {
+    var animation = this,
+        time = arguments.length ? rawTime : animation.rawTime();
+
+    while (animation) {
+      time = animation._start + time / (animation._ts || 1);
+      animation = animation._dp;
+    }
+
+    return time;
+  };
+
+  _proto.repeat = function repeat(value) {
+    if (arguments.length) {
+      this._repeat = value;
+      return _onUpdateTotalDuration(this);
+    }
+
+    return this._repeat;
+  };
+
+  _proto.repeatDelay = function repeatDelay(value) {
+    if (arguments.length) {
+      this._rDelay = value;
+      return _onUpdateTotalDuration(this);
+    }
+
+    return this._rDelay;
+  };
+
+  _proto.yoyo = function yoyo(value) {
+    if (arguments.length) {
+      this._yoyo = value;
+      return this;
+    }
+
+    return this._yoyo;
+  };
+
+  _proto.seek = function seek(position, suppressEvents) {
+    return this.totalTime(_parsePosition(this, position), _isNotFalse(suppressEvents));
+  };
+
+  _proto.restart = function restart(includeDelay, suppressEvents) {
+    return this.play().totalTime(includeDelay ? -this._delay : 0, _isNotFalse(suppressEvents));
+  };
+
+  _proto.play = function play(from, suppressEvents) {
+    if (from != null) {
+      this.seek(from, suppressEvents);
+    }
+
+    return this.reversed(false).paused(false);
+  };
+
+  _proto.reverse = function reverse(from, suppressEvents) {
+    if (from != null) {
+      this.seek(from || this.totalDuration(), suppressEvents);
+    }
+
+    return this.reversed(true).paused(false);
+  };
+
+  _proto.pause = function pause(atTime, suppressEvents) {
+    if (atTime != null) {
+      this.seek(atTime, suppressEvents);
+    }
+
+    return this.paused(true);
+  };
+
+  _proto.resume = function resume() {
+    return this.paused(false);
+  };
+
+  _proto.reversed = function reversed(value) {
+    if (arguments.length) {
+      if (!!value !== this.reversed()) {
+        this.timeScale(-this._rts || (value ? -_tinyNum : 0)); // in case timeScale is zero, reversing would have no effect so we use _tinyNum.
+      }
+
+      return this;
+    }
+
+    return this._rts < 0;
+  };
+
+  _proto.invalidate = function invalidate() {
+    this._initted = 0;
+    this._zTime = -_tinyNum;
+    return this;
+  };
+
+  _proto.isActive = function isActive() {
+    var parent = this.parent || this._dp,
+        start = this._start,
+        rawTime;
+    return !!(!parent || this._ts && this._initted && parent.isActive() && (rawTime = parent.rawTime(true)) >= start && rawTime < this.endTime(true) - _tinyNum);
+  };
+
+  _proto.eventCallback = function eventCallback(type, callback, params) {
+    var vars = this.vars;
+
+    if (arguments.length > 1) {
+      if (!callback) {
+        delete vars[type];
+      } else {
+        vars[type] = callback;
+
+        if (params) {
+          vars[type + "Params"] = params;
+        }
+
+        if (type === "onUpdate") {
+          this._onUpdate = callback;
+        }
+      }
+
+      return this;
+    }
+
+    return vars[type];
+  };
+
+  _proto.then = function then(onFulfilled) {
+    var self = this;
+    return new Promise(function (resolve) {
+      var f = _isFunction(onFulfilled) ? onFulfilled : _passThrough,
+          _resolve = function _resolve() {
+        var _then = self.then;
+        self.then = null; // temporarily null the then() method to avoid an infinite loop (see https://github.com/greensock/GSAP/issues/322)
+
+        _isFunction(f) && (f = f(self)) && (f.then || f === self) && (self.then = _then);
+        resolve(f);
+        self.then = _then;
+      };
+
+      if (self._initted && self.totalProgress() === 1 && self._ts >= 0 || !self._tTime && self._ts < 0) {
+        _resolve();
+      } else {
+        self._prom = _resolve;
+      }
+    });
+  };
+
+  _proto.kill = function kill() {
+    _interrupt(this);
+  };
+
+  return Animation;
+}();
+
+exports.Animation = Animation;
+
+_setDefaults(Animation.prototype, {
+  _time: 0,
+  _start: 0,
+  _end: 0,
+  _tTime: 0,
+  _tDur: 0,
+  _dirty: 0,
+  _repeat: 0,
+  _yoyo: false,
+  parent: null,
+  _initted: false,
+  _rDelay: 0,
+  _ts: 1,
+  _dp: 0,
+  ratio: 0,
+  _zTime: -_tinyNum,
+  _prom: 0,
+  _ps: false,
+  _rts: 1
+});
+/*
+ * -------------------------------------------------
+ * TIMELINE
+ * -------------------------------------------------
+ */
+
+
+var Timeline = /*#__PURE__*/function (_Animation) {
+  _inheritsLoose(Timeline, _Animation);
+
+  function Timeline(vars, time) {
+    var _this;
+
+    if (vars === void 0) {
+      vars = {};
+    }
+
+    _this = _Animation.call(this, vars, time) || this;
+    _this.labels = {};
+    _this.smoothChildTiming = !!vars.smoothChildTiming;
+    _this.autoRemoveChildren = !!vars.autoRemoveChildren;
+    _this._sort = _isNotFalse(vars.sortChildren);
+    _this.parent && _postAddChecks(_this.parent, _assertThisInitialized(_this));
+    vars.scrollTrigger && _scrollTrigger(_assertThisInitialized(_this), vars.scrollTrigger);
+    return _this;
+  }
+
+  var _proto2 = Timeline.prototype;
+
+  _proto2.to = function to(targets, vars, position) {
+    new Tween(targets, _parseVars(arguments, 0, this), _parsePosition(this, _isNumber(vars) ? arguments[3] : position));
+    return this;
+  };
+
+  _proto2.from = function from(targets, vars, position) {
+    new Tween(targets, _parseVars(arguments, 1, this), _parsePosition(this, _isNumber(vars) ? arguments[3] : position));
+    return this;
+  };
+
+  _proto2.fromTo = function fromTo(targets, fromVars, toVars, position) {
+    new Tween(targets, _parseVars(arguments, 2, this), _parsePosition(this, _isNumber(fromVars) ? arguments[4] : position));
+    return this;
+  };
+
+  _proto2.set = function set(targets, vars, position) {
+    vars.duration = 0;
+    vars.parent = this;
+    _inheritDefaults(vars).repeatDelay || (vars.repeat = 0);
+    vars.immediateRender = !!vars.immediateRender;
+    new Tween(targets, vars, _parsePosition(this, position), 1);
+    return this;
+  };
+
+  _proto2.call = function call(callback, params, position) {
+    return _addToTimeline(this, Tween.delayedCall(0, callback, params), _parsePosition(this, position));
+  } //ONLY for backward compatibility! Maybe delete?
+  ;
+
+  _proto2.staggerTo = function staggerTo(targets, duration, vars, stagger, position, onCompleteAll, onCompleteAllParams) {
+    vars.duration = duration;
+    vars.stagger = vars.stagger || stagger;
+    vars.onComplete = onCompleteAll;
+    vars.onCompleteParams = onCompleteAllParams;
+    vars.parent = this;
+    new Tween(targets, vars, _parsePosition(this, position));
+    return this;
+  };
+
+  _proto2.staggerFrom = function staggerFrom(targets, duration, vars, stagger, position, onCompleteAll, onCompleteAllParams) {
+    vars.runBackwards = 1;
+    _inheritDefaults(vars).immediateRender = _isNotFalse(vars.immediateRender);
+    return this.staggerTo(targets, duration, vars, stagger, position, onCompleteAll, onCompleteAllParams);
+  };
+
+  _proto2.staggerFromTo = function staggerFromTo(targets, duration, fromVars, toVars, stagger, position, onCompleteAll, onCompleteAllParams) {
+    toVars.startAt = fromVars;
+    _inheritDefaults(toVars).immediateRender = _isNotFalse(toVars.immediateRender);
+    return this.staggerTo(targets, duration, toVars, stagger, position, onCompleteAll, onCompleteAllParams);
+  };
+
+  _proto2.render = function render(totalTime, suppressEvents, force) {
+    var prevTime = this._time,
+        tDur = this._dirty ? this.totalDuration() : this._tDur,
+        dur = this._dur,
+        tTime = this !== _globalTimeline && totalTime > tDur - _tinyNum && totalTime >= 0 ? tDur : totalTime < _tinyNum ? 0 : totalTime,
+        crossingStart = this._zTime < 0 !== totalTime < 0 && (this._initted || !dur),
+        time,
+        child,
+        next,
+        iteration,
+        cycleDuration,
+        prevPaused,
+        pauseTween,
+        timeScale,
+        prevStart,
+        prevIteration,
+        yoyo,
+        isYoyo;
+
+    if (tTime !== this._tTime || force || crossingStart) {
+      if (prevTime !== this._time && dur) {
+        //if totalDuration() finds a child with a negative startTime and smoothChildTiming is true, things get shifted around internally so we need to adjust the time accordingly. For example, if a tween starts at -30 we must shift EVERYTHING forward 30 seconds and move this timeline's startTime backward by 30 seconds so that things align with the playhead (no jump).
+        tTime += this._time - prevTime;
+        totalTime += this._time - prevTime;
+      }
+
+      time = tTime;
+      prevStart = this._start;
+      timeScale = this._ts;
+      prevPaused = !timeScale;
+
+      if (crossingStart) {
+        dur || (prevTime = this._zTime); //when the playhead arrives at EXACTLY time 0 (right on top) of a zero-duration timeline, we need to discern if events are suppressed so that when the playhead moves again (next time), it'll trigger the callback. If events are NOT suppressed, obviously the callback would be triggered in this render. Basically, the callback should fire either when the playhead ARRIVES or LEAVES this exact spot, not both. Imagine doing a timeline.seek(0) and there's a callback that sits at 0. Since events are suppressed on that seek() by default, nothing will fire, but when the playhead moves off of that position, the callback should fire. This behavior is what people intuitively expect.
+
+        (totalTime || !suppressEvents) && (this._zTime = totalTime);
+      }
+
+      if (this._repeat) {
+        //adjust the time for repeats and yoyos
+        yoyo = this._yoyo;
+        cycleDuration = dur + this._rDelay;
+        time = _round(tTime % cycleDuration); //round to avoid floating point errors. (4 % 0.8 should be 0 but some browsers report it as 0.79999999!)
+
+        if (time > dur || tDur === tTime) {
+          time = dur;
+        }
+
+        iteration = ~~(tTime / cycleDuration);
+
+        if (iteration && iteration === tTime / cycleDuration) {
+          time = dur;
+          iteration--;
+        }
+
+        prevIteration = _animationCycle(this._tTime, cycleDuration);
+        !prevTime && this._tTime && prevIteration !== iteration && (prevIteration = iteration); // edge case - if someone does addPause() at the very beginning of a repeating timeline, that pause is technically at the same spot as the end which causes this._time to get set to 0 when the totalTime would normally place the playhead at the end. See https://greensock.com/forums/topic/23823-closing-nav-animation-not-working-on-ie-and-iphone-6-maybe-other-older-browser/?tab=comments#comment-113005
+
+        if (yoyo && iteration & 1) {
+          time = dur - time;
+          isYoyo = 1;
+        }
+        /*
+        make sure children at the end/beginning of the timeline are rendered properly. If, for example,
+        a 3-second long timeline rendered at 2.9 seconds previously, and now renders at 3.2 seconds (which
+        would get translated to 2.8 seconds if the timeline yoyos or 0.2 seconds if it just repeats), there
+        could be a callback or a short tween that's at 2.95 or 3 seconds in which wouldn't render. So
+        we need to push the timeline to the end (and/or beginning depending on its yoyo value). Also we must
+        ensure that zero-duration tweens at the very beginning or end of the Timeline work.
+        */
+
+
+        if (iteration !== prevIteration && !this._lock) {
+          var rewinding = yoyo && prevIteration & 1,
+              doesWrap = rewinding === (yoyo && iteration & 1);
+
+          if (iteration < prevIteration) {
+            rewinding = !rewinding;
+          }
+
+          prevTime = rewinding ? 0 : dur;
+          this._lock = 1;
+          this.render(prevTime || (isYoyo ? 0 : _round(iteration * cycleDuration)), suppressEvents, !dur)._lock = 0;
+
+          if (!suppressEvents && this.parent) {
+            _callback(this, "onRepeat");
+          }
+
+          this.vars.repeatRefresh && !isYoyo && (this.invalidate()._lock = 1);
+
+          if (prevTime !== this._time || prevPaused !== !this._ts) {
+            return this;
+          }
+
+          if (doesWrap) {
+            this._lock = 2;
+            prevTime = rewinding ? dur + 0.0001 : -0.0001;
+            this.render(prevTime, true);
+            this.vars.repeatRefresh && !isYoyo && this.invalidate();
+          }
+
+          this._lock = 0;
+
+          if (!this._ts && !prevPaused) {
+            return this;
+          } //in order for yoyoEase to work properly when there's a stagger, we must swap out the ease in each sub-tween.
+
+
+          _propagateYoyoEase(this, isYoyo);
+        }
+      }
+
+      if (this._hasPause && !this._forcing && this._lock < 2) {
+        pauseTween = _findNextPauseTween(this, _round(prevTime), _round(time));
+
+        if (pauseTween) {
+          tTime -= time - (time = pauseTween._start);
+        }
+      }
+
+      this._tTime = tTime;
+      this._time = time;
+      this._act = !timeScale; //as long as it's not paused, force it to be active so that if the user renders independent of the parent timeline, it'll be forced to re-render on the next tick.
+
+      if (!this._initted) {
+        this._onUpdate = this.vars.onUpdate;
+        this._initted = 1;
+        this._zTime = totalTime;
+      }
+
+      if (!prevTime && time && !suppressEvents) {
+        _callback(this, "onStart");
+      }
+
+      if (time >= prevTime && totalTime >= 0) {
+        child = this._first;
+
+        while (child) {
+          next = child._next;
+
+          if ((child._act || time >= child._start) && child._ts && pauseTween !== child) {
+            if (child.parent !== this) {
+              // an extreme edge case - the child's render could do something like kill() the "next" one in the linked list, or reparent it. In that case we must re-initiate the whole render to be safe.
+              return this.render(totalTime, suppressEvents, force);
+            }
+
+            child.render(child._ts > 0 ? (time - child._start) * child._ts : (child._dirty ? child.totalDuration() : child._tDur) + (time - child._start) * child._ts, suppressEvents, force);
+
+            if (time !== this._time || !this._ts && !prevPaused) {
+              //in case a tween pauses or seeks the timeline when rendering, like inside of an onUpdate/onComplete
+              pauseTween = 0;
+              next && (tTime += this._zTime = -_tinyNum); // it didn't finish rendering, so flag zTime as negative so that so that the next time render() is called it'll be forced (to render any remaining children)
+
+              break;
+            }
+          }
+
+          child = next;
+        }
+      } else {
+        child = this._last;
+        var adjustedTime = totalTime < 0 ? totalTime : time; //when the playhead goes backward beyond the start of this timeline, we must pass that information down to the child animations so that zero-duration tweens know whether to render their starting or ending values.
+
+        while (child) {
+          next = child._prev;
+
+          if ((child._act || adjustedTime <= child._end) && child._ts && pauseTween !== child) {
+            if (child.parent !== this) {
+              // an extreme edge case - the child's render could do something like kill() the "next" one in the linked list, or reparent it. In that case we must re-initiate the whole render to be safe.
+              return this.render(totalTime, suppressEvents, force);
+            }
+
+            child.render(child._ts > 0 ? (adjustedTime - child._start) * child._ts : (child._dirty ? child.totalDuration() : child._tDur) + (adjustedTime - child._start) * child._ts, suppressEvents, force);
+
+            if (time !== this._time || !this._ts && !prevPaused) {
+              //in case a tween pauses or seeks the timeline when rendering, like inside of an onUpdate/onComplete
+              pauseTween = 0;
+              next && (tTime += this._zTime = adjustedTime ? -_tinyNum : _tinyNum); // it didn't finish rendering, so adjust zTime so that so that the next time render() is called it'll be forced (to render any remaining children)
+
+              break;
+            }
+          }
+
+          child = next;
+        }
+      }
+
+      if (pauseTween && !suppressEvents) {
+        this.pause();
+        pauseTween.render(time >= prevTime ? 0 : -_tinyNum)._zTime = time >= prevTime ? 1 : -1;
+
+        if (this._ts) {
+          //the callback resumed playback! So since we may have held back the playhead due to where the pause is positioned, go ahead and jump to where it's SUPPOSED to be (if no pause happened).
+          this._start = prevStart; //if the pause was at an earlier time and the user resumed in the callback, it could reposition the timeline (changing its startTime), throwing things off slightly, so we make sure the _start doesn't shift.
+
+          _setEnd(this);
+
+          return this.render(totalTime, suppressEvents, force);
+        }
+      }
+
+      this._onUpdate && !suppressEvents && _callback(this, "onUpdate", true);
+      if (tTime === tDur && tDur >= this.totalDuration() || !tTime && prevTime) if (prevStart === this._start || Math.abs(timeScale) !== Math.abs(this._ts)) if (!this._lock) {
+        (totalTime || !dur) && (tTime === tDur && this._ts > 0 || !tTime && this._ts < 0) && _removeFromParent(this, 1); // don't remove if the timeline is reversed and the playhead isn't at 0, otherwise tl.progress(1).reverse() won't work. Only remove if the playhead is at the end and timeScale is positive, or if the playhead is at 0 and the timeScale is negative.
+
+        if (!suppressEvents && !(totalTime < 0 && !prevTime) && (tTime || prevTime)) {
+          _callback(this, tTime === tDur ? "onComplete" : "onReverseComplete", true);
+
+          this._prom && !(tTime < tDur && this.timeScale() > 0) && this._prom();
+        }
+      }
+    }
+
+    return this;
+  };
+
+  _proto2.add = function add(child, position) {
+    var _this2 = this;
+
+    if (!_isNumber(position)) {
+      position = _parsePosition(this, position);
+    }
+
+    if (!(child instanceof Animation)) {
+      if (_isArray(child)) {
+        child.forEach(function (obj) {
+          return _this2.add(obj, position);
+        });
+        return _uncache(this);
+      }
+
+      if (_isString(child)) {
+        return this.addLabel(child, position);
+      }
+
+      if (_isFunction(child)) {
+        child = Tween.delayedCall(0, child);
+      } else {
+        return this;
+      }
+    }
+
+    return this !== child ? _addToTimeline(this, child, position) : this; //don't allow a timeline to be added to itself as a child!
+  };
+
+  _proto2.getChildren = function getChildren(nested, tweens, timelines, ignoreBeforeTime) {
+    if (nested === void 0) {
+      nested = true;
+    }
+
+    if (tweens === void 0) {
+      tweens = true;
+    }
+
+    if (timelines === void 0) {
+      timelines = true;
+    }
+
+    if (ignoreBeforeTime === void 0) {
+      ignoreBeforeTime = -_bigNum;
+    }
+
+    var a = [],
+        child = this._first;
+
+    while (child) {
+      if (child._start >= ignoreBeforeTime) {
+        if (child instanceof Tween) {
+          tweens && a.push(child);
+        } else {
+          timelines && a.push(child);
+          nested && a.push.apply(a, child.getChildren(true, tweens, timelines));
+        }
+      }
+
+      child = child._next;
+    }
+
+    return a;
+  };
+
+  _proto2.getById = function getById(id) {
+    var animations = this.getChildren(1, 1, 1),
+        i = animations.length;
+
+    while (i--) {
+      if (animations[i].vars.id === id) {
+        return animations[i];
+      }
+    }
+  };
+
+  _proto2.remove = function remove(child) {
+    if (_isString(child)) {
+      return this.removeLabel(child);
+    }
+
+    if (_isFunction(child)) {
+      return this.killTweensOf(child);
+    }
+
+    _removeLinkedListItem(this, child);
+
+    if (child === this._recent) {
+      this._recent = this._last;
+    }
+
+    return _uncache(this);
+  };
+
+  _proto2.totalTime = function totalTime(_totalTime2, suppressEvents) {
+    if (!arguments.length) {
+      return this._tTime;
+    }
+
+    this._forcing = 1;
+
+    if (!this._dp && this._ts) {
+      //special case for the global timeline (or any other that has no parent or detached parent).
+      this._start = _round(_ticker.time - (this._ts > 0 ? _totalTime2 / this._ts : (this.totalDuration() - _totalTime2) / -this._ts));
+    }
+
+    _Animation.prototype.totalTime.call(this, _totalTime2, suppressEvents);
+
+    this._forcing = 0;
+    return this;
+  };
+
+  _proto2.addLabel = function addLabel(label, position) {
+    this.labels[label] = _parsePosition(this, position);
+    return this;
+  };
+
+  _proto2.removeLabel = function removeLabel(label) {
+    delete this.labels[label];
+    return this;
+  };
+
+  _proto2.addPause = function addPause(position, callback, params) {
+    var t = Tween.delayedCall(0, callback || _emptyFunc, params);
+    t.data = "isPause";
+    this._hasPause = 1;
+    return _addToTimeline(this, t, _parsePosition(this, position));
+  };
+
+  _proto2.removePause = function removePause(position) {
+    var child = this._first;
+    position = _parsePosition(this, position);
+
+    while (child) {
+      if (child._start === position && child.data === "isPause") {
+        _removeFromParent(child);
+      }
+
+      child = child._next;
+    }
+  };
+
+  _proto2.killTweensOf = function killTweensOf(targets, props, onlyActive) {
+    var tweens = this.getTweensOf(targets, onlyActive),
+        i = tweens.length;
+
+    while (i--) {
+      _overwritingTween !== tweens[i] && tweens[i].kill(targets, props);
+    }
+
+    return this;
+  };
+
+  _proto2.getTweensOf = function getTweensOf(targets, onlyActive) {
+    var a = [],
+        parsedTargets = toArray(targets),
+        child = this._first,
+        isGlobalTime = _isNumber(onlyActive),
+        // a number is interpreted as a global time. If the animation spans
+    children;
+
+    while (child) {
+      if (child instanceof Tween) {
+        if (_arrayContainsAny(child._targets, parsedTargets) && (isGlobalTime ? (!_overwritingTween || child._initted && child._ts) && child.globalTime(0) <= onlyActive && child.globalTime(child.totalDuration()) > onlyActive : !onlyActive || child.isActive())) {
+          // note: if this is for overwriting, it should only be for tweens that aren't paused and are initted.
+          a.push(child);
+        }
+      } else if ((children = child.getTweensOf(parsedTargets, onlyActive)).length) {
+        a.push.apply(a, children);
+      }
+
+      child = child._next;
+    }
+
+    return a;
+  };
+
+  _proto2.tweenTo = function tweenTo(position, vars) {
+    vars = vars || {};
+
+    var tl = this,
+        endTime = _parsePosition(tl, position),
+        _vars = vars,
+        startAt = _vars.startAt,
+        _onStart = _vars.onStart,
+        onStartParams = _vars.onStartParams,
+        tween = Tween.to(tl, _setDefaults(vars, {
+      ease: "none",
+      lazy: false,
+      time: endTime,
+      duration: vars.duration || Math.abs((endTime - (startAt && "time" in startAt ? startAt.time : tl._time)) / tl.timeScale()) || _tinyNum,
+      onStart: function onStart() {
+        tl.pause();
+        var duration = vars.duration || Math.abs((endTime - tl._time) / tl.timeScale());
+        tween._dur !== duration && _setDuration(tween, duration).render(tween._time, true, true);
+        _onStart && _onStart.apply(tween, onStartParams || []); //in case the user had an onStart in the vars - we don't want to overwrite it.
+      }
+    }));
+
+    return tween;
+  };
+
+  _proto2.tweenFromTo = function tweenFromTo(fromPosition, toPosition, vars) {
+    return this.tweenTo(toPosition, _setDefaults({
+      startAt: {
+        time: _parsePosition(this, fromPosition)
+      }
+    }, vars));
+  };
+
+  _proto2.recent = function recent() {
+    return this._recent;
+  };
+
+  _proto2.nextLabel = function nextLabel(afterTime) {
+    if (afterTime === void 0) {
+      afterTime = this._time;
+    }
+
+    return _getLabelInDirection(this, _parsePosition(this, afterTime));
+  };
+
+  _proto2.previousLabel = function previousLabel(beforeTime) {
+    if (beforeTime === void 0) {
+      beforeTime = this._time;
+    }
+
+    return _getLabelInDirection(this, _parsePosition(this, beforeTime), 1);
+  };
+
+  _proto2.currentLabel = function currentLabel(value) {
+    return arguments.length ? this.seek(value, true) : this.previousLabel(this._time + _tinyNum);
+  };
+
+  _proto2.shiftChildren = function shiftChildren(amount, adjustLabels, ignoreBeforeTime) {
+    if (ignoreBeforeTime === void 0) {
+      ignoreBeforeTime = 0;
+    }
+
+    var child = this._first,
+        labels = this.labels,
+        p;
+
+    while (child) {
+      if (child._start >= ignoreBeforeTime) {
+        child._start += amount;
+      }
+
+      child = child._next;
+    }
+
+    if (adjustLabels) {
+      for (p in labels) {
+        if (labels[p] >= ignoreBeforeTime) {
+          labels[p] += amount;
+        }
+      }
+    }
+
+    return _uncache(this);
+  };
+
+  _proto2.invalidate = function invalidate() {
+    var child = this._first;
+    this._lock = 0;
+
+    while (child) {
+      child.invalidate();
+      child = child._next;
+    }
+
+    return _Animation.prototype.invalidate.call(this);
+  };
+
+  _proto2.clear = function clear(includeLabels) {
+    if (includeLabels === void 0) {
+      includeLabels = true;
+    }
+
+    var child = this._first,
+        next;
+
+    while (child) {
+      next = child._next;
+      this.remove(child);
+      child = next;
+    }
+
+    this._time = this._tTime = this._pTime = 0;
+
+    if (includeLabels) {
+      this.labels = {};
+    }
+
+    return _uncache(this);
+  };
+
+  _proto2.totalDuration = function totalDuration(value) {
+    var max = 0,
+        self = this,
+        child = self._last,
+        prevStart = _bigNum,
+        prev,
+        end,
+        start,
+        parent;
+
+    if (arguments.length) {
+      return self.timeScale((self._repeat < 0 ? self.duration() : self.totalDuration()) / (self.reversed() ? -value : value));
+    }
+
+    if (self._dirty) {
+      parent = self.parent;
+
+      while (child) {
+        prev = child._prev; //record it here in case the tween changes position in the sequence...
+
+        child._dirty && child.totalDuration(); //could change the tween._startTime, so make sure the animation's cache is clean before analyzing it.
+
+        start = child._start;
+
+        if (start > prevStart && self._sort && child._ts && !self._lock) {
+          //in case one of the tweens shifted out of order, it needs to be re-inserted into the correct position in the sequence
+          self._lock = 1; //prevent endless recursive calls - there are methods that get triggered that check duration/totalDuration when we add().
+
+          _addToTimeline(self, child, start - child._delay, 1)._lock = 0;
+        } else {
+          prevStart = start;
+        }
+
+        if (start < 0 && child._ts) {
+          //children aren't allowed to have negative startTimes unless smoothChildTiming is true, so adjust here if one is found.
+          max -= start;
+
+          if (!parent && !self._dp || parent && parent.smoothChildTiming) {
+            self._start += start / self._ts;
+            self._time -= start;
+            self._tTime -= start;
+          }
+
+          self.shiftChildren(-start, false, -1e999);
+          prevStart = 0;
+        }
+
+        end = _setEnd(child);
+
+        if (end > max && child._ts) {
+          max = end;
+        }
+
+        child = prev;
+      }
+
+      _setDuration(self, self === _globalTimeline && self._time > max ? self._time : max, 1);
+
+      self._dirty = 0;
+    }
+
+    return self._tDur;
+  };
+
+  Timeline.updateRoot = function updateRoot(time) {
+    if (_globalTimeline._ts) {
+      _lazySafeRender(_globalTimeline, _parentToChildTotalTime(time, _globalTimeline));
+
+      _lastRenderedFrame = _ticker.frame;
+    }
+
+    if (_ticker.frame >= _nextGCFrame) {
+      _nextGCFrame += _config.autoSleep || 120;
+      var child = _globalTimeline._first;
+      if (!child || !child._ts) if (_config.autoSleep && _ticker._listeners.length < 2) {
+        while (child && !child._ts) {
+          child = child._next;
+        }
+
+        child || _ticker.sleep();
+      }
+    }
+  };
+
+  return Timeline;
+}(Animation);
+
+exports.TimelineLite = exports.TimelineMax = exports.Timeline = Timeline;
+
+_setDefaults(Timeline.prototype, {
+  _lock: 0,
+  _hasPause: 0,
+  _forcing: 0
+});
+
+var _addComplexStringPropTween = function _addComplexStringPropTween(target, prop, start, end, setter, stringFilter, funcParam) {
+  //note: we call _addComplexStringPropTween.call(tweenInstance...) to ensure that it's scoped properly. We may call it from within a plugin too, thus "this" would refer to the plugin.
+  var pt = new PropTween(this._pt, target, prop, 0, 1, _renderComplexString, null, setter),
+      index = 0,
+      matchIndex = 0,
+      result,
+      startNums,
+      color,
+      endNum,
+      chunk,
+      startNum,
+      hasRandom,
+      a;
+  pt.b = start;
+  pt.e = end;
+  start += ""; //ensure values are strings
+
+  end += "";
+
+  if (hasRandom = ~end.indexOf("random(")) {
+    end = _replaceRandom(end);
+  }
+
+  if (stringFilter) {
+    a = [start, end];
+    stringFilter(a, target, prop); //pass an array with the starting and ending values and let the filter do whatever it needs to the values.
+
+    start = a[0];
+    end = a[1];
+  }
+
+  startNums = start.match(_complexStringNumExp) || [];
+
+  while (result = _complexStringNumExp.exec(end)) {
+    endNum = result[0];
+    chunk = end.substring(index, result.index);
+
+    if (color) {
+      color = (color + 1) % 5;
+    } else if (chunk.substr(-5) === "rgba(") {
+      color = 1;
+    }
+
+    if (endNum !== startNums[matchIndex++]) {
+      startNum = parseFloat(startNums[matchIndex - 1]) || 0; //these nested PropTweens are handled in a special way - we'll never actually call a render or setter method on them. We'll just loop through them in the parent complex string PropTween's render method.
+
+      pt._pt = {
+        _next: pt._pt,
+        p: chunk || matchIndex === 1 ? chunk : ",",
+        //note: SVG spec allows omission of comma/space when a negative sign is wedged between two numbers, like 2.5-5.3 instead of 2.5,-5.3 but when tweening, the negative value may switch to positive, so we insert the comma just in case.
+        s: startNum,
+        c: endNum.charAt(1) === "=" ? parseFloat(endNum.substr(2)) * (endNum.charAt(0) === "-" ? -1 : 1) : parseFloat(endNum) - startNum,
+        m: color && color < 4 ? Math.round : 0
+      };
+      index = _complexStringNumExp.lastIndex;
+    }
+  }
+
+  pt.c = index < end.length ? end.substring(index, end.length) : ""; //we use the "c" of the PropTween to store the final part of the string (after the last number)
+
+  pt.fp = funcParam;
+
+  if (_relExp.test(end) || hasRandom) {
+    pt.e = 0; //if the end string contains relative values or dynamic random(...) values, delete the end it so that on the final render we don't actually set it to the string with += or -= characters (forces it to use the calculated value).
+  }
+
+  this._pt = pt; //start the linked list with this new PropTween. Remember, we call _addComplexStringPropTween.call(tweenInstance...) to ensure that it's scoped properly. We may call it from within a plugin too, thus "this" would refer to the plugin.
+
+  return pt;
+},
+    _addPropTween = function _addPropTween(target, prop, start, end, index, targets, modifier, stringFilter, funcParam) {
+  _isFunction(end) && (end = end(index || 0, target, targets));
+  var currentValue = target[prop],
+      parsedStart = start !== "get" ? start : !_isFunction(currentValue) ? currentValue : funcParam ? target[prop.indexOf("set") || !_isFunction(target["get" + prop.substr(3)]) ? prop : "get" + prop.substr(3)](funcParam) : target[prop](),
+      setter = !_isFunction(currentValue) ? _setterPlain : funcParam ? _setterFuncWithParam : _setterFunc,
+      pt;
+
+  if (_isString(end)) {
+    if (~end.indexOf("random(")) {
+      end = _replaceRandom(end);
+    }
+
+    if (end.charAt(1) === "=") {
+      end = parseFloat(parsedStart) + parseFloat(end.substr(2)) * (end.charAt(0) === "-" ? -1 : 1) + (getUnit(parsedStart) || 0);
+    }
+  }
+
+  if (parsedStart !== end) {
+    if (!isNaN(parsedStart * end)) {
+      pt = new PropTween(this._pt, target, prop, +parsedStart || 0, end - (parsedStart || 0), typeof currentValue === "boolean" ? _renderBoolean : _renderPlain, 0, setter);
+      funcParam && (pt.fp = funcParam);
+      modifier && pt.modifier(modifier, this, target);
+      return this._pt = pt;
+    }
+
+    !currentValue && !(prop in target) && _missingPlugin(prop, end);
+    return _addComplexStringPropTween.call(this, target, prop, parsedStart, end, setter, stringFilter || _config.stringFilter, funcParam);
+  }
+},
+    //creates a copy of the vars object and processes any function-based values (putting the resulting values directly into the copy) as well as strings with "random()" in them. It does NOT process relative values.
+_processVars = function _processVars(vars, index, target, targets, tween) {
+  if (_isFunction(vars)) {
+    vars = _parseFuncOrString(vars, tween, index, target, targets);
+  }
+
+  if (!_isObject(vars) || vars.style && vars.nodeType || _isArray(vars)) {
+    return _isString(vars) ? _parseFuncOrString(vars, tween, index, target, targets) : vars;
+  }
+
+  var copy = {},
+      p;
+
+  for (p in vars) {
+    copy[p] = _parseFuncOrString(vars[p], tween, index, target, targets);
+  }
+
+  return copy;
+},
+    _checkPlugin = function _checkPlugin(property, vars, tween, index, target, targets) {
+  var plugin, pt, ptLookup, i;
+
+  if (_plugins[property] && (plugin = new _plugins[property]()).init(target, plugin.rawVars ? vars[property] : _processVars(vars[property], index, target, targets, tween), tween, index, targets) !== false) {
+    tween._pt = pt = new PropTween(tween._pt, target, property, 0, 1, plugin.render, plugin, 0, plugin.priority);
+
+    if (tween !== _quickTween) {
+      ptLookup = tween._ptLookup[tween._targets.indexOf(target)]; //note: we can't use tween._ptLookup[index] because for staggered tweens, the index from the fullTargets array won't match what it is in each individual tween that spawns from the stagger.
+
+      i = plugin._props.length;
+
+      while (i--) {
+        ptLookup[plugin._props[i]] = pt;
+      }
+    }
+  }
+
+  return plugin;
+},
+    _overwritingTween,
+    //store a reference temporarily so we can avoid overwriting itself.
+_initTween = function _initTween(tween, time) {
+  var vars = tween.vars,
+      ease = vars.ease,
+      startAt = vars.startAt,
+      immediateRender = vars.immediateRender,
+      lazy = vars.lazy,
+      onUpdate = vars.onUpdate,
+      onUpdateParams = vars.onUpdateParams,
+      callbackScope = vars.callbackScope,
+      runBackwards = vars.runBackwards,
+      yoyoEase = vars.yoyoEase,
+      keyframes = vars.keyframes,
+      autoRevert = vars.autoRevert,
+      dur = tween._dur,
+      prevStartAt = tween._startAt,
+      targets = tween._targets,
+      parent = tween.parent,
+      fullTargets = parent && parent.data === "nested" ? parent.parent._targets : targets,
+      autoOverwrite = tween._overwrite === "auto",
+      tl = tween.timeline,
+      cleanVars,
+      i,
+      p,
+      pt,
+      target,
+      hasPriority,
+      gsData,
+      harness,
+      plugin,
+      ptLookup,
+      index,
+      harnessVars,
+      overwritten;
+  tl && (!keyframes || !ease) && (ease = "none");
+  tween._ease = _parseEase(ease, _defaults.ease);
+  tween._yEase = yoyoEase ? _invertEase(_parseEase(yoyoEase === true ? ease : yoyoEase, _defaults.ease)) : 0;
+
+  if (yoyoEase && tween._yoyo && !tween._repeat) {
+    //there must have been a parent timeline with yoyo:true that is currently in its yoyo phase, so flip the eases.
+    yoyoEase = tween._yEase;
+    tween._yEase = tween._ease;
+    tween._ease = yoyoEase;
+  }
+
+  if (!tl) {
+    //if there's an internal timeline, skip all the parsing because we passed that task down the chain.
+    harness = targets[0] ? _getCache(targets[0]).harness : 0;
+    harnessVars = harness && vars[harness.prop]; //someone may need to specify CSS-specific values AND non-CSS values, like if the element has an "x" property plus it's a standard DOM element. We allow people to distinguish by wrapping plugin-specific stuff in a css:{} object for example.
+
+    cleanVars = _copyExcluding(vars, _reservedProps);
+    prevStartAt && prevStartAt.render(-1, true).kill();
+
+    if (startAt) {
+      _removeFromParent(tween._startAt = Tween.set(targets, _setDefaults({
+        data: "isStart",
+        overwrite: false,
+        parent: parent,
+        immediateRender: true,
+        lazy: _isNotFalse(lazy),
+        startAt: null,
+        delay: 0,
+        onUpdate: onUpdate,
+        onUpdateParams: onUpdateParams,
+        callbackScope: callbackScope,
+        stagger: 0
+      }, startAt))); //copy the properties/values into a new object to avoid collisions, like var to = {x:0}, from = {x:500}; timeline.fromTo(e, from, to).fromTo(e, to, from);
+
+
+      if (immediateRender) {
+        if (time > 0) {
+          !autoRevert && (tween._startAt = 0); //tweens that render immediately (like most from() and fromTo() tweens) shouldn't revert when their parent timeline's playhead goes backward past the startTime because the initial render could have happened anytime and it shouldn't be directly correlated to this tween's startTime. Imagine setting up a complex animation where the beginning states of various objects are rendered immediately but the tween doesn't happen for quite some time - if we revert to the starting values as soon as the playhead goes backward past the tween's startTime, it will throw things off visually. Reversion should only happen in Timeline instances where immediateRender was false or when autoRevert is explicitly set to true.
+        } else if (dur && !(time < 0 && prevStartAt)) {
+          tween._zTime = time;
+          return; //we skip initialization here so that overwriting doesn't occur until the tween actually begins. Otherwise, if you create several immediateRender:true tweens of the same target/properties to drop into a Timeline, the last one created would overwrite the first ones because they didn't get placed into the timeline yet before the first render occurs and kicks in overwriting.
+        }
+      }
+    } else if (runBackwards && dur) {
+      //from() tweens must be handled uniquely: their beginning values must be rendered but we don't want overwriting to occur yet (when time is still 0). Wait until the tween actually begins before doing all the routines like overwriting. At that time, we should render at the END of the tween to ensure that things initialize correctly (remember, from() tweens go backwards)
+      if (prevStartAt) {
+        !autoRevert && (tween._startAt = 0);
+      } else {
+        time && (immediateRender = false); //in rare cases (like if a from() tween runs and then is invalidate()-ed), immediateRender could be true but the initial forced-render gets skipped, so there's no need to force the render in this context when the _time is greater than 0
+
+        p = _setDefaults({
+          overwrite: false,
+          data: "isFromStart",
+          //we tag the tween with as "isFromStart" so that if [inside a plugin] we need to only do something at the very END of a tween, we have a way of identifying this tween as merely the one that's setting the beginning values for a "from()" tween. For example, clearProps in CSSPlugin should only get applied at the very END of a tween and without this tag, from(...{height:100, clearProps:"height", delay:1}) would wipe the height at the beginning of the tween and after 1 second, it'd kick back in.
+          lazy: immediateRender && _isNotFalse(lazy),
+          immediateRender: immediateRender,
+          //zero-duration tweens render immediately by default, but if we're not specifically instructed to render this tween immediately, we should skip this and merely _init() to record the starting values (rendering them immediately would push them to completion which is wasteful in that case - we'd have to render(-1) immediately after)
+          stagger: 0,
+          parent: parent //ensures that nested tweens that had a stagger are handled properly, like gsap.from(".class", {y:gsap.utils.wrap([-100,100])})
+
+        }, cleanVars);
+        harnessVars && (p[harness.prop] = harnessVars); // in case someone does something like .from(..., {css:{}})
+
+        _removeFromParent(tween._startAt = Tween.set(targets, p));
+
+        if (!immediateRender) {
+          _initTween(tween._startAt, _tinyNum); //ensures that the initial values are recorded
+
+        } else if (!time) {
+          return;
+        }
+      }
+    }
+
+    tween._pt = 0;
+    lazy = dur && _isNotFalse(lazy) || lazy && !dur;
+
+    for (i = 0; i < targets.length; i++) {
+      target = targets[i];
+      gsData = target._gsap || _harness(targets)[i]._gsap;
+      tween._ptLookup[i] = ptLookup = {};
+      _lazyLookup[gsData.id] && _lazyRender(); //if other tweens of the same target have recently initted but haven't rendered yet, we've got to force the render so that the starting values are correct (imagine populating a timeline with a bunch of sequential tweens and then jumping to the end)
+
+      index = fullTargets === targets ? i : fullTargets.indexOf(target);
+
+      if (harness && (plugin = new harness()).init(target, harnessVars || cleanVars, tween, index, fullTargets) !== false) {
+        tween._pt = pt = new PropTween(tween._pt, target, plugin.name, 0, 1, plugin.render, plugin, 0, plugin.priority);
+
+        plugin._props.forEach(function (name) {
+          ptLookup[name] = pt;
+        });
+
+        plugin.priority && (hasPriority = 1);
+      }
+
+      if (!harness || harnessVars) {
+        for (p in cleanVars) {
+          if (_plugins[p] && (plugin = _checkPlugin(p, cleanVars, tween, index, target, fullTargets))) {
+            plugin.priority && (hasPriority = 1);
+          } else {
+            ptLookup[p] = pt = _addPropTween.call(tween, target, p, "get", cleanVars[p], index, fullTargets, 0, vars.stringFilter);
+          }
+        }
+      }
+
+      tween._op && tween._op[i] && tween.kill(target, tween._op[i]);
+
+      if (autoOverwrite && tween._pt) {
+        _overwritingTween = tween;
+
+        _globalTimeline.killTweensOf(target, ptLookup, tween.globalTime(0)); //Also make sure the overwriting doesn't overwrite THIS tween!!!
+
+
+        overwritten = !tween.parent;
+        _overwritingTween = 0;
+      }
+
+      tween._pt && lazy && (_lazyLookup[gsData.id] = 1);
+    }
+
+    hasPriority && _sortPropTweensByPriority(tween);
+    tween._onInit && tween._onInit(tween); //plugins like RoundProps must wait until ALL of the PropTweens are instantiated. In the plugin's init() function, it sets the _onInit on the tween instance. May not be pretty/intuitive, but it's fast and keeps file size down.
+  }
+
+  tween._from = !tl && !!vars.runBackwards; //nested timelines should never run backwards - the backwards-ness is in the child tweens.
+
+  tween._onUpdate = onUpdate;
+  tween._initted = (!tween._op || tween._pt) && !overwritten; // if overwrittenProps resulted in the entire tween being killed, do NOT flag it as initted or else it may render for one tick.
+},
+    _addAliasesToVars = function _addAliasesToVars(targets, vars) {
+  var harness = targets[0] ? _getCache(targets[0]).harness : 0,
+      propertyAliases = harness && harness.aliases,
+      copy,
+      p,
+      i,
+      aliases;
+
+  if (!propertyAliases) {
+    return vars;
+  }
+
+  copy = _merge({}, vars);
+
+  for (p in propertyAliases) {
+    if (p in copy) {
+      aliases = propertyAliases[p].split(",");
+      i = aliases.length;
+
+      while (i--) {
+        copy[aliases[i]] = copy[p];
+      }
+    }
+  }
+
+  return copy;
+},
+    _parseFuncOrString = function _parseFuncOrString(value, tween, i, target, targets) {
+  return _isFunction(value) ? value.call(tween, i, target, targets) : _isString(value) && ~value.indexOf("random(") ? _replaceRandom(value) : value;
+},
+    _staggerTweenProps = _callbackNames + "repeat,repeatDelay,yoyo,repeatRefresh,yoyoEase",
+    _staggerPropsToSkip = (_staggerTweenProps + ",id,stagger,delay,duration,paused,scrollTrigger").split(",");
+/*
+ * --------------------------------------------------------------------------------------
+ * TWEEN
+ * --------------------------------------------------------------------------------------
+ */
+
+
+exports._checkPlugin = _checkPlugin;
+
+var Tween = /*#__PURE__*/function (_Animation2) {
+  _inheritsLoose(Tween, _Animation2);
+
+  function Tween(targets, vars, time, skipInherit) {
+    var _this3;
+
+    if (typeof vars === "number") {
+      time.duration = vars;
+      vars = time;
+      time = null;
+    }
+
+    _this3 = _Animation2.call(this, skipInherit ? vars : _inheritDefaults(vars), time) || this;
+    var _this3$vars = _this3.vars,
+        duration = _this3$vars.duration,
+        delay = _this3$vars.delay,
+        immediateRender = _this3$vars.immediateRender,
+        stagger = _this3$vars.stagger,
+        overwrite = _this3$vars.overwrite,
+        keyframes = _this3$vars.keyframes,
+        defaults = _this3$vars.defaults,
+        scrollTrigger = _this3$vars.scrollTrigger,
+        yoyoEase = _this3$vars.yoyoEase,
+        parent = _this3.parent,
+        parsedTargets = (_isArray(targets) ? _isNumber(targets[0]) : "length" in vars) ? [targets] : toArray(targets),
+        tl,
+        i,
+        copy,
+        l,
+        p,
+        curTarget,
+        staggerFunc,
+        staggerVarsToMerge;
+    _this3._targets = parsedTargets.length ? _harness(parsedTargets) : _warn("GSAP target " + targets + " not found. https://greensock.com", !_config.nullTargetWarn) || [];
+    _this3._ptLookup = []; //PropTween lookup. An array containing an object for each target, having keys for each tweening property
+
+    _this3._overwrite = overwrite;
+
+    if (keyframes || stagger || _isFuncOrString(duration) || _isFuncOrString(delay)) {
+      vars = _this3.vars;
+      tl = _this3.timeline = new Timeline({
+        data: "nested",
+        defaults: defaults || {}
+      });
+      tl.kill();
+      tl.parent = _assertThisInitialized(_this3);
+
+      if (keyframes) {
+        _setDefaults(tl.vars.defaults, {
+          ease: "none"
+        });
+
+        keyframes.forEach(function (frame) {
+          return tl.to(parsedTargets, frame, ">");
+        });
+      } else {
+        l = parsedTargets.length;
+        staggerFunc = stagger ? distribute(stagger) : _emptyFunc;
+
+        if (_isObject(stagger)) {
+          //users can pass in callbacks like onStart/onComplete in the stagger object. These should fire with each individual tween.
+          for (p in stagger) {
+            if (~_staggerTweenProps.indexOf(p)) {
+              staggerVarsToMerge || (staggerVarsToMerge = {});
+              staggerVarsToMerge[p] = stagger[p];
+            }
+          }
+        }
+
+        for (i = 0; i < l; i++) {
+          copy = {};
+
+          for (p in vars) {
+            if (_staggerPropsToSkip.indexOf(p) < 0) {
+              copy[p] = vars[p];
+            }
+          }
+
+          copy.stagger = 0;
+          yoyoEase && (copy.yoyoEase = yoyoEase);
+          staggerVarsToMerge && _merge(copy, staggerVarsToMerge);
+          curTarget = parsedTargets[i]; //don't just copy duration or delay because if they're a string or function, we'd end up in an infinite loop because _isFuncOrString() would evaluate as true in the child tweens, entering this loop, etc. So we parse the value straight from vars and default to 0.
+
+          copy.duration = +_parseFuncOrString(duration, _assertThisInitialized(_this3), i, curTarget, parsedTargets);
+          copy.delay = (+_parseFuncOrString(delay, _assertThisInitialized(_this3), i, curTarget, parsedTargets) || 0) - _this3._delay;
+
+          if (!stagger && l === 1 && copy.delay) {
+            // if someone does delay:"random(1, 5)", repeat:-1, for example, the delay shouldn't be inside the repeat.
+            _this3._delay = delay = copy.delay;
+            _this3._start += delay;
+            copy.delay = 0;
+          }
+
+          tl.to(curTarget, copy, staggerFunc(i, curTarget, parsedTargets));
+        }
+
+        tl.duration() ? duration = delay = 0 : _this3.timeline = 0; // if the timeline's duration is 0, we don't need a timeline internally!
+      }
+
+      duration || _this3.duration(duration = tl.duration());
+    } else {
+      _this3.timeline = 0; //speed optimization, faster lookups (no going up the prototype chain)
+    }
+
+    if (overwrite === true) {
+      _overwritingTween = _assertThisInitialized(_this3);
+
+      _globalTimeline.killTweensOf(parsedTargets);
+
+      _overwritingTween = 0;
+    }
+
+    parent && _postAddChecks(parent, _assertThisInitialized(_this3));
+
+    if (immediateRender || !duration && !keyframes && _this3._start === _round(parent._time) && _isNotFalse(immediateRender) && _hasNoPausedAncestors(_assertThisInitialized(_this3)) && parent.data !== "nested") {
+      _this3._tTime = -_tinyNum; //forces a render without having to set the render() "force" parameter to true because we want to allow lazying by default (using the "force" parameter always forces an immediate full render)
+
+      _this3.render(Math.max(0, -delay)); //in case delay is negative
+
+    }
+
+    scrollTrigger && _scrollTrigger(_assertThisInitialized(_this3), scrollTrigger);
+    return _this3;
+  }
+
+  var _proto3 = Tween.prototype;
+
+  _proto3.render = function render(totalTime, suppressEvents, force) {
+    var prevTime = this._time,
+        tDur = this._tDur,
+        dur = this._dur,
+        tTime = totalTime > tDur - _tinyNum && totalTime >= 0 ? tDur : totalTime < _tinyNum ? 0 : totalTime,
+        time,
+        pt,
+        iteration,
+        cycleDuration,
+        prevIteration,
+        isYoyo,
+        ratio,
+        timeline,
+        yoyoEase;
+
+    if (!dur) {
+      _renderZeroDurationTween(this, totalTime, suppressEvents, force);
+    } else if (tTime !== this._tTime || !totalTime || force || this._startAt && this._zTime < 0 !== totalTime < 0) {
+      //this senses if we're crossing over the start time, in which case we must record _zTime and force the render, but we do it in this lengthy conditional way for performance reasons (usually we can skip the calculations): this._initted && (this._zTime < 0) !== (totalTime < 0)
+      time = tTime;
+      timeline = this.timeline;
+
+      if (this._repeat) {
+        //adjust the time for repeats and yoyos
+        cycleDuration = dur + this._rDelay;
+        time = _round(tTime % cycleDuration); //round to avoid floating point errors. (4 % 0.8 should be 0 but some browsers report it as 0.79999999!)
+
+        if (time > dur || tDur === tTime) {
+          // the tDur === tTime is for edge cases where there's a lengthy decimal on the duration and it may reach the very end but the time is rendered as not-quite-there (remember, tDur is rounded to 4 decimals whereas dur isn't)
+          time = dur;
+        }
+
+        iteration = ~~(tTime / cycleDuration);
+
+        if (iteration && iteration === tTime / cycleDuration) {
+          time = dur;
+          iteration--;
+        }
+
+        isYoyo = this._yoyo && iteration & 1;
+
+        if (isYoyo) {
+          yoyoEase = this._yEase;
+          time = dur - time;
+        }
+
+        prevIteration = _animationCycle(this._tTime, cycleDuration);
+
+        if (time === prevTime && !force && this._initted) {
+          //could be during the repeatDelay part. No need to render and fire callbacks.
+          return this;
+        }
+
+        if (iteration !== prevIteration) {
+          timeline && this._yEase && _propagateYoyoEase(timeline, isYoyo); //repeatRefresh functionality
+
+          if (this.vars.repeatRefresh && !isYoyo && !this._lock) {
+            this._lock = force = 1; //force, otherwise if lazy is true, the _attemptInitTween() will return and we'll jump out and get caught bouncing on each tick.
+
+            this.render(_round(cycleDuration * iteration), true).invalidate()._lock = 0;
+          }
+        }
+      }
+
+      if (!this._initted) {
+        if (_attemptInitTween(this, totalTime < 0 ? totalTime : time, force, suppressEvents)) {
+          this._tTime = 0; // in constructor if immediateRender is true, we set _tTime to -_tinyNum to have the playhead cross the starting point but we can't leave _tTime as a negative number.
+
+          return this;
+        }
+
+        if (dur !== this._dur) {
+          // while initting, a plugin like InertiaPlugin might alter the duration, so rerun from the start to ensure everything renders as it should.
+          return this.render(totalTime, suppressEvents, force);
+        }
+      }
+
+      this._tTime = tTime;
+      this._time = time;
+
+      if (!this._act && this._ts) {
+        this._act = 1; //as long as it's not paused, force it to be active so that if the user renders independent of the parent timeline, it'll be forced to re-render on the next tick.
+
+        this._lazy = 0;
+      }
+
+      this.ratio = ratio = (yoyoEase || this._ease)(time / dur);
+
+      if (this._from) {
+        this.ratio = ratio = 1 - ratio;
+      }
+
+      time && !prevTime && !suppressEvents && _callback(this, "onStart");
+      pt = this._pt;
+
+      while (pt) {
+        pt.r(ratio, pt.d);
+        pt = pt._next;
+      }
+
+      timeline && timeline.render(totalTime < 0 ? totalTime : !time && isYoyo ? -_tinyNum : timeline._dur * ratio, suppressEvents, force) || this._startAt && (this._zTime = totalTime);
+
+      if (this._onUpdate && !suppressEvents) {
+        if (totalTime < 0 && this._startAt) {
+          this._startAt.render(totalTime, true, force); //note: for performance reasons, we tuck this conditional logic inside less traveled areas (most tweens don't have an onUpdate). We'd just have it at the end before the onComplete, but the values should be updated before any onUpdate is called, so we ALSO put it here and then if it's not called, we do so later near the onComplete.
+
+        }
+
+        _callback(this, "onUpdate");
+      }
+
+      this._repeat && iteration !== prevIteration && this.vars.onRepeat && !suppressEvents && this.parent && _callback(this, "onRepeat");
+
+      if ((tTime === this._tDur || !tTime) && this._tTime === tTime) {
+        totalTime < 0 && this._startAt && !this._onUpdate && this._startAt.render(totalTime, true, true);
+        (totalTime || !dur) && (tTime === this._tDur && this._ts > 0 || !tTime && this._ts < 0) && _removeFromParent(this, 1); // don't remove if we're rendering at exactly a time of 0, as there could be autoRevert values that should get set on the next tick (if the playhead goes backward beyond the startTime, negative totalTime). Don't remove if the timeline is reversed and the playhead isn't at 0, otherwise tl.progress(1).reverse() won't work. Only remove if the playhead is at the end and timeScale is positive, or if the playhead is at 0 and the timeScale is negative.
+
+        if (!suppressEvents && !(totalTime < 0 && !prevTime) && (tTime || prevTime)) {
+          // if prevTime and tTime are zero, we shouldn't fire the onReverseComplete. This could happen if you gsap.to(... {paused:true}).play();
+          _callback(this, tTime === tDur ? "onComplete" : "onReverseComplete", true);
+
+          this._prom && !(tTime < tDur && this.timeScale() > 0) && this._prom();
+        }
+      }
+    }
+
+    return this;
+  };
+
+  _proto3.targets = function targets() {
+    return this._targets;
+  };
+
+  _proto3.invalidate = function invalidate() {
+    this._pt = this._op = this._startAt = this._onUpdate = this._act = this._lazy = 0;
+    this._ptLookup = [];
+    this.timeline && this.timeline.invalidate();
+    return _Animation2.prototype.invalidate.call(this);
+  };
+
+  _proto3.kill = function kill(targets, vars) {
+    if (vars === void 0) {
+      vars = "all";
+    }
+
+    if (!targets && (!vars || vars === "all")) {
+      this._lazy = 0;
+
+      if (this.parent) {
+        return _interrupt(this);
+      }
+    }
+
+    if (this.timeline) {
+      var tDur = this.timeline.totalDuration();
+      this.timeline.killTweensOf(targets, vars, _overwritingTween && _overwritingTween.vars.overwrite !== true)._first || _interrupt(this); // if nothing is left tweenng, interrupt.
+
+      this.parent && tDur !== this.timeline.totalDuration() && _setDuration(this, this._dur * this.timeline._tDur / tDur); // if a nested tween is killed that changes the duration, it should affect this tween's duration. We must use the ratio, though, because sometimes the internal timeline is stretched like for keyframes where they don't all add up to whatever the parent tween's duration was set to.
+
+      return this;
+    }
+
+    var parsedTargets = this._targets,
+        killingTargets = targets ? toArray(targets) : parsedTargets,
+        propTweenLookup = this._ptLookup,
+        firstPT = this._pt,
+        overwrittenProps,
+        curLookup,
+        curOverwriteProps,
+        props,
+        p,
+        pt,
+        i;
+
+    if ((!vars || vars === "all") && _arraysMatch(parsedTargets, killingTargets)) {
+      vars === "all" && (this._pt = 0);
+      return _interrupt(this);
+    }
+
+    overwrittenProps = this._op = this._op || [];
+
+    if (vars !== "all") {
+      //so people can pass in a comma-delimited list of property names
+      if (_isString(vars)) {
+        p = {};
+
+        _forEachName(vars, function (name) {
+          return p[name] = 1;
+        });
+
+        vars = p;
+      }
+
+      vars = _addAliasesToVars(parsedTargets, vars);
+    }
+
+    i = parsedTargets.length;
+
+    while (i--) {
+      if (~killingTargets.indexOf(parsedTargets[i])) {
+        curLookup = propTweenLookup[i];
+
+        if (vars === "all") {
+          overwrittenProps[i] = vars;
+          props = curLookup;
+          curOverwriteProps = {};
+        } else {
+          curOverwriteProps = overwrittenProps[i] = overwrittenProps[i] || {};
+          props = vars;
+        }
+
+        for (p in props) {
+          pt = curLookup && curLookup[p];
+
+          if (pt) {
+            if (!("kill" in pt.d) || pt.d.kill(p) === true) {
+              _removeLinkedListItem(this, pt, "_pt");
+            }
+
+            delete curLookup[p];
+          }
+
+          if (curOverwriteProps !== "all") {
+            curOverwriteProps[p] = 1;
+          }
+        }
+      }
+    }
+
+    this._initted && !this._pt && firstPT && _interrupt(this); //if all tweening properties are killed, kill the tween. Without this line, if there's a tween with multiple targets and then you killTweensOf() each target individually, the tween would technically still remain active and fire its onComplete even though there aren't any more properties tweening.
+
+    return this;
+  };
+
+  Tween.to = function to(targets, vars) {
+    return new Tween(targets, vars, arguments[2]);
+  };
+
+  Tween.from = function from(targets, vars) {
+    return new Tween(targets, _parseVars(arguments, 1));
+  };
+
+  Tween.delayedCall = function delayedCall(delay, callback, params, scope) {
+    return new Tween(callback, 0, {
+      immediateRender: false,
+      lazy: false,
+      overwrite: false,
+      delay: delay,
+      onComplete: callback,
+      onReverseComplete: callback,
+      onCompleteParams: params,
+      onReverseCompleteParams: params,
+      callbackScope: scope
+    });
+  };
+
+  Tween.fromTo = function fromTo(targets, fromVars, toVars) {
+    return new Tween(targets, _parseVars(arguments, 2));
+  };
+
+  Tween.set = function set(targets, vars) {
+    vars.duration = 0;
+    vars.repeatDelay || (vars.repeat = 0);
+    return new Tween(targets, vars);
+  };
+
+  Tween.killTweensOf = function killTweensOf(targets, props, onlyActive) {
+    return _globalTimeline.killTweensOf(targets, props, onlyActive);
+  };
+
+  return Tween;
+}(Animation);
+
+exports.TweenLite = exports.TweenMax = exports.Tween = Tween;
+
+_setDefaults(Tween.prototype, {
+  _targets: [],
+  _lazy: 0,
+  _startAt: 0,
+  _op: 0,
+  _onInit: 0
+}); //add the pertinent timeline methods to Tween instances so that users can chain conveniently and create a timeline automatically. (removed due to concerns that it'd ultimately add to more confusion especially for beginners)
+// _forEachName("to,from,fromTo,set,call,add,addLabel,addPause", name => {
+// 	Tween.prototype[name] = function() {
+// 		let tl = new Timeline();
+// 		return _addToTimeline(tl, this)[name].apply(tl, toArray(arguments));
+// 	}
+// });
+//for backward compatibility. Leverage the timeline calls.
+
+
+_forEachName("staggerTo,staggerFrom,staggerFromTo", function (name) {
+  Tween[name] = function () {
+    var tl = new Timeline(),
+        params = _slice.call(arguments, 0);
+
+    params.splice(name === "staggerFromTo" ? 5 : 4, 0, 0);
+    return tl[name].apply(tl, params);
+  };
+});
+/*
+ * --------------------------------------------------------------------------------------
+ * PROPTWEEN
+ * --------------------------------------------------------------------------------------
+ */
+
+
+var _setterPlain = function _setterPlain(target, property, value) {
+  return target[property] = value;
+},
+    _setterFunc = function _setterFunc(target, property, value) {
+  return target[property](value);
+},
+    _setterFuncWithParam = function _setterFuncWithParam(target, property, value, data) {
+  return target[property](data.fp, value);
+},
+    _setterAttribute = function _setterAttribute(target, property, value) {
+  return target.setAttribute(property, value);
+},
+    _getSetter = function _getSetter(target, property) {
+  return _isFunction(target[property]) ? _setterFunc : _isUndefined(target[property]) && target.setAttribute ? _setterAttribute : _setterPlain;
+},
+    _renderPlain = function _renderPlain(ratio, data) {
+  return data.set(data.t, data.p, Math.round((data.s + data.c * ratio) * 10000) / 10000, data);
+},
+    _renderBoolean = function _renderBoolean(ratio, data) {
+  return data.set(data.t, data.p, !!(data.s + data.c * ratio), data);
+},
+    _renderComplexString = function _renderComplexString(ratio, data) {
+  var pt = data._pt,
+      s = "";
+
+  if (!ratio && data.b) {
+    //b = beginning string
+    s = data.b;
+  } else if (ratio === 1 && data.e) {
+    //e = ending string
+    s = data.e;
+  } else {
+    while (pt) {
+      s = pt.p + (pt.m ? pt.m(pt.s + pt.c * ratio) : Math.round((pt.s + pt.c * ratio) * 10000) / 10000) + s; //we use the "p" property for the text inbetween (like a suffix). And in the context of a complex string, the modifier (m) is typically just Math.round(), like for RGB colors.
+
+      pt = pt._next;
+    }
+
+    s += data.c; //we use the "c" of the PropTween to store the final chunk of non-numeric text.
+  }
+
+  data.set(data.t, data.p, s, data);
+},
+    _renderPropTweens = function _renderPropTweens(ratio, data) {
+  var pt = data._pt;
+
+  while (pt) {
+    pt.r(ratio, pt.d);
+    pt = pt._next;
+  }
+},
+    _addPluginModifier = function _addPluginModifier(modifier, tween, target, property) {
+  var pt = this._pt,
+      next;
+
+  while (pt) {
+    next = pt._next;
+
+    if (pt.p === property) {
+      pt.modifier(modifier, tween, target);
+    }
+
+    pt = next;
+  }
+},
+    _killPropTweensOf = function _killPropTweensOf(property) {
+  var pt = this._pt,
+      hasNonDependentRemaining,
+      next;
+
+  while (pt) {
+    next = pt._next;
+
+    if (pt.p === property && !pt.op || pt.op === property) {
+      _removeLinkedListItem(this, pt, "_pt");
+    } else if (!pt.dep) {
+      hasNonDependentRemaining = 1;
+    }
+
+    pt = next;
+  }
+
+  return !hasNonDependentRemaining;
+},
+    _setterWithModifier = function _setterWithModifier(target, property, value, data) {
+  data.mSet(target, property, data.m.call(data.tween, value, data.mt), data);
+},
+    _sortPropTweensByPriority = function _sortPropTweensByPriority(parent) {
+  var pt = parent._pt,
+      next,
+      pt2,
+      first,
+      last; //sorts the PropTween linked list in order of priority because some plugins need to do their work after ALL of the PropTweens were created (like RoundPropsPlugin and ModifiersPlugin)
+
+  while (pt) {
+    next = pt._next;
+    pt2 = first;
+
+    while (pt2 && pt2.pr > pt.pr) {
+      pt2 = pt2._next;
+    }
+
+    if (pt._prev = pt2 ? pt2._prev : last) {
+      pt._prev._next = pt;
+    } else {
+      first = pt;
+    }
+
+    if (pt._next = pt2) {
+      pt2._prev = pt;
+    } else {
+      last = pt;
+    }
+
+    pt = next;
+  }
+
+  parent._pt = first;
+}; //PropTween key: t = target, p = prop, r = renderer, d = data, s = start, c = change, op = overwriteProperty (ONLY populated when it's different than p), pr = priority, _next/_prev for the linked list siblings, set = setter, m = modifier, mSet = modifierSetter (the original setter, before a modifier was added)
+
+
+exports._sortPropTweensByPriority = _sortPropTweensByPriority;
+exports._renderComplexString = _renderComplexString;
+exports._getSetter = _getSetter;
+
+var PropTween = /*#__PURE__*/function () {
+  function PropTween(next, target, prop, start, change, renderer, data, setter, priority) {
+    this.t = target;
+    this.s = start;
+    this.c = change;
+    this.p = prop;
+    this.r = renderer || _renderPlain;
+    this.d = data || this;
+    this.set = setter || _setterPlain;
+    this.pr = priority || 0;
+    this._next = next;
+
+    if (next) {
+      next._prev = this;
+    }
+  }
+
+  var _proto4 = PropTween.prototype;
+
+  _proto4.modifier = function modifier(func, tween, target) {
+    this.mSet = this.mSet || this.set; //in case it was already set (a PropTween can only have one modifier)
+
+    this.set = _setterWithModifier;
+    this.m = func;
+    this.mt = target; //modifier target
+
+    this.tween = tween;
+  };
+
+  return PropTween;
+}(); //Initialization tasks
+
+
+exports.PropTween = PropTween;
+
+_forEachName(_callbackNames + "parent,duration,ease,delay,overwrite,runBackwards,startAt,yoyo,immediateRender,repeat,repeatDelay,data,paused,reversed,lazy,callbackScope,stringFilter,id,yoyoEase,stagger,inherit,repeatRefresh,keyframes,autoRevert,scrollTrigger", function (name) {
+  return _reservedProps[name] = 1;
+});
+
+_globals.TweenMax = _globals.TweenLite = Tween;
+_globals.TimelineLite = _globals.TimelineMax = Timeline;
+_globalTimeline = new Timeline({
+  sortChildren: false,
+  defaults: _defaults,
+  autoRemoveChildren: true,
+  id: "root",
+  smoothChildTiming: true
+});
+_config.stringFilter = _colorStringFilter;
+/*
+ * --------------------------------------------------------------------------------------
+ * GSAP
+ * --------------------------------------------------------------------------------------
+ */
+
+var _gsap = {
+  registerPlugin: function registerPlugin() {
+    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
+    }
+
+    args.forEach(function (config) {
+      return _createPlugin(config);
+    });
+  },
+  timeline: function timeline(vars) {
+    return new Timeline(vars);
+  },
+  getTweensOf: function getTweensOf(targets, onlyActive) {
+    return _globalTimeline.getTweensOf(targets, onlyActive);
+  },
+  getProperty: function getProperty(target, property, unit, uncache) {
+    if (_isString(target)) {
+      //in case selector text or an array is passed in
+      target = toArray(target)[0];
+    }
+
+    var getter = _getCache(target || {}).get,
+        format = unit ? _passThrough : _numericIfPossible;
+
+    if (unit === "native") {
+      unit = "";
+    }
+
+    return !target ? target : !property ? function (property, unit, uncache) {
+      return format((_plugins[property] && _plugins[property].get || getter)(target, property, unit, uncache));
+    } : format((_plugins[property] && _plugins[property].get || getter)(target, property, unit, uncache));
+  },
+  quickSetter: function quickSetter(target, property, unit) {
+    target = toArray(target);
+
+    if (target.length > 1) {
+      var setters = target.map(function (t) {
+        return gsap.quickSetter(t, property, unit);
+      }),
+          l = setters.length;
+      return function (value) {
+        var i = l;
+
+        while (i--) {
+          setters[i](value);
+        }
+      };
+    }
+
+    target = target[0] || {};
+
+    var Plugin = _plugins[property],
+        cache = _getCache(target),
+        p = cache.harness && (cache.harness.aliases || {})[property] || property,
+        // in case it's an alias, like "rotate" for "rotation".
+    setter = Plugin ? function (value) {
+      var p = new Plugin();
+      _quickTween._pt = 0;
+      p.init(target, unit ? value + unit : value, _quickTween, 0, [target]);
+      p.render(1, p);
+      _quickTween._pt && _renderPropTweens(1, _quickTween);
+    } : cache.set(target, p);
+
+    return Plugin ? setter : function (value) {
+      return setter(target, p, unit ? value + unit : value, cache, 1);
+    };
+  },
+  isTweening: function isTweening(targets) {
+    return _globalTimeline.getTweensOf(targets, true).length > 0;
+  },
+  defaults: function defaults(value) {
+    if (value && value.ease) {
+      value.ease = _parseEase(value.ease, _defaults.ease);
+    }
+
+    return _mergeDeep(_defaults, value || {});
+  },
+  config: function config(value) {
+    return _mergeDeep(_config, value || {});
+  },
+  registerEffect: function registerEffect(_ref) {
+    var name = _ref.name,
+        effect = _ref.effect,
+        plugins = _ref.plugins,
+        defaults = _ref.defaults,
+        extendTimeline = _ref.extendTimeline;
+    (plugins || "").split(",").forEach(function (pluginName) {
+      return pluginName && !_plugins[pluginName] && !_globals[pluginName] && _warn(name + " effect requires " + pluginName + " plugin.");
+    });
+
+    _effects[name] = function (targets, vars, tl) {
+      return effect(toArray(targets), _setDefaults(vars || {}, defaults), tl);
+    };
+
+    if (extendTimeline) {
+      Timeline.prototype[name] = function (targets, vars, position) {
+        return this.add(_effects[name](targets, _isObject(vars) ? vars : (position = vars) && {}, this), position);
+      };
+    }
+  },
+  registerEase: function registerEase(name, ease) {
+    _easeMap[name] = _parseEase(ease);
+  },
+  parseEase: function parseEase(ease, defaultEase) {
+    return arguments.length ? _parseEase(ease, defaultEase) : _easeMap;
+  },
+  getById: function getById(id) {
+    return _globalTimeline.getById(id);
+  },
+  exportRoot: function exportRoot(vars, includeDelayedCalls) {
+    if (vars === void 0) {
+      vars = {};
+    }
+
+    var tl = new Timeline(vars),
+        child,
+        next;
+    tl.smoothChildTiming = _isNotFalse(vars.smoothChildTiming);
+
+    _globalTimeline.remove(tl);
+
+    tl._dp = 0; //otherwise it'll get re-activated when adding children and be re-introduced into _globalTimeline's linked list (then added to itself).
+
+    tl._time = tl._tTime = _globalTimeline._time;
+    child = _globalTimeline._first;
+
+    while (child) {
+      next = child._next;
+
+      if (includeDelayedCalls || !(!child._dur && child instanceof Tween && child.vars.onComplete === child._targets[0])) {
+        _addToTimeline(tl, child, child._start - child._delay);
+      }
+
+      child = next;
+    }
+
+    _addToTimeline(_globalTimeline, tl, 0);
+
+    return tl;
+  },
+  utils: {
+    wrap: wrap,
+    wrapYoyo: wrapYoyo,
+    distribute: distribute,
+    random: random,
+    snap: snap,
+    normalize: normalize,
+    getUnit: getUnit,
+    clamp: clamp,
+    splitColor: splitColor,
+    toArray: toArray,
+    mapRange: mapRange,
+    pipe: pipe,
+    unitize: unitize,
+    interpolate: interpolate,
+    shuffle: shuffle
+  },
+  install: _install,
+  effects: _effects,
+  ticker: _ticker,
+  updateRoot: Timeline.updateRoot,
+  plugins: _plugins,
+  globalTimeline: _globalTimeline,
+  core: {
+    PropTween: PropTween,
+    globals: _addGlobal,
+    Tween: Tween,
+    Timeline: Timeline,
+    Animation: Animation,
+    getCache: _getCache,
+    _removeLinkedListItem: _removeLinkedListItem
+  }
+};
+
+_forEachName("to,from,fromTo,delayedCall,set,killTweensOf", function (name) {
+  return _gsap[name] = Tween[name];
+});
+
+_ticker.add(Timeline.updateRoot);
+
+_quickTween = _gsap.to({}, {
+  duration: 0
+}); // ---- EXTRA PLUGINS --------------------------------------------------------
+
+var _getPluginPropTween = function _getPluginPropTween(plugin, prop) {
+  var pt = plugin._pt;
+
+  while (pt && pt.p !== prop && pt.op !== prop && pt.fp !== prop) {
+    pt = pt._next;
+  }
+
+  return pt;
+},
+    _addModifiers = function _addModifiers(tween, modifiers) {
+  var targets = tween._targets,
+      p,
+      i,
+      pt;
+
+  for (p in modifiers) {
+    i = targets.length;
+
+    while (i--) {
+      pt = tween._ptLookup[i][p];
+
+      if (pt && (pt = pt.d)) {
+        if (pt._pt) {
+          // is a plugin
+          pt = _getPluginPropTween(pt, p);
+        }
+
+        pt && pt.modifier && pt.modifier(modifiers[p], tween, targets[i], p);
+      }
+    }
+  }
+},
+    _buildModifierPlugin = function _buildModifierPlugin(name, modifier) {
+  return {
+    name: name,
+    rawVars: 1,
+    //don't pre-process function-based values or "random()" strings.
+    init: function init(target, vars, tween) {
+      tween._onInit = function (tween) {
+        var temp, p;
+
+        if (_isString(vars)) {
+          temp = {};
+
+          _forEachName(vars, function (name) {
+            return temp[name] = 1;
+          }); //if the user passes in a comma-delimited list of property names to roundProps, like "x,y", we round to whole numbers.
+
+
+          vars = temp;
+        }
+
+        if (modifier) {
+          temp = {};
+
+          for (p in vars) {
+            temp[p] = modifier(vars[p]);
+          }
+
+          vars = temp;
+        }
+
+        _addModifiers(tween, vars);
+      };
+    }
+  };
+}; //register core plugins
+
+
+var gsap = _gsap.registerPlugin({
+  name: "attr",
+  init: function init(target, vars, tween, index, targets) {
+    var p, pt;
+
+    for (p in vars) {
+      pt = this.add(target, "setAttribute", (target.getAttribute(p) || 0) + "", vars[p], index, targets, 0, 0, p);
+      pt && (pt.op = p); //this.add(target, "setAttribute", (target.getAttribute((p in target.dataset ? (p = "data-" + p) : p)) || 0) + "", vars[p], index, targets, 0, 0, p);
+
+      this._props.push(p);
+    }
+  }
+}, {
+  name: "endArray",
+  init: function init(target, value) {
+    var i = value.length;
+
+    while (i--) {
+      this.add(target, i, target[i] || 0, value[i]);
+    }
+  }
+}, _buildModifierPlugin("roundProps", _roundModifier), _buildModifierPlugin("modifiers"), _buildModifierPlugin("snap", snap)) || _gsap; //to prevent the core plugins from being dropped via aggressive tree shaking, we must include them in the variable declaration in this way.
+
+
+exports.default = exports.gsap = gsap;
+Tween.version = Timeline.version = gsap.version = "3.4.2";
+_coreReady = 1;
+
+if (_windowExists()) {
+  _wake();
+}
+
+var Power0 = _easeMap.Power0,
+    Power1 = _easeMap.Power1,
+    Power2 = _easeMap.Power2,
+    Power3 = _easeMap.Power3,
+    Power4 = _easeMap.Power4,
+    Linear = _easeMap.Linear,
+    Quad = _easeMap.Quad,
+    Cubic = _easeMap.Cubic,
+    Quart = _easeMap.Quart,
+    Quint = _easeMap.Quint,
+    Strong = _easeMap.Strong,
+    Elastic = _easeMap.Elastic,
+    Back = _easeMap.Back,
+    SteppedEase = _easeMap.SteppedEase,
+    Bounce = _easeMap.Bounce,
+    Sine = _easeMap.Sine,
+    Expo = _easeMap.Expo,
+    Circ = _easeMap.Circ;
+exports.Circ = Circ;
+exports.Expo = Expo;
+exports.Sine = Sine;
+exports.Bounce = Bounce;
+exports.SteppedEase = SteppedEase;
+exports.Back = Back;
+exports.Elastic = Elastic;
+exports.Strong = Strong;
+exports.Quint = Quint;
+exports.Quart = Quart;
+exports.Cubic = Cubic;
+exports.Quad = Quad;
+exports.Linear = Linear;
+exports.Power4 = Power4;
+exports.Power3 = Power3;
+exports.Power2 = Power2;
+exports.Power1 = Power1;
+exports.Power0 = Power0;
+},{}],"bp4Z":[function(require,module,exports) {
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.checkPrefix = exports._createElement = exports._getBBox = exports.default = exports.CSSPlugin = void 0;
+
+var _gsapCore = require("./gsap-core.js");
+
+/*!
+ * CSSPlugin 3.4.2
+ * https://greensock.com
+ *
+ * Copyright 2008-2020, GreenSock. All rights reserved.
+ * Subject to the terms at https://greensock.com/standard-license or for
+ * Club GreenSock members, the agreement issued with that membership.
+ * @author: Jack Doyle, jack@greensock.com
+*/
+
+/* eslint-disable */
+var _win,
+    _doc,
+    _docElement,
+    _pluginInitted,
+    _tempDiv,
+    _tempDivStyler,
+    _recentSetterPlugin,
+    _windowExists = function _windowExists() {
+  return typeof window !== "undefined";
+},
+    _transformProps = {},
+    _RAD2DEG = 180 / Math.PI,
+    _DEG2RAD = Math.PI / 180,
+    _atan2 = Math.atan2,
+    _bigNum = 1e8,
+    _capsExp = /([A-Z])/g,
+    _horizontalExp = /(?:left|right|width|margin|padding|x)/i,
+    _complexExp = /[\s,\(]\S/,
+    _propertyAliases = {
+  autoAlpha: "opacity,visibility",
+  scale: "scaleX,scaleY",
+  alpha: "opacity"
+},
+    _renderCSSProp = function _renderCSSProp(ratio, data) {
+  return data.set(data.t, data.p, Math.round((data.s + data.c * ratio) * 10000) / 10000 + data.u, data);
+},
+    _renderPropWithEnd = function _renderPropWithEnd(ratio, data) {
+  return data.set(data.t, data.p, ratio === 1 ? data.e : Math.round((data.s + data.c * ratio) * 10000) / 10000 + data.u, data);
+},
+    _renderCSSPropWithBeginning = function _renderCSSPropWithBeginning(ratio, data) {
+  return data.set(data.t, data.p, ratio ? Math.round((data.s + data.c * ratio) * 10000) / 10000 + data.u : data.b, data);
+},
+    //if units change, we need a way to render the original unit/value when the tween goes all the way back to the beginning (ratio:0)
+_renderRoundedCSSProp = function _renderRoundedCSSProp(ratio, data) {
+  var value = data.s + data.c * ratio;
+  data.set(data.t, data.p, ~~(value + (value < 0 ? -.5 : .5)) + data.u, data);
+},
+    _renderNonTweeningValue = function _renderNonTweeningValue(ratio, data) {
+  return data.set(data.t, data.p, ratio ? data.e : data.b, data);
+},
+    _renderNonTweeningValueOnlyAtEnd = function _renderNonTweeningValueOnlyAtEnd(ratio, data) {
+  return data.set(data.t, data.p, ratio !== 1 ? data.b : data.e, data);
+},
+    _setterCSSStyle = function _setterCSSStyle(target, property, value) {
+  return target.style[property] = value;
+},
+    _setterCSSProp = function _setterCSSProp(target, property, value) {
+  return target.style.setProperty(property, value);
+},
+    _setterTransform = function _setterTransform(target, property, value) {
+  return target._gsap[property] = value;
+},
+    _setterScale = function _setterScale(target, property, value) {
+  return target._gsap.scaleX = target._gsap.scaleY = value;
+},
+    _setterScaleWithRender = function _setterScaleWithRender(target, property, value, data, ratio) {
+  var cache = target._gsap;
+  cache.scaleX = cache.scaleY = value;
+  cache.renderTransform(ratio, cache);
+},
+    _setterTransformWithRender = function _setterTransformWithRender(target, property, value, data, ratio) {
+  var cache = target._gsap;
+  cache[property] = value;
+  cache.renderTransform(ratio, cache);
+},
+    _transformProp = "transform",
+    _transformOriginProp = _transformProp + "Origin",
+    _supports3D,
+    _createElement = function _createElement(type, ns) {
+  var e = _doc.createElementNS ? _doc.createElementNS((ns || "http://www.w3.org/1999/xhtml").replace(/^https/, "http"), type) : _doc.createElement(type); //some servers swap in https for http in the namespace which can break things, making "style" inaccessible.
+
+  return e.style ? e : _doc.createElement(type); //some environments won't allow access to the element's style when created with a namespace in which case we default to the standard createElement() to work around the issue. Also note that when GSAP is embedded directly inside an SVG file, createElement() won't allow access to the style object in Firefox (see https://greensock.com/forums/topic/20215-problem-using-tweenmax-in-standalone-self-containing-svg-file-err-cannot-set-property-csstext-of-undefined/).
+},
+    _getComputedProperty = function _getComputedProperty(target, property, skipPrefixFallback) {
+  var cs = getComputedStyle(target);
+  return cs[property] || cs.getPropertyValue(property.replace(_capsExp, "-$1").toLowerCase()) || cs.getPropertyValue(property) || !skipPrefixFallback && _getComputedProperty(target, _checkPropPrefix(property) || property, 1) || ""; //css variables may not need caps swapped out for dashes and lowercase.
+},
+    _prefixes = "O,Moz,ms,Ms,Webkit".split(","),
+    _checkPropPrefix = function _checkPropPrefix(property, element, preferPrefix) {
+  var e = element || _tempDiv,
+      s = e.style,
+      i = 5;
+
+  if (property in s && !preferPrefix) {
+    return property;
+  }
+
+  property = property.charAt(0).toUpperCase() + property.substr(1);
+
+  while (i-- && !(_prefixes[i] + property in s)) {}
+
+  return i < 0 ? null : (i === 3 ? "ms" : i >= 0 ? _prefixes[i] : "") + property;
+},
+    _initCore = function _initCore() {
+  if (_windowExists() && window.document) {
+    _win = window;
+    _doc = _win.document;
+    _docElement = _doc.documentElement;
+    _tempDiv = _createElement("div") || {
+      style: {}
+    };
+    _tempDivStyler = _createElement("div");
+    _transformProp = _checkPropPrefix(_transformProp);
+    _transformOriginProp = _transformProp + "Origin";
+    _tempDiv.style.cssText = "border-width:0;line-height:0;position:absolute;padding:0"; //make sure to override certain properties that may contaminate measurements, in case the user has overreaching style sheets.
+
+    _supports3D = !!_checkPropPrefix("perspective");
+    _pluginInitted = 1;
+  }
+},
+    _getBBoxHack = function _getBBoxHack(swapIfPossible) {
+  //works around issues in some browsers (like Firefox) that don't correctly report getBBox() on SVG elements inside a <defs> element and/or <mask>. We try creating an SVG, adding it to the documentElement and toss the element in there so that it's definitely part of the rendering tree, then grab the bbox and if it works, we actually swap out the original getBBox() method for our own that does these extra steps whenever getBBox is needed. This helps ensure that performance is optimal (only do all these extra steps when absolutely necessary...most elements don't need it).
+  var svg = _createElement("svg", this.ownerSVGElement && this.ownerSVGElement.getAttribute("xmlns") || "http://www.w3.org/2000/svg"),
+      oldParent = this.parentNode,
+      oldSibling = this.nextSibling,
+      oldCSS = this.style.cssText,
+      bbox;
+
+  _docElement.appendChild(svg);
+
+  svg.appendChild(this);
+  this.style.display = "block";
+
+  if (swapIfPossible) {
+    try {
+      bbox = this.getBBox();
+      this._gsapBBox = this.getBBox; //store the original
+
+      this.getBBox = _getBBoxHack;
+    } catch (e) {}
+  } else if (this._gsapBBox) {
+    bbox = this._gsapBBox();
+  }
+
+  if (oldParent) {
+    if (oldSibling) {
+      oldParent.insertBefore(this, oldSibling);
+    } else {
+      oldParent.appendChild(this);
+    }
+  }
+
+  _docElement.removeChild(svg);
+
+  this.style.cssText = oldCSS;
+  return bbox;
+},
+    _getAttributeFallbacks = function _getAttributeFallbacks(target, attributesArray) {
+  var i = attributesArray.length;
+
+  while (i--) {
+    if (target.hasAttribute(attributesArray[i])) {
+      return target.getAttribute(attributesArray[i]);
+    }
+  }
+},
+    _getBBox = function _getBBox(target) {
+  var bounds;
+
+  try {
+    bounds = target.getBBox(); //Firefox throws errors if you try calling getBBox() on an SVG element that's not rendered (like in a <symbol> or <defs>). https://bugzilla.mozilla.org/show_bug.cgi?id=612118
+  } catch (error) {
+    bounds = _getBBoxHack.call(target, true);
+  }
+
+  bounds && (bounds.width || bounds.height) || target.getBBox === _getBBoxHack || (bounds = _getBBoxHack.call(target, true)); //some browsers (like Firefox) misreport the bounds if the element has zero width and height (it just assumes it's at x:0, y:0), thus we need to manually grab the position in that case.
+
+  return bounds && !bounds.width && !bounds.x && !bounds.y ? {
+    x: +_getAttributeFallbacks(target, ["x", "cx", "x1"]) || 0,
+    y: +_getAttributeFallbacks(target, ["y", "cy", "y1"]) || 0,
+    width: 0,
+    height: 0
+  } : bounds;
+},
+    _isSVG = function _isSVG(e) {
+  return !!(e.getCTM && (!e.parentNode || e.ownerSVGElement) && _getBBox(e));
+},
+    //reports if the element is an SVG on which getBBox() actually works
+_removeProperty = function _removeProperty(target, property) {
+  if (property) {
+    var style = target.style;
+
+    if (property in _transformProps && property !== _transformOriginProp) {
+      property = _transformProp;
+    }
+
+    if (style.removeProperty) {
+      if (property.substr(0, 2) === "ms" || property.substr(0, 6) === "webkit") {
+        //Microsoft and some Webkit browsers don't conform to the standard of capitalizing the first prefix character, so we adjust so that when we prefix the caps with a dash, it's correct (otherwise it'd be "ms-transform" instead of "-ms-transform" for IE9, for example)
+        property = "-" + property;
+      }
+
+      style.removeProperty(property.replace(_capsExp, "-$1").toLowerCase());
+    } else {
+      //note: old versions of IE use "removeAttribute()" instead of "removeProperty()"
+      style.removeAttribute(property);
+    }
+  }
+},
+    _addNonTweeningPT = function _addNonTweeningPT(plugin, target, property, beginning, end, onlySetAtEnd) {
+  var pt = new _gsapCore.PropTween(plugin._pt, target, property, 0, 1, onlySetAtEnd ? _renderNonTweeningValueOnlyAtEnd : _renderNonTweeningValue);
+  plugin._pt = pt;
+  pt.b = beginning;
+  pt.e = end;
+
+  plugin._props.push(property);
+
+  return pt;
+},
+    _nonConvertibleUnits = {
+  deg: 1,
+  rad: 1,
+  turn: 1
+},
+    //takes a single value like 20px and converts it to the unit specified, like "%", returning only the numeric amount.
+_convertToUnit = function _convertToUnit(target, property, value, unit) {
+  var curValue = parseFloat(value) || 0,
+      curUnit = (value + "").trim().substr((curValue + "").length) || "px",
+      // some browsers leave extra whitespace at the beginning of CSS variables, hence the need to trim()
+  style = _tempDiv.style,
+      horizontal = _horizontalExp.test(property),
+      isRootSVG = target.tagName.toLowerCase() === "svg",
+      measureProperty = (isRootSVG ? "client" : "offset") + (horizontal ? "Width" : "Height"),
+      amount = 100,
+      toPixels = unit === "px",
+      toPercent = unit === "%",
+      px,
+      parent,
+      cache,
+      isSVG;
+
+  if (unit === curUnit || !curValue || _nonConvertibleUnits[unit] || _nonConvertibleUnits[curUnit]) {
+    return curValue;
+  }
+
+  curUnit !== "px" && !toPixels && (curValue = _convertToUnit(target, property, value, "px"));
+  isSVG = target.getCTM && _isSVG(target);
+
+  if (toPercent && (_transformProps[property] || ~property.indexOf("adius"))) {
+    //transforms and borderRadius are relative to the size of the element itself!
+    return (0, _gsapCore._round)(curValue / (isSVG ? target.getBBox()[horizontal ? "width" : "height"] : target[measureProperty]) * amount);
+  }
+
+  style[horizontal ? "width" : "height"] = amount + (toPixels ? curUnit : unit);
+  parent = ~property.indexOf("adius") || unit === "em" && target.appendChild && !isRootSVG ? target : target.parentNode;
+
+  if (isSVG) {
+    parent = (target.ownerSVGElement || {}).parentNode;
+  }
+
+  if (!parent || parent === _doc || !parent.appendChild) {
+    parent = _doc.body;
+  }
+
+  cache = parent._gsap;
+
+  if (cache && toPercent && cache.width && horizontal && cache.time === _gsapCore._ticker.time) {
+    return (0, _gsapCore._round)(curValue / cache.width * amount);
+  } else {
+    (toPercent || curUnit === "%") && (style.position = _getComputedProperty(target, "position"));
+    parent === target && (style.position = "static"); // like for borderRadius, if it's a % we must have it relative to the target itself but that may not have position: relative or position: absolute in which case it'd go up the chain until it finds its offsetParent (bad). position: static protects against that.
+
+    parent.appendChild(_tempDiv);
+    px = _tempDiv[measureProperty];
+    parent.removeChild(_tempDiv);
+    style.position = "absolute";
+
+    if (horizontal && toPercent) {
+      cache = (0, _gsapCore._getCache)(parent);
+      cache.time = _gsapCore._ticker.time;
+      cache.width = parent[measureProperty];
+    }
+  }
+
+  return (0, _gsapCore._round)(toPixels ? px * curValue / amount : px && curValue ? amount / px * curValue : 0);
+},
+    _get = function _get(target, property, unit, uncache) {
+  var value;
+  _pluginInitted || _initCore();
+
+  if (property in _propertyAliases && property !== "transform") {
+    property = _propertyAliases[property];
+
+    if (~property.indexOf(",")) {
+      property = property.split(",")[0];
+    }
+  }
+
+  if (_transformProps[property] && property !== "transform") {
+    value = _parseTransform(target, uncache);
+    value = property !== "transformOrigin" ? value[property] : _firstTwoOnly(_getComputedProperty(target, _transformOriginProp)) + " " + value.zOrigin + "px";
+  } else {
+    value = target.style[property];
+
+    if (!value || value === "auto" || uncache || ~(value + "").indexOf("calc(")) {
+      value = _specialProps[property] && _specialProps[property](target, property, unit) || _getComputedProperty(target, property) || (0, _gsapCore._getProperty)(target, property) || (property === "opacity" ? 1 : 0); // note: some browsers, like Firefox, don't report borderRadius correctly! Instead, it only reports every corner like  borderTopLeftRadius
+    }
+  }
+
+  return unit && !~(value + "").indexOf(" ") ? _convertToUnit(target, property, value, unit) + unit : value;
+},
+    _tweenComplexCSSString = function _tweenComplexCSSString(target, prop, start, end) {
+  //note: we call _tweenComplexCSSString.call(pluginInstance...) to ensure that it's scoped properly. We may call it from within a plugin too, thus "this" would refer to the plugin.
+  if (!start || start === "none") {
+    // some browsers like Safari actually PREFER the prefixed property and mis-report the unprefixed value like clipPath (BUG). In other words, even though clipPath exists in the style ("clipPath" in target.style) and it's set in the CSS properly (along with -webkit-clip-path), Safari reports clipPath as "none" whereas WebkitClipPath reports accurately like "ellipse(100% 0% at 50% 0%)", so in this case we must SWITCH to using the prefixed property instead. See https://greensock.com/forums/topic/18310-clippath-doesnt-work-on-ios/
+    var p = _checkPropPrefix(prop, target, 1),
+        s = p && _getComputedProperty(target, p, 1);
+
+    if (s && s !== start) {
+      prop = p;
+      start = s;
+    } else if (prop === "borderColor") {
+      start = _getComputedProperty(target, "borderTopColor"); // Firefox bug: always reports "borderColor" as "", so we must fall back to borderTopColor. See https://greensock.com/forums/topic/24583-how-to-return-colors-that-i-had-after-reverse/
+    }
+  }
+
+  var pt = new _gsapCore.PropTween(this._pt, target.style, prop, 0, 1, _gsapCore._renderComplexString),
+      index = 0,
+      matchIndex = 0,
+      a,
+      result,
+      startValues,
+      startNum,
+      color,
+      startValue,
+      endValue,
+      endNum,
+      chunk,
+      endUnit,
+      startUnit,
+      relative,
+      endValues;
+  pt.b = start;
+  pt.e = end;
+  start += ""; //ensure values are strings
+
+  end += "";
+
+  if (end === "auto") {
+    target.style[prop] = end;
+    end = _getComputedProperty(target, prop) || end;
+    target.style[prop] = start;
+  }
+
+  a = [start, end];
+  (0, _gsapCore._colorStringFilter)(a); //pass an array with the starting and ending values and let the filter do whatever it needs to the values. If colors are found, it returns true and then we must match where the color shows up order-wise because for things like boxShadow, sometimes the browser provides the computed values with the color FIRST, but the user provides it with the color LAST, so flip them if necessary. Same for drop-shadow().
+
+  start = a[0];
+  end = a[1];
+  startValues = start.match(_gsapCore._numWithUnitExp) || [];
+  endValues = end.match(_gsapCore._numWithUnitExp) || [];
+
+  if (endValues.length) {
+    while (result = _gsapCore._numWithUnitExp.exec(end)) {
+      endValue = result[0];
+      chunk = end.substring(index, result.index);
+
+      if (color) {
+        color = (color + 1) % 5;
+      } else if (chunk.substr(-5) === "rgba(" || chunk.substr(-5) === "hsla(") {
+        color = 1;
+      }
+
+      if (endValue !== (startValue = startValues[matchIndex++] || "")) {
+        startNum = parseFloat(startValue) || 0;
+        startUnit = startValue.substr((startNum + "").length);
+        relative = endValue.charAt(1) === "=" ? +(endValue.charAt(0) + "1") : 0;
+
+        if (relative) {
+          endValue = endValue.substr(2);
+        }
+
+        endNum = parseFloat(endValue);
+        endUnit = endValue.substr((endNum + "").length);
+        index = _gsapCore._numWithUnitExp.lastIndex - endUnit.length;
+
+        if (!endUnit) {
+          //if something like "perspective:300" is passed in and we must add a unit to the end
+          endUnit = endUnit || _gsapCore._config.units[prop] || startUnit;
+
+          if (index === end.length) {
+            end += endUnit;
+            pt.e += endUnit;
+          }
+        }
+
+        if (startUnit !== endUnit) {
+          startNum = _convertToUnit(target, prop, startValue, endUnit) || 0;
+        } //these nested PropTweens are handled in a special way - we'll never actually call a render or setter method on them. We'll just loop through them in the parent complex string PropTween's render method.
+
+
+        pt._pt = {
+          _next: pt._pt,
+          p: chunk || matchIndex === 1 ? chunk : ",",
+          //note: SVG spec allows omission of comma/space when a negative sign is wedged between two numbers, like 2.5-5.3 instead of 2.5,-5.3 but when tweening, the negative value may switch to positive, so we insert the comma just in case.
+          s: startNum,
+          c: relative ? relative * endNum : endNum - startNum,
+          m: color && color < 4 ? Math.round : 0
+        };
+      }
+    }
+
+    pt.c = index < end.length ? end.substring(index, end.length) : ""; //we use the "c" of the PropTween to store the final part of the string (after the last number)
+  } else {
+    pt.r = prop === "display" && end === "none" ? _renderNonTweeningValueOnlyAtEnd : _renderNonTweeningValue;
+  }
+
+  if (_gsapCore._relExp.test(end)) {
+    pt.e = 0; //if the end string contains relative values or dynamic random(...) values, delete the end it so that on the final render we don't actually set it to the string with += or -= characters (forces it to use the calculated value).
+  }
+
+  this._pt = pt; //start the linked list with this new PropTween. Remember, we call _tweenComplexCSSString.call(pluginInstance...) to ensure that it's scoped properly. We may call it from within another plugin too, thus "this" would refer to the plugin.
+
+  return pt;
+},
+    _keywordToPercent = {
+  top: "0%",
+  bottom: "100%",
+  left: "0%",
+  right: "100%",
+  center: "50%"
+},
+    _convertKeywordsToPercentages = function _convertKeywordsToPercentages(value) {
+  var split = value.split(" "),
+      x = split[0],
+      y = split[1] || "50%";
+
+  if (x === "top" || x === "bottom" || y === "left" || y === "right") {
+    //the user provided them in the wrong order, so flip them
+    value = x;
+    x = y;
+    y = value;
+  }
+
+  split[0] = _keywordToPercent[x] || x;
+  split[1] = _keywordToPercent[y] || y;
+  return split.join(" ");
+},
+    _renderClearProps = function _renderClearProps(ratio, data) {
+  if (data.tween && data.tween._time === data.tween._dur) {
+    var target = data.t,
+        style = target.style,
+        props = data.u,
+        cache = target._gsap,
+        prop,
+        clearTransforms,
+        i;
+
+    if (props === "all" || props === true) {
+      style.cssText = "";
+      clearTransforms = 1;
+    } else {
+      props = props.split(",");
+      i = props.length;
+
+      while (--i > -1) {
+        prop = props[i];
+
+        if (_transformProps[prop]) {
+          clearTransforms = 1;
+          prop = prop === "transformOrigin" ? _transformOriginProp : _transformProp;
+        }
+
+        _removeProperty(target, prop);
+      }
+    }
+
+    if (clearTransforms) {
+      _removeProperty(target, _transformProp);
+
+      if (cache) {
+        cache.svg && target.removeAttribute("transform");
+
+        _parseTransform(target, 1); // force all the cached values back to "normal"/identity, otherwise if there's another tween that's already set to render transforms on this element, it could display the wrong values.
+
+
+        cache.uncache = 1;
+      }
+    }
+  }
+},
+    // note: specialProps should return 1 if (and only if) they have a non-zero priority. It indicates we need to sort the linked list.
+_specialProps = {
+  clearProps: function clearProps(plugin, target, property, endValue, tween) {
+    if (tween.data !== "isFromStart") {
+      var pt = plugin._pt = new _gsapCore.PropTween(plugin._pt, target, property, 0, 0, _renderClearProps);
+      pt.u = endValue;
+      pt.pr = -10;
+      pt.tween = tween;
+
+      plugin._props.push(property);
+
+      return 1;
+    }
+  }
+  /* className feature (about 0.4kb gzipped).
+  , className(plugin, target, property, endValue, tween) {
+  	let _renderClassName = (ratio, data) => {
+  			data.css.render(ratio, data.css);
+  			if (!ratio || ratio === 1) {
+  				let inline = data.rmv,
+  					target = data.t,
+  					p;
+  				target.setAttribute("class", ratio ? data.e : data.b);
+  				for (p in inline) {
+  					_removeProperty(target, p);
+  				}
+  			}
+  		},
+  		_getAllStyles = (target) => {
+  			let styles = {},
+  				computed = getComputedStyle(target),
+  				p;
+  			for (p in computed) {
+  				if (isNaN(p) && p !== "cssText" && p !== "length") {
+  					styles[p] = computed[p];
+  				}
+  			}
+  			_setDefaults(styles, _parseTransform(target, 1));
+  			return styles;
+  		},
+  		startClassList = target.getAttribute("class"),
+  		style = target.style,
+  		cssText = style.cssText,
+  		cache = target._gsap,
+  		classPT = cache.classPT,
+  		inlineToRemoveAtEnd = {},
+  		data = {t:target, plugin:plugin, rmv:inlineToRemoveAtEnd, b:startClassList, e:(endValue.charAt(1) !== "=") ? endValue : startClassList.replace(new RegExp("(?:\\s|^)" + endValue.substr(2) + "(?![\\w-])"), "") + ((endValue.charAt(0) === "+") ? " " + endValue.substr(2) : "")},
+  		changingVars = {},
+  		startVars = _getAllStyles(target),
+  		transformRelated = /(transform|perspective)/i,
+  		endVars, p;
+  	if (classPT) {
+  		classPT.r(1, classPT.d);
+  		_removeLinkedListItem(classPT.d.plugin, classPT, "_pt");
+  	}
+  	target.setAttribute("class", data.e);
+  	endVars = _getAllStyles(target, true);
+  	target.setAttribute("class", startClassList);
+  	for (p in endVars) {
+  		if (endVars[p] !== startVars[p] && !transformRelated.test(p)) {
+  			changingVars[p] = endVars[p];
+  			if (!style[p] && style[p] !== "0") {
+  				inlineToRemoveAtEnd[p] = 1;
+  			}
+  		}
+  	}
+  	cache.classPT = plugin._pt = new PropTween(plugin._pt, target, "className", 0, 0, _renderClassName, data, 0, -11);
+  	if (style.cssText !== cssText) { //only apply if things change. Otherwise, in cases like a background-image that's pulled dynamically, it could cause a refresh. See https://greensock.com/forums/topic/20368-possible-gsap-bug-switching-classnames-in-chrome/.
+  		style.cssText = cssText; //we recorded cssText before we swapped classes and ran _getAllStyles() because in cases when a className tween is overwritten, we remove all the related tweening properties from that class change (otherwise class-specific stuff can't override properties we've directly set on the target's style object due to specificity).
+  	}
+  	_parseTransform(target, true); //to clear the caching of transforms
+  	data.css = new gsap.plugins.css();
+  	data.css.init(target, changingVars, tween);
+  	plugin._props.push(...data.css._props);
+  	return 1;
+  }
+  */
+
+},
+
+/*
+ * --------------------------------------------------------------------------------------
+ * TRANSFORMS
+ * --------------------------------------------------------------------------------------
+ */
+_identity2DMatrix = [1, 0, 0, 1, 0, 0],
+    _rotationalProperties = {},
+    _isNullTransform = function _isNullTransform(value) {
+  return value === "matrix(1, 0, 0, 1, 0, 0)" || value === "none" || !value;
+},
+    _getComputedTransformMatrixAsArray = function _getComputedTransformMatrixAsArray(target) {
+  var matrixString = _getComputedProperty(target, _transformProp);
+
+  return _isNullTransform(matrixString) ? _identity2DMatrix : matrixString.substr(7).match(_gsapCore._numExp).map(_gsapCore._round);
+},
+    _getMatrix = function _getMatrix(target, force2D) {
+  var cache = target._gsap || (0, _gsapCore._getCache)(target),
+      style = target.style,
+      matrix = _getComputedTransformMatrixAsArray(target),
+      parent,
+      nextSibling,
+      temp,
+      addedToDOM;
+
+  if (cache.svg && target.getAttribute("transform")) {
+    temp = target.transform.baseVal.consolidate().matrix; //ensures that even complex values like "translate(50,60) rotate(135,0,0)" are parsed because it mashes it into a matrix.
+
+    matrix = [temp.a, temp.b, temp.c, temp.d, temp.e, temp.f];
+    return matrix.join(",") === "1,0,0,1,0,0" ? _identity2DMatrix : matrix;
+  } else if (matrix === _identity2DMatrix && !target.offsetParent && target !== _docElement && !cache.svg) {
+    //note: if offsetParent is null, that means the element isn't in the normal document flow, like if it has display:none or one of its ancestors has display:none). Firefox returns null for getComputedStyle() if the element is in an iframe that has display:none. https://bugzilla.mozilla.org/show_bug.cgi?id=548397
+    //browsers don't report transforms accurately unless the element is in the DOM and has a display value that's not "none". Firefox and Microsoft browsers have a partial bug where they'll report transforms even if display:none BUT not any percentage-based values like translate(-50%, 8px) will be reported as if it's translate(0, 8px).
+    temp = style.display;
+    style.display = "block";
+    parent = target.parentNode;
+
+    if (!parent || !target.offsetParent) {
+      // note: in 3.3.0 we switched target.offsetParent to _doc.body.contains(target) to avoid [sometimes unnecessary] MutationObserver calls but that wasn't adequate because there are edge cases where nested position: fixed elements need to get reparented to accurately sense transforms. See https://github.com/greensock/GSAP/issues/388 and https://github.com/greensock/GSAP/issues/375
+      addedToDOM = 1; //flag
+
+      nextSibling = target.nextSibling;
+
+      _docElement.appendChild(target); //we must add it to the DOM in order to get values properly
+
+    }
+
+    matrix = _getComputedTransformMatrixAsArray(target);
+    temp ? style.display = temp : _removeProperty(target, "display");
+
+    if (addedToDOM) {
+      nextSibling ? parent.insertBefore(target, nextSibling) : parent ? parent.appendChild(target) : _docElement.removeChild(target);
+    }
+  }
+
+  return force2D && matrix.length > 6 ? [matrix[0], matrix[1], matrix[4], matrix[5], matrix[12], matrix[13]] : matrix;
+},
+    _applySVGOrigin = function _applySVGOrigin(target, origin, originIsAbsolute, smooth, matrixArray, pluginToAddPropTweensTo) {
+  var cache = target._gsap,
+      matrix = matrixArray || _getMatrix(target, true),
+      xOriginOld = cache.xOrigin || 0,
+      yOriginOld = cache.yOrigin || 0,
+      xOffsetOld = cache.xOffset || 0,
+      yOffsetOld = cache.yOffset || 0,
+      a = matrix[0],
+      b = matrix[1],
+      c = matrix[2],
+      d = matrix[3],
+      tx = matrix[4],
+      ty = matrix[5],
+      originSplit = origin.split(" "),
+      xOrigin = parseFloat(originSplit[0]) || 0,
+      yOrigin = parseFloat(originSplit[1]) || 0,
+      bounds,
+      determinant,
+      x,
+      y;
+
+  if (!originIsAbsolute) {
+    bounds = _getBBox(target);
+    xOrigin = bounds.x + (~originSplit[0].indexOf("%") ? xOrigin / 100 * bounds.width : xOrigin);
+    yOrigin = bounds.y + (~(originSplit[1] || originSplit[0]).indexOf("%") ? yOrigin / 100 * bounds.height : yOrigin);
+  } else if (matrix !== _identity2DMatrix && (determinant = a * d - b * c)) {
+    //if it's zero (like if scaleX and scaleY are zero), skip it to avoid errors with dividing by zero.
+    x = xOrigin * (d / determinant) + yOrigin * (-c / determinant) + (c * ty - d * tx) / determinant;
+    y = xOrigin * (-b / determinant) + yOrigin * (a / determinant) - (a * ty - b * tx) / determinant;
+    xOrigin = x;
+    yOrigin = y;
+  }
+
+  if (smooth || smooth !== false && cache.smooth) {
+    tx = xOrigin - xOriginOld;
+    ty = yOrigin - yOriginOld;
+    cache.xOffset = xOffsetOld + (tx * a + ty * c) - tx;
+    cache.yOffset = yOffsetOld + (tx * b + ty * d) - ty;
+  } else {
+    cache.xOffset = cache.yOffset = 0;
+  }
+
+  cache.xOrigin = xOrigin;
+  cache.yOrigin = yOrigin;
+  cache.smooth = !!smooth;
+  cache.origin = origin;
+  cache.originIsAbsolute = !!originIsAbsolute;
+  target.style[_transformOriginProp] = "0px 0px"; //otherwise, if someone sets  an origin via CSS, it will likely interfere with the SVG transform attribute ones (because remember, we're baking the origin into the matrix() value).
+
+  if (pluginToAddPropTweensTo) {
+    _addNonTweeningPT(pluginToAddPropTweensTo, cache, "xOrigin", xOriginOld, xOrigin);
+
+    _addNonTweeningPT(pluginToAddPropTweensTo, cache, "yOrigin", yOriginOld, yOrigin);
+
+    _addNonTweeningPT(pluginToAddPropTweensTo, cache, "xOffset", xOffsetOld, cache.xOffset);
+
+    _addNonTweeningPT(pluginToAddPropTweensTo, cache, "yOffset", yOffsetOld, cache.yOffset);
+  }
+
+  target.setAttribute("data-svg-origin", xOrigin + " " + yOrigin);
+},
+    _parseTransform = function _parseTransform(target, uncache) {
+  var cache = target._gsap || new _gsapCore.GSCache(target);
+
+  if ("x" in cache && !uncache && !cache.uncache) {
+    return cache;
+  }
+
+  var style = target.style,
+      invertedScaleX = cache.scaleX < 0,
+      px = "px",
+      deg = "deg",
+      origin = _getComputedProperty(target, _transformOriginProp) || "0",
+      x,
+      y,
+      z,
+      scaleX,
+      scaleY,
+      rotation,
+      rotationX,
+      rotationY,
+      skewX,
+      skewY,
+      perspective,
+      xOrigin,
+      yOrigin,
+      matrix,
+      angle,
+      cos,
+      sin,
+      a,
+      b,
+      c,
+      d,
+      a12,
+      a22,
+      t1,
+      t2,
+      t3,
+      a13,
+      a23,
+      a33,
+      a42,
+      a43,
+      a32;
+  x = y = z = rotation = rotationX = rotationY = skewX = skewY = perspective = 0;
+  scaleX = scaleY = 1;
+  cache.svg = !!(target.getCTM && _isSVG(target));
+  matrix = _getMatrix(target, cache.svg);
+
+  if (cache.svg) {
+    t1 = !cache.uncache && target.getAttribute("data-svg-origin");
+
+    _applySVGOrigin(target, t1 || origin, !!t1 || cache.originIsAbsolute, cache.smooth !== false, matrix);
+  }
+
+  xOrigin = cache.xOrigin || 0;
+  yOrigin = cache.yOrigin || 0;
+
+  if (matrix !== _identity2DMatrix) {
+    a = matrix[0]; //a11
+
+    b = matrix[1]; //a21
+
+    c = matrix[2]; //a31
+
+    d = matrix[3]; //a41
+
+    x = a12 = matrix[4];
+    y = a22 = matrix[5]; //2D matrix
+
+    if (matrix.length === 6) {
+      scaleX = Math.sqrt(a * a + b * b);
+      scaleY = Math.sqrt(d * d + c * c);
+      rotation = a || b ? _atan2(b, a) * _RAD2DEG : 0; //note: if scaleX is 0, we cannot accurately measure rotation. Same for skewX with a scaleY of 0. Therefore, we default to the previously recorded value (or zero if that doesn't exist).
+
+      skewX = c || d ? _atan2(c, d) * _RAD2DEG + rotation : 0;
+      skewX && (scaleY *= Math.cos(skewX * _DEG2RAD));
+
+      if (cache.svg) {
+        x -= xOrigin - (xOrigin * a + yOrigin * c);
+        y -= yOrigin - (xOrigin * b + yOrigin * d);
+      } //3D matrix
+
+    } else {
+      a32 = matrix[6];
+      a42 = matrix[7];
+      a13 = matrix[8];
+      a23 = matrix[9];
+      a33 = matrix[10];
+      a43 = matrix[11];
+      x = matrix[12];
+      y = matrix[13];
+      z = matrix[14];
+      angle = _atan2(a32, a33);
+      rotationX = angle * _RAD2DEG; //rotationX
+
+      if (angle) {
+        cos = Math.cos(-angle);
+        sin = Math.sin(-angle);
+        t1 = a12 * cos + a13 * sin;
+        t2 = a22 * cos + a23 * sin;
+        t3 = a32 * cos + a33 * sin;
+        a13 = a12 * -sin + a13 * cos;
+        a23 = a22 * -sin + a23 * cos;
+        a33 = a32 * -sin + a33 * cos;
+        a43 = a42 * -sin + a43 * cos;
+        a12 = t1;
+        a22 = t2;
+        a32 = t3;
+      } //rotationY
+
+
+      angle = _atan2(-c, a33);
+      rotationY = angle * _RAD2DEG;
+
+      if (angle) {
+        cos = Math.cos(-angle);
+        sin = Math.sin(-angle);
+        t1 = a * cos - a13 * sin;
+        t2 = b * cos - a23 * sin;
+        t3 = c * cos - a33 * sin;
+        a43 = d * sin + a43 * cos;
+        a = t1;
+        b = t2;
+        c = t3;
+      } //rotationZ
+
+
+      angle = _atan2(b, a);
+      rotation = angle * _RAD2DEG;
+
+      if (angle) {
+        cos = Math.cos(angle);
+        sin = Math.sin(angle);
+        t1 = a * cos + b * sin;
+        t2 = a12 * cos + a22 * sin;
+        b = b * cos - a * sin;
+        a22 = a22 * cos - a12 * sin;
+        a = t1;
+        a12 = t2;
+      }
+
+      if (rotationX && Math.abs(rotationX) + Math.abs(rotation) > 359.9) {
+        //when rotationY is set, it will often be parsed as 180 degrees different than it should be, and rotationX and rotation both being 180 (it looks the same), so we adjust for that here.
+        rotationX = rotation = 0;
+        rotationY = 180 - rotationY;
+      }
+
+      scaleX = (0, _gsapCore._round)(Math.sqrt(a * a + b * b + c * c));
+      scaleY = (0, _gsapCore._round)(Math.sqrt(a22 * a22 + a32 * a32));
+      angle = _atan2(a12, a22);
+      skewX = Math.abs(angle) > 0.0002 ? angle * _RAD2DEG : 0;
+      perspective = a43 ? 1 / (a43 < 0 ? -a43 : a43) : 0;
+    }
+
+    if (cache.svg) {
+      //sense if there are CSS transforms applied on an SVG element in which case we must overwrite them when rendering. The transform attribute is more reliable cross-browser, but we can't just remove the CSS ones because they may be applied in a CSS rule somewhere (not just inline).
+      t1 = target.getAttribute("transform");
+      cache.forceCSS = target.setAttribute("transform", "") || !_isNullTransform(_getComputedProperty(target, _transformProp));
+      t1 && target.setAttribute("transform", t1);
+    }
+  }
+
+  if (Math.abs(skewX) > 90 && Math.abs(skewX) < 270) {
+    if (invertedScaleX) {
+      scaleX *= -1;
+      skewX += rotation <= 0 ? 180 : -180;
+      rotation += rotation <= 0 ? 180 : -180;
+    } else {
+      scaleY *= -1;
+      skewX += skewX <= 0 ? 180 : -180;
+    }
+  }
+
+  cache.x = ((cache.xPercent = x && Math.round(target.offsetWidth / 2) === Math.round(-x) ? -50 : 0) ? 0 : x) + px;
+  cache.y = ((cache.yPercent = y && Math.round(target.offsetHeight / 2) === Math.round(-y) ? -50 : 0) ? 0 : y) + px;
+  cache.z = z + px;
+  cache.scaleX = (0, _gsapCore._round)(scaleX);
+  cache.scaleY = (0, _gsapCore._round)(scaleY);
+  cache.rotation = (0, _gsapCore._round)(rotation) + deg;
+  cache.rotationX = (0, _gsapCore._round)(rotationX) + deg;
+  cache.rotationY = (0, _gsapCore._round)(rotationY) + deg;
+  cache.skewX = skewX + deg;
+  cache.skewY = skewY + deg;
+  cache.transformPerspective = perspective + px;
+
+  if (cache.zOrigin = parseFloat(origin.split(" ")[2]) || 0) {
+    style[_transformOriginProp] = _firstTwoOnly(origin);
+  }
+
+  cache.xOffset = cache.yOffset = 0;
+  cache.force3D = _gsapCore._config.force3D;
+  cache.renderTransform = cache.svg ? _renderSVGTransforms : _supports3D ? _renderCSSTransforms : _renderNon3DTransforms;
+  cache.uncache = 0;
+  return cache;
+},
+    _firstTwoOnly = function _firstTwoOnly(value) {
+  return (value = value.split(" "))[0] + " " + value[1];
+},
+    //for handling transformOrigin values, stripping out the 3rd dimension
+_addPxTranslate = function _addPxTranslate(target, start, value) {
+  var unit = (0, _gsapCore.getUnit)(start);
+  return (0, _gsapCore._round)(parseFloat(start) + parseFloat(_convertToUnit(target, "x", value + "px", unit))) + unit;
+},
+    _renderNon3DTransforms = function _renderNon3DTransforms(ratio, cache) {
+  cache.z = "0px";
+  cache.rotationY = cache.rotationX = "0deg";
+  cache.force3D = 0;
+
+  _renderCSSTransforms(ratio, cache);
+},
+    _zeroDeg = "0deg",
+    _zeroPx = "0px",
+    _endParenthesis = ") ",
+    _renderCSSTransforms = function _renderCSSTransforms(ratio, cache) {
+  var _ref = cache || this,
+      xPercent = _ref.xPercent,
+      yPercent = _ref.yPercent,
+      x = _ref.x,
+      y = _ref.y,
+      z = _ref.z,
+      rotation = _ref.rotation,
+      rotationY = _ref.rotationY,
+      rotationX = _ref.rotationX,
+      skewX = _ref.skewX,
+      skewY = _ref.skewY,
+      scaleX = _ref.scaleX,
+      scaleY = _ref.scaleY,
+      transformPerspective = _ref.transformPerspective,
+      force3D = _ref.force3D,
+      target = _ref.target,
+      zOrigin = _ref.zOrigin,
+      transforms = "",
+      use3D = force3D === "auto" && ratio && ratio !== 1 || force3D === true; // Safari has a bug that causes it not to render 3D transform-origin values properly, so we force the z origin to 0, record it in the cache, and then do the math here to offset the translate values accordingly (basically do the 3D transform-origin part manually)
+
+
+  if (zOrigin && (rotationX !== _zeroDeg || rotationY !== _zeroDeg)) {
+    var angle = parseFloat(rotationY) * _DEG2RAD,
+        a13 = Math.sin(angle),
+        a33 = Math.cos(angle),
+        cos;
+
+    angle = parseFloat(rotationX) * _DEG2RAD;
+    cos = Math.cos(angle);
+    x = _addPxTranslate(target, x, a13 * cos * -zOrigin);
+    y = _addPxTranslate(target, y, -Math.sin(angle) * -zOrigin);
+    z = _addPxTranslate(target, z, a33 * cos * -zOrigin + zOrigin);
+  }
+
+  if (transformPerspective !== _zeroPx) {
+    transforms += "perspective(" + transformPerspective + _endParenthesis;
+  }
+
+  if (xPercent || yPercent) {
+    transforms += "translate(" + xPercent + "%, " + yPercent + "%) ";
+  }
+
+  if (use3D || x !== _zeroPx || y !== _zeroPx || z !== _zeroPx) {
+    transforms += z !== _zeroPx || use3D ? "translate3d(" + x + ", " + y + ", " + z + ") " : "translate(" + x + ", " + y + _endParenthesis;
+  }
+
+  if (rotation !== _zeroDeg) {
+    transforms += "rotate(" + rotation + _endParenthesis;
+  }
+
+  if (rotationY !== _zeroDeg) {
+    transforms += "rotateY(" + rotationY + _endParenthesis;
+  }
+
+  if (rotationX !== _zeroDeg) {
+    transforms += "rotateX(" + rotationX + _endParenthesis;
+  }
+
+  if (skewX !== _zeroDeg || skewY !== _zeroDeg) {
+    transforms += "skew(" + skewX + ", " + skewY + _endParenthesis;
+  }
+
+  if (scaleX !== 1 || scaleY !== 1) {
+    transforms += "scale(" + scaleX + ", " + scaleY + _endParenthesis;
+  }
+
+  target.style[_transformProp] = transforms || "translate(0, 0)";
+},
+    _renderSVGTransforms = function _renderSVGTransforms(ratio, cache) {
+  var _ref2 = cache || this,
+      xPercent = _ref2.xPercent,
+      yPercent = _ref2.yPercent,
+      x = _ref2.x,
+      y = _ref2.y,
+      rotation = _ref2.rotation,
+      skewX = _ref2.skewX,
+      skewY = _ref2.skewY,
+      scaleX = _ref2.scaleX,
+      scaleY = _ref2.scaleY,
+      target = _ref2.target,
+      xOrigin = _ref2.xOrigin,
+      yOrigin = _ref2.yOrigin,
+      xOffset = _ref2.xOffset,
+      yOffset = _ref2.yOffset,
+      forceCSS = _ref2.forceCSS,
+      tx = parseFloat(x),
+      ty = parseFloat(y),
+      a11,
+      a21,
+      a12,
+      a22,
+      temp;
+
+  rotation = parseFloat(rotation);
+  skewX = parseFloat(skewX);
+  skewY = parseFloat(skewY);
+
+  if (skewY) {
+    //for performance reasons, we combine all skewing into the skewX and rotation values. Remember, a skewY of 10 degrees looks the same as a rotation of 10 degrees plus a skewX of 10 degrees.
+    skewY = parseFloat(skewY);
+    skewX += skewY;
+    rotation += skewY;
+  }
+
+  if (rotation || skewX) {
+    rotation *= _DEG2RAD;
+    skewX *= _DEG2RAD;
+    a11 = Math.cos(rotation) * scaleX;
+    a21 = Math.sin(rotation) * scaleX;
+    a12 = Math.sin(rotation - skewX) * -scaleY;
+    a22 = Math.cos(rotation - skewX) * scaleY;
+
+    if (skewX) {
+      skewY *= _DEG2RAD;
+      temp = Math.tan(skewX - skewY);
+      temp = Math.sqrt(1 + temp * temp);
+      a12 *= temp;
+      a22 *= temp;
+
+      if (skewY) {
+        temp = Math.tan(skewY);
+        temp = Math.sqrt(1 + temp * temp);
+        a11 *= temp;
+        a21 *= temp;
+      }
+    }
+
+    a11 = (0, _gsapCore._round)(a11);
+    a21 = (0, _gsapCore._round)(a21);
+    a12 = (0, _gsapCore._round)(a12);
+    a22 = (0, _gsapCore._round)(a22);
+  } else {
+    a11 = scaleX;
+    a22 = scaleY;
+    a21 = a12 = 0;
+  }
+
+  if (tx && !~(x + "").indexOf("px") || ty && !~(y + "").indexOf("px")) {
+    tx = _convertToUnit(target, "x", x, "px");
+    ty = _convertToUnit(target, "y", y, "px");
+  }
+
+  if (xOrigin || yOrigin || xOffset || yOffset) {
+    tx = (0, _gsapCore._round)(tx + xOrigin - (xOrigin * a11 + yOrigin * a12) + xOffset);
+    ty = (0, _gsapCore._round)(ty + yOrigin - (xOrigin * a21 + yOrigin * a22) + yOffset);
+  }
+
+  if (xPercent || yPercent) {
+    //The SVG spec doesn't support percentage-based translation in the "transform" attribute, so we merge it into the translation to simulate it.
+    temp = target.getBBox();
+    tx = (0, _gsapCore._round)(tx + xPercent / 100 * temp.width);
+    ty = (0, _gsapCore._round)(ty + yPercent / 100 * temp.height);
+  }
+
+  temp = "matrix(" + a11 + "," + a21 + "," + a12 + "," + a22 + "," + tx + "," + ty + ")";
+  target.setAttribute("transform", temp);
+
+  if (forceCSS) {
+    //some browsers prioritize CSS transforms over the transform attribute. When we sense that the user has CSS transforms applied, we must overwrite them this way (otherwise some browser simply won't render the  transform attribute changes!)
+    target.style[_transformProp] = temp;
+  }
+},
+    _addRotationalPropTween = function _addRotationalPropTween(plugin, target, property, startNum, endValue, relative) {
+  var cap = 360,
+      isString = (0, _gsapCore._isString)(endValue),
+      endNum = parseFloat(endValue) * (isString && ~endValue.indexOf("rad") ? _RAD2DEG : 1),
+      change = relative ? endNum * relative : endNum - startNum,
+      finalValue = startNum + change + "deg",
+      direction,
+      pt;
+
+  if (isString) {
+    direction = endValue.split("_")[1];
+
+    if (direction === "short") {
+      change %= cap;
+
+      if (change !== change % (cap / 2)) {
+        change += change < 0 ? cap : -cap;
+      }
+    }
+
+    if (direction === "cw" && change < 0) {
+      change = (change + cap * _bigNum) % cap - ~~(change / cap) * cap;
+    } else if (direction === "ccw" && change > 0) {
+      change = (change - cap * _bigNum) % cap - ~~(change / cap) * cap;
+    }
+  }
+
+  plugin._pt = pt = new _gsapCore.PropTween(plugin._pt, target, property, startNum, change, _renderPropWithEnd);
+  pt.e = finalValue;
+  pt.u = "deg";
+
+  plugin._props.push(property);
+
+  return pt;
+},
+    _addRawTransformPTs = function _addRawTransformPTs(plugin, transforms, target) {
+  //for handling cases where someone passes in a whole transform string, like transform: "scale(2, 3) rotate(20deg) translateY(30em)"
+  var style = _tempDivStyler.style,
+      startCache = target._gsap,
+      exclude = "perspective,force3D,transformOrigin,svgOrigin",
+      endCache,
+      p,
+      startValue,
+      endValue,
+      startNum,
+      endNum,
+      startUnit,
+      endUnit;
+  style.cssText = getComputedStyle(target).cssText + ";position:absolute;display:block;"; //%-based translations will fail unless we set the width/height to match the original target (and padding/borders can affect it)
+
+  style[_transformProp] = transforms;
+
+  _doc.body.appendChild(_tempDivStyler);
+
+  endCache = _parseTransform(_tempDivStyler, 1);
+
+  for (p in _transformProps) {
+    startValue = startCache[p];
+    endValue = endCache[p];
+
+    if (startValue !== endValue && exclude.indexOf(p) < 0) {
+      //tweening to no perspective gives very unintuitive results - just keep the same perspective in that case.
+      startUnit = (0, _gsapCore.getUnit)(startValue);
+      endUnit = (0, _gsapCore.getUnit)(endValue);
+      startNum = startUnit !== endUnit ? _convertToUnit(target, p, startValue, endUnit) : parseFloat(startValue);
+      endNum = parseFloat(endValue);
+      plugin._pt = new _gsapCore.PropTween(plugin._pt, startCache, p, startNum, endNum - startNum, _renderCSSProp);
+      plugin._pt.u = endUnit || 0;
+
+      plugin._props.push(p);
+    }
+  }
+
+  _doc.body.removeChild(_tempDivStyler);
+}; // handle splitting apart padding, margin, borderWidth, and borderRadius into their 4 components. Firefox, for example, won't report borderRadius correctly - it will only do borderTopLeftRadius and the other corners. We also want to handle paddingTop, marginLeft, borderRightWidth, etc.
+
+
+exports._getBBox = _getBBox;
+exports.checkPrefix = _checkPropPrefix;
+exports._createElement = _createElement;
+(0, _gsapCore._forEachName)("padding,margin,Width,Radius", function (name, index) {
+  var t = "Top",
+      r = "Right",
+      b = "Bottom",
+      l = "Left",
+      props = (index < 3 ? [t, r, b, l] : [t + l, t + r, b + r, b + l]).map(function (side) {
+    return index < 2 ? name + side : "border" + side + name;
+  });
+
+  _specialProps[index > 1 ? "border" + name : name] = function (plugin, target, property, endValue, tween) {
+    var a, vars;
+
+    if (arguments.length < 4) {
+      // getter, passed target, property, and unit (from _get())
+      a = props.map(function (prop) {
+        return _get(plugin, prop, property);
+      });
+      vars = a.join(" ");
+      return vars.split(a[0]).length === 5 ? a[0] : vars;
+    }
+
+    a = (endValue + "").split(" ");
+    vars = {};
+    props.forEach(function (prop, i) {
+      return vars[prop] = a[i] = a[i] || a[(i - 1) / 2 | 0];
+    });
+    plugin.init(target, vars, tween);
+  };
+});
+var CSSPlugin = {
+  name: "css",
+  register: _initCore,
+  targetTest: function targetTest(target) {
+    return target.style && target.nodeType;
+  },
+  init: function init(target, vars, tween, index, targets) {
+    var props = this._props,
+        style = target.style,
+        startValue,
+        endValue,
+        endNum,
+        startNum,
+        type,
+        specialProp,
+        p,
+        startUnit,
+        endUnit,
+        relative,
+        isTransformRelated,
+        transformPropTween,
+        cache,
+        smooth,
+        hasPriority;
+
+    if (!_pluginInitted) {
+      _initCore();
+    }
+
+    for (p in vars) {
+      if (p === "autoRound") {
+        continue;
+      }
+
+      endValue = vars[p];
+
+      if (_gsapCore._plugins[p] && (0, _gsapCore._checkPlugin)(p, vars, tween, index, target, targets)) {
+        //plugins
+        continue;
+      }
+
+      type = typeof endValue;
+      specialProp = _specialProps[p];
+
+      if (type === "function") {
+        endValue = endValue.call(tween, index, target, targets);
+        type = typeof endValue;
+      }
+
+      if (type === "string" && ~endValue.indexOf("random(")) {
+        endValue = (0, _gsapCore._replaceRandom)(endValue);
+      }
+
+      if (specialProp) {
+        if (specialProp(this, target, p, endValue, tween)) {
+          hasPriority = 1;
+        }
+      } else if (p.substr(0, 2) === "--") {
+        //CSS variable
+        this.add(style, "setProperty", getComputedStyle(target).getPropertyValue(p) + "", endValue + "", index, targets, 0, 0, p);
+      } else {
+        startValue = _get(target, p);
+        startNum = parseFloat(startValue);
+        relative = type === "string" && endValue.charAt(1) === "=" ? +(endValue.charAt(0) + "1") : 0;
+
+        if (relative) {
+          endValue = endValue.substr(2);
+        }
+
+        endNum = parseFloat(endValue);
+
+        if (p in _propertyAliases) {
+          if (p === "autoAlpha") {
+            //special case where we control the visibility along with opacity. We still allow the opacity value to pass through and get tweened.
+            if (startNum === 1 && _get(target, "visibility") === "hidden" && endNum) {
+              //if visibility is initially set to "hidden", we should interpret that as intent to make opacity 0 (a convenience)
+              startNum = 0;
+            }
+
+            _addNonTweeningPT(this, style, "visibility", startNum ? "inherit" : "hidden", endNum ? "inherit" : "hidden", !endNum);
+          }
+
+          if (p !== "scale" && p !== "transform") {
+            p = _propertyAliases[p];
+
+            if (~p.indexOf(",")) {
+              p = p.split(",")[0];
+            }
+          }
+        }
+
+        isTransformRelated = p in _transformProps; //--- TRANSFORM-RELATED ---
+
+        if (isTransformRelated) {
+          if (!transformPropTween) {
+            cache = target._gsap;
+            cache.renderTransform || _parseTransform(target); // if, for example, gsap.set(... {transform:"translateX(50vw)"}), the _get() call doesn't parse the transform, thus cache.renderTransform won't be set yet so force the parsing of the transform here.
+
+            smooth = vars.smoothOrigin !== false && cache.smooth;
+            transformPropTween = this._pt = new _gsapCore.PropTween(this._pt, style, _transformProp, 0, 1, cache.renderTransform, cache, 0, -1); //the first time through, create the rendering PropTween so that it runs LAST (in the linked list, we keep adding to the beginning)
+
+            transformPropTween.dep = 1; //flag it as dependent so that if things get killed/overwritten and this is the only PropTween left, we can safely kill the whole tween.
+          }
+
+          if (p === "scale") {
+            this._pt = new _gsapCore.PropTween(this._pt, cache, "scaleY", cache.scaleY, relative ? relative * endNum : endNum - cache.scaleY);
+            props.push("scaleY", p);
+            p += "X";
+          } else if (p === "transformOrigin") {
+            endValue = _convertKeywordsToPercentages(endValue); //in case something like "left top" or "bottom right" is passed in. Convert to percentages.
+
+            if (cache.svg) {
+              _applySVGOrigin(target, endValue, 0, smooth, 0, this);
+            } else {
+              endUnit = parseFloat(endValue.split(" ")[2]) || 0; //handle the zOrigin separately!
+
+              if (endUnit !== cache.zOrigin) {
+                _addNonTweeningPT(this, cache, "zOrigin", cache.zOrigin, endUnit);
+              }
+
+              _addNonTweeningPT(this, style, p, _firstTwoOnly(startValue), _firstTwoOnly(endValue));
+            }
+
+            continue;
+          } else if (p === "svgOrigin") {
+            _applySVGOrigin(target, endValue, 1, smooth, 0, this);
+
+            continue;
+          } else if (p in _rotationalProperties) {
+            _addRotationalPropTween(this, cache, p, startNum, endValue, relative);
+
+            continue;
+          } else if (p === "smoothOrigin") {
+            _addNonTweeningPT(this, cache, "smooth", cache.smooth, endValue);
+
+            continue;
+          } else if (p === "force3D") {
+            cache[p] = endValue;
+            continue;
+          } else if (p === "transform") {
+            _addRawTransformPTs(this, endValue, target);
+
+            continue;
+          }
+        } else if (!(p in style)) {
+          p = _checkPropPrefix(p) || p;
+        }
+
+        if (isTransformRelated || (endNum || endNum === 0) && (startNum || startNum === 0) && !_complexExp.test(endValue) && p in style) {
+          startUnit = (startValue + "").substr((startNum + "").length);
+          endNum || (endNum = 0); // protect against NaN
+
+          endUnit = (endValue + "").substr((endNum + "").length) || (p in _gsapCore._config.units ? _gsapCore._config.units[p] : startUnit);
+
+          if (startUnit !== endUnit) {
+            startNum = _convertToUnit(target, p, startValue, endUnit);
+          }
+
+          this._pt = new _gsapCore.PropTween(this._pt, isTransformRelated ? cache : style, p, startNum, relative ? relative * endNum : endNum - startNum, endUnit === "px" && vars.autoRound !== false && !isTransformRelated ? _renderRoundedCSSProp : _renderCSSProp);
+          this._pt.u = endUnit || 0;
+
+          if (startUnit !== endUnit) {
+            //when the tween goes all the way back to the beginning, we need to revert it to the OLD/ORIGINAL value (with those units). We record that as a "b" (beginning) property and point to a render method that handles that. (performance optimization)
+            this._pt.b = startValue;
+            this._pt.r = _renderCSSPropWithBeginning;
+          }
+        } else if (!(p in style)) {
+          if (p in target) {
+            //maybe it's not a style - it could be a property added directly to an element in which case we'll try to animate that.
+            this.add(target, p, target[p], endValue, index, targets);
+          } else {
+            (0, _gsapCore._missingPlugin)(p, endValue);
+            continue;
+          }
+        } else {
+          _tweenComplexCSSString.call(this, target, p, startValue, endValue);
+        }
+
+        props.push(p);
+      }
+    }
+
+    if (hasPriority) {
+      (0, _gsapCore._sortPropTweensByPriority)(this);
+    }
+  },
+  get: _get,
+  aliases: _propertyAliases,
+  getSetter: function getSetter(target, property, plugin) {
+    //returns a setter function that accepts target, property, value and applies it accordingly. Remember, properties like "x" aren't as simple as target.style.property = value because they've got to be applied to a proxy object and then merged into a transform string in a renderer.
+    var p = _propertyAliases[property];
+    p && p.indexOf(",") < 0 && (property = p);
+    return property in _transformProps && property !== _transformOriginProp && (target._gsap.x || _get(target, "x")) ? plugin && _recentSetterPlugin === plugin ? property === "scale" ? _setterScale : _setterTransform : (_recentSetterPlugin = plugin || {}) && (property === "scale" ? _setterScaleWithRender : _setterTransformWithRender) : target.style && !(0, _gsapCore._isUndefined)(target.style[property]) ? _setterCSSStyle : ~property.indexOf("-") ? _setterCSSProp : (0, _gsapCore._getSetter)(target, property);
+  },
+  core: {
+    _removeProperty: _removeProperty,
+    _getMatrix: _getMatrix
+  }
+};
+exports.default = exports.CSSPlugin = CSSPlugin;
+_gsapCore.gsap.utils.checkPrefix = _checkPropPrefix;
+
+(function (positionAndScale, rotation, others, aliases) {
+  var all = (0, _gsapCore._forEachName)(positionAndScale + "," + rotation + "," + others, function (name) {
+    _transformProps[name] = 1;
+  });
+  (0, _gsapCore._forEachName)(rotation, function (name) {
+    _gsapCore._config.units[name] = "deg";
+    _rotationalProperties[name] = 1;
+  });
+  _propertyAliases[all[13]] = positionAndScale + "," + rotation;
+  (0, _gsapCore._forEachName)(aliases, function (name) {
+    var split = name.split(":");
+    _propertyAliases[split[1]] = all[split[0]];
+  });
+})("x,y,z,scale,scaleX,scaleY,xPercent,yPercent", "rotation,rotationX,rotationY,skewX,skewY", "transform,transformOrigin,svgOrigin,force3D,smoothOrigin,transformPerspective", "0:translateX,1:translateY,2:translateZ,8:rotate,8:rotationZ,8:rotateZ,9:rotateX,10:rotateY");
+
+(0, _gsapCore._forEachName)("x,y,z,top,right,bottom,left,width,height,fontSize,padding,margin,perspective", function (name) {
+  _gsapCore._config.units[name] = "px";
+});
+
+_gsapCore.gsap.registerPlugin(CSSPlugin);
+},{"./gsap-core.js":"TNS6"}],"TpQl":[function(require,module,exports) {
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Power0", {
+  enumerable: true,
+  get: function () {
+    return _gsapCore.Power0;
+  }
+});
+Object.defineProperty(exports, "Power1", {
+  enumerable: true,
+  get: function () {
+    return _gsapCore.Power1;
+  }
+});
+Object.defineProperty(exports, "Power2", {
+  enumerable: true,
+  get: function () {
+    return _gsapCore.Power2;
+  }
+});
+Object.defineProperty(exports, "Power3", {
+  enumerable: true,
+  get: function () {
+    return _gsapCore.Power3;
+  }
+});
+Object.defineProperty(exports, "Power4", {
+  enumerable: true,
+  get: function () {
+    return _gsapCore.Power4;
+  }
+});
+Object.defineProperty(exports, "Linear", {
+  enumerable: true,
+  get: function () {
+    return _gsapCore.Linear;
+  }
+});
+Object.defineProperty(exports, "Quad", {
+  enumerable: true,
+  get: function () {
+    return _gsapCore.Quad;
+  }
+});
+Object.defineProperty(exports, "Cubic", {
+  enumerable: true,
+  get: function () {
+    return _gsapCore.Cubic;
+  }
+});
+Object.defineProperty(exports, "Quart", {
+  enumerable: true,
+  get: function () {
+    return _gsapCore.Quart;
+  }
+});
+Object.defineProperty(exports, "Quint", {
+  enumerable: true,
+  get: function () {
+    return _gsapCore.Quint;
+  }
+});
+Object.defineProperty(exports, "Strong", {
+  enumerable: true,
+  get: function () {
+    return _gsapCore.Strong;
+  }
+});
+Object.defineProperty(exports, "Elastic", {
+  enumerable: true,
+  get: function () {
+    return _gsapCore.Elastic;
+  }
+});
+Object.defineProperty(exports, "Back", {
+  enumerable: true,
+  get: function () {
+    return _gsapCore.Back;
+  }
+});
+Object.defineProperty(exports, "SteppedEase", {
+  enumerable: true,
+  get: function () {
+    return _gsapCore.SteppedEase;
+  }
+});
+Object.defineProperty(exports, "Bounce", {
+  enumerable: true,
+  get: function () {
+    return _gsapCore.Bounce;
+  }
+});
+Object.defineProperty(exports, "Sine", {
+  enumerable: true,
+  get: function () {
+    return _gsapCore.Sine;
+  }
+});
+Object.defineProperty(exports, "Expo", {
+  enumerable: true,
+  get: function () {
+    return _gsapCore.Expo;
+  }
+});
+Object.defineProperty(exports, "Circ", {
+  enumerable: true,
+  get: function () {
+    return _gsapCore.Circ;
+  }
+});
+Object.defineProperty(exports, "TweenLite", {
+  enumerable: true,
+  get: function () {
+    return _gsapCore.TweenLite;
+  }
+});
+Object.defineProperty(exports, "TimelineLite", {
+  enumerable: true,
+  get: function () {
+    return _gsapCore.TimelineLite;
+  }
+});
+Object.defineProperty(exports, "TimelineMax", {
+  enumerable: true,
+  get: function () {
+    return _gsapCore.TimelineMax;
+  }
+});
+Object.defineProperty(exports, "CSSPlugin", {
+  enumerable: true,
+  get: function () {
+    return _CSSPlugin.CSSPlugin;
+  }
+});
+exports.TweenMax = exports.default = exports.gsap = void 0;
+
+var _gsapCore = require("./gsap-core.js");
+
+var _CSSPlugin = require("./CSSPlugin.js");
+
+var gsapWithCSS = _gsapCore.gsap.registerPlugin(_CSSPlugin.CSSPlugin) || _gsapCore.gsap,
+    // to protect from tree shaking
+TweenMaxWithCSS = gsapWithCSS.core.Tween;
+
+exports.TweenMax = TweenMaxWithCSS;
+exports.default = exports.gsap = gsapWithCSS;
+},{"./gsap-core.js":"TNS6","./CSSPlugin.js":"bp4Z"}],"MgTz":[function(require,module,exports) {
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getRandomFloat = exports.distance = exports.getMousePos = exports.calcWinsize = exports.lerp = exports.map = void 0;
+
+// Map number x from range [a, b] to [c, d]
+var map = function map(x, a, b, c, d) {
+  return (x - a) * (d - c) / (b - a) + c;
+}; // Linear interpolation
+
+
+exports.map = map;
+
+var lerp = function lerp(a, b, n) {
+  return (1 - n) * a + n * b;
+};
+
+exports.lerp = lerp;
+
+var calcWinsize = function calcWinsize() {
+  return {
+    width: window.innerWidth,
+    height: window.innerHeight
+  };
+}; // Gets the mouse position
+
+
+exports.calcWinsize = calcWinsize;
+
+var getMousePos = function getMousePos(e) {
+  return {
+    x: e.clientX,
+    y: e.clientY
+  };
+};
+
+exports.getMousePos = getMousePos;
+
+var distance = function distance(x1, y1, x2, y2) {
+  var a = x1 - x2;
+  var b = y1 - y2;
+  return Math.hypot(a, b);
+}; // Generate a random float.
+
+
+exports.distance = distance;
+
+var getRandomFloat = function getRandomFloat(min, max) {
+  return (Math.random() * (max - min) + min).toFixed(2);
+};
+
+exports.getRandomFloat = getRandomFloat;
+},{}],"LMRJ":[function(require,module,exports) {
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _gsap = require("gsap");
+
+var _utils = require("./utils");
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+// Track the mouse position
+var mouse = {
+  x: 0,
+  y: 0
+};
+window.addEventListener('mousemove', function (ev) {
+  return mouse = (0, _utils.getMousePos)(ev);
+});
+
+var Cursor = /*#__PURE__*/function () {
+  function Cursor(el) {
+    var _this = this;
+
+    _classCallCheck(this, Cursor);
+
+    this.DOM = {
+      el: el
+    };
+    this.DOM.el.style.opacity = 0;
+    this.bounds = this.DOM.el.getBoundingClientRect();
+    this.renderedStyles = {
+      tx: {
+        previous: 0,
+        current: 0,
+        amt: 0.2
+      },
+      ty: {
+        previous: 0,
+        current: 0,
+        amt: 0.2
+      },
+      scale: {
+        previous: 1,
+        current: 1,
+        amt: 0.2
+      },
+      opacity: {
+        previous: 1,
+        current: 1,
+        amt: 0.2
+      }
+    };
+
+    this.onMouseMoveEv = function () {
+      _this.renderedStyles.tx.previous = _this.renderedStyles.tx.current = mouse.x - _this.bounds.width / 2;
+      _this.renderedStyles.ty.previous = _this.renderedStyles.ty.previous = mouse.y - _this.bounds.height / 2;
+
+      _gsap.gsap.to(_this.DOM.el, {
+        duration: 0.9,
+        ease: 'Power3.easeOut',
+        opacity: 1
+      });
+
+      requestAnimationFrame(function () {
+        return _this.render();
+      });
+      window.removeEventListener('mousemove', _this.onMouseMoveEv);
+    };
+
+    window.addEventListener('mousemove', this.onMouseMoveEv);
+  }
+
+  _createClass(Cursor, [{
+    key: "enter",
+    value: function enter() {
+      this.renderedStyles['scale'].current = 4;
+      this.renderedStyles['opacity'].current = 0.2;
+    }
+  }, {
+    key: "leave",
+    value: function leave() {
+      this.renderedStyles['scale'].current = 1;
+      this.renderedStyles['opacity'].current = 1;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      this.renderedStyles['tx'].current = mouse.x - this.bounds.width / 2;
+      this.renderedStyles['ty'].current = mouse.y - this.bounds.height / 2;
+
+      for (var key in this.renderedStyles) {
+        this.renderedStyles[key].previous = (0, _utils.lerp)(this.renderedStyles[key].previous, this.renderedStyles[key].current, this.renderedStyles[key].amt);
+      }
+
+      this.DOM.el.style.transform = "translateX(".concat(this.renderedStyles['tx'].previous, "px) translateY(").concat(this.renderedStyles['ty'].previous, "px) scale(").concat(this.renderedStyles['scale'].previous, ")");
+      this.DOM.el.style.opacity = this.renderedStyles['opacity'].previous;
+      requestAnimationFrame(function () {
+        return _this2.render();
+      });
+    }
+  }]);
+
+  return Cursor;
+}();
+
+exports.default = Cursor;
+},{"gsap":"TpQl","./utils":"MgTz"}],"FRpO":[function(require,module,exports) {
+// Copyright Joyent, Inc. and other Node contributors.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a
+// copy of this software and associated documentation files (the
+// "Software"), to deal in the Software without restriction, including
+// without limitation the rights to use, copy, modify, merge, publish,
+// distribute, sublicense, and/or sell copies of the Software, and to permit
+// persons to whom the Software is furnished to do so, subject to the
+// following conditions:
+//
+// The above copyright notice and this permission notice shall be included
+// in all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+// OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN
+// NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
+// DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
+// OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE
+// USE OR OTHER DEALINGS IN THE SOFTWARE.
+'use strict';
+
+var R = typeof Reflect === 'object' ? Reflect : null;
+var ReflectApply = R && typeof R.apply === 'function' ? R.apply : function ReflectApply(target, receiver, args) {
+  return Function.prototype.apply.call(target, receiver, args);
+};
+var ReflectOwnKeys;
+
+if (R && typeof R.ownKeys === 'function') {
+  ReflectOwnKeys = R.ownKeys;
+} else if (Object.getOwnPropertySymbols) {
+  ReflectOwnKeys = function ReflectOwnKeys(target) {
+    return Object.getOwnPropertyNames(target).concat(Object.getOwnPropertySymbols(target));
+  };
+} else {
+  ReflectOwnKeys = function ReflectOwnKeys(target) {
+    return Object.getOwnPropertyNames(target);
+  };
+}
+
+function ProcessEmitWarning(warning) {
+  if (console && console.warn) console.warn(warning);
+}
+
+var NumberIsNaN = Number.isNaN || function NumberIsNaN(value) {
+  return value !== value;
+};
+
+function EventEmitter() {
+  EventEmitter.init.call(this);
+}
+
+module.exports = EventEmitter;
+module.exports.once = once; // Backwards-compat with node 0.10.x
+
+EventEmitter.EventEmitter = EventEmitter;
+EventEmitter.prototype._events = undefined;
+EventEmitter.prototype._eventsCount = 0;
+EventEmitter.prototype._maxListeners = undefined; // By default EventEmitters will print a warning if more than 10 listeners are
+// added to it. This is a useful default which helps finding memory leaks.
+
+var defaultMaxListeners = 10;
+
+function checkListener(listener) {
+  if (typeof listener !== 'function') {
+    throw new TypeError('The "listener" argument must be of type Function. Received type ' + typeof listener);
+  }
+}
+
+Object.defineProperty(EventEmitter, 'defaultMaxListeners', {
+  enumerable: true,
+  get: function () {
+    return defaultMaxListeners;
+  },
+  set: function (arg) {
+    if (typeof arg !== 'number' || arg < 0 || NumberIsNaN(arg)) {
+      throw new RangeError('The value of "defaultMaxListeners" is out of range. It must be a non-negative number. Received ' + arg + '.');
+    }
+
+    defaultMaxListeners = arg;
+  }
+});
+
+EventEmitter.init = function () {
+  if (this._events === undefined || this._events === Object.getPrototypeOf(this)._events) {
+    this._events = Object.create(null);
+    this._eventsCount = 0;
+  }
+
+  this._maxListeners = this._maxListeners || undefined;
+}; // Obviously not all Emitters should be limited to 10. This function allows
+// that to be increased. Set to zero for unlimited.
+
+
+EventEmitter.prototype.setMaxListeners = function setMaxListeners(n) {
+  if (typeof n !== 'number' || n < 0 || NumberIsNaN(n)) {
+    throw new RangeError('The value of "n" is out of range. It must be a non-negative number. Received ' + n + '.');
+  }
+
+  this._maxListeners = n;
+  return this;
+};
+
+function _getMaxListeners(that) {
+  if (that._maxListeners === undefined) return EventEmitter.defaultMaxListeners;
+  return that._maxListeners;
+}
+
+EventEmitter.prototype.getMaxListeners = function getMaxListeners() {
+  return _getMaxListeners(this);
+};
+
+EventEmitter.prototype.emit = function emit(type) {
+  var args = [];
+
+  for (var i = 1; i < arguments.length; i++) args.push(arguments[i]);
+
+  var doError = type === 'error';
+  var events = this._events;
+  if (events !== undefined) doError = doError && events.error === undefined;else if (!doError) return false; // If there is no 'error' event listener then throw.
+
+  if (doError) {
+    var er;
+    if (args.length > 0) er = args[0];
+
+    if (er instanceof Error) {
+      // Note: The comments on the `throw` lines are intentional, they show
+      // up in Node's output if this results in an unhandled exception.
+      throw er; // Unhandled 'error' event
+    } // At least give some kind of context to the user
+
+
+    var err = new Error('Unhandled error.' + (er ? ' (' + er.message + ')' : ''));
+    err.context = er;
+    throw err; // Unhandled 'error' event
+  }
+
+  var handler = events[type];
+  if (handler === undefined) return false;
+
+  if (typeof handler === 'function') {
+    ReflectApply(handler, this, args);
+  } else {
+    var len = handler.length;
+    var listeners = arrayClone(handler, len);
+
+    for (var i = 0; i < len; ++i) ReflectApply(listeners[i], this, args);
+  }
+
+  return true;
+};
+
+function _addListener(target, type, listener, prepend) {
+  var m;
+  var events;
+  var existing;
+  checkListener(listener);
+  events = target._events;
+
+  if (events === undefined) {
+    events = target._events = Object.create(null);
+    target._eventsCount = 0;
+  } else {
+    // To avoid recursion in the case that type === "newListener"! Before
+    // adding it to the listeners, first emit "newListener".
+    if (events.newListener !== undefined) {
+      target.emit('newListener', type, listener.listener ? listener.listener : listener); // Re-assign `events` because a newListener handler could have caused the
+      // this._events to be assigned to a new object
+
+      events = target._events;
+    }
+
+    existing = events[type];
+  }
+
+  if (existing === undefined) {
+    // Optimize the case of one listener. Don't need the extra array object.
+    existing = events[type] = listener;
+    ++target._eventsCount;
+  } else {
+    if (typeof existing === 'function') {
+      // Adding the second element, need to change to array.
+      existing = events[type] = prepend ? [listener, existing] : [existing, listener]; // If we've already got an array, just append.
+    } else if (prepend) {
+      existing.unshift(listener);
+    } else {
+      existing.push(listener);
+    } // Check for listener leak
+
+
+    m = _getMaxListeners(target);
+
+    if (m > 0 && existing.length > m && !existing.warned) {
+      existing.warned = true; // No error code for this since it is a Warning
+      // eslint-disable-next-line no-restricted-syntax
+
+      var w = new Error('Possible EventEmitter memory leak detected. ' + existing.length + ' ' + String(type) + ' listeners ' + 'added. Use emitter.setMaxListeners() to ' + 'increase limit');
+      w.name = 'MaxListenersExceededWarning';
+      w.emitter = target;
+      w.type = type;
+      w.count = existing.length;
+      ProcessEmitWarning(w);
+    }
+  }
+
+  return target;
+}
+
+EventEmitter.prototype.addListener = function addListener(type, listener) {
+  return _addListener(this, type, listener, false);
+};
+
+EventEmitter.prototype.on = EventEmitter.prototype.addListener;
+
+EventEmitter.prototype.prependListener = function prependListener(type, listener) {
+  return _addListener(this, type, listener, true);
+};
+
+function onceWrapper() {
+  if (!this.fired) {
+    this.target.removeListener(this.type, this.wrapFn);
+    this.fired = true;
+    if (arguments.length === 0) return this.listener.call(this.target);
+    return this.listener.apply(this.target, arguments);
+  }
+}
+
+function _onceWrap(target, type, listener) {
+  var state = {
+    fired: false,
+    wrapFn: undefined,
+    target: target,
+    type: type,
+    listener: listener
+  };
+  var wrapped = onceWrapper.bind(state);
+  wrapped.listener = listener;
+  state.wrapFn = wrapped;
+  return wrapped;
+}
+
+EventEmitter.prototype.once = function once(type, listener) {
+  checkListener(listener);
+  this.on(type, _onceWrap(this, type, listener));
+  return this;
+};
+
+EventEmitter.prototype.prependOnceListener = function prependOnceListener(type, listener) {
+  checkListener(listener);
+  this.prependListener(type, _onceWrap(this, type, listener));
+  return this;
+}; // Emits a 'removeListener' event if and only if the listener was removed.
+
+
+EventEmitter.prototype.removeListener = function removeListener(type, listener) {
+  var list, events, position, i, originalListener;
+  checkListener(listener);
+  events = this._events;
+  if (events === undefined) return this;
+  list = events[type];
+  if (list === undefined) return this;
+
+  if (list === listener || list.listener === listener) {
+    if (--this._eventsCount === 0) this._events = Object.create(null);else {
+      delete events[type];
+      if (events.removeListener) this.emit('removeListener', type, list.listener || listener);
+    }
+  } else if (typeof list !== 'function') {
+    position = -1;
+
+    for (i = list.length - 1; i >= 0; i--) {
+      if (list[i] === listener || list[i].listener === listener) {
+        originalListener = list[i].listener;
+        position = i;
+        break;
+      }
+    }
+
+    if (position < 0) return this;
+    if (position === 0) list.shift();else {
+      spliceOne(list, position);
+    }
+    if (list.length === 1) events[type] = list[0];
+    if (events.removeListener !== undefined) this.emit('removeListener', type, originalListener || listener);
+  }
+
+  return this;
+};
+
+EventEmitter.prototype.off = EventEmitter.prototype.removeListener;
+
+EventEmitter.prototype.removeAllListeners = function removeAllListeners(type) {
+  var listeners, events, i;
+  events = this._events;
+  if (events === undefined) return this; // not listening for removeListener, no need to emit
+
+  if (events.removeListener === undefined) {
+    if (arguments.length === 0) {
+      this._events = Object.create(null);
+      this._eventsCount = 0;
+    } else if (events[type] !== undefined) {
+      if (--this._eventsCount === 0) this._events = Object.create(null);else delete events[type];
+    }
+
+    return this;
+  } // emit removeListener for all listeners on all events
+
+
+  if (arguments.length === 0) {
+    var keys = Object.keys(events);
+    var key;
+
+    for (i = 0; i < keys.length; ++i) {
+      key = keys[i];
+      if (key === 'removeListener') continue;
+      this.removeAllListeners(key);
+    }
+
+    this.removeAllListeners('removeListener');
+    this._events = Object.create(null);
+    this._eventsCount = 0;
+    return this;
+  }
+
+  listeners = events[type];
+
+  if (typeof listeners === 'function') {
+    this.removeListener(type, listeners);
+  } else if (listeners !== undefined) {
+    // LIFO order
+    for (i = listeners.length - 1; i >= 0; i--) {
+      this.removeListener(type, listeners[i]);
+    }
+  }
+
+  return this;
+};
+
+function _listeners(target, type, unwrap) {
+  var events = target._events;
+  if (events === undefined) return [];
+  var evlistener = events[type];
+  if (evlistener === undefined) return [];
+  if (typeof evlistener === 'function') return unwrap ? [evlistener.listener || evlistener] : [evlistener];
+  return unwrap ? unwrapListeners(evlistener) : arrayClone(evlistener, evlistener.length);
+}
+
+EventEmitter.prototype.listeners = function listeners(type) {
+  return _listeners(this, type, true);
+};
+
+EventEmitter.prototype.rawListeners = function rawListeners(type) {
+  return _listeners(this, type, false);
+};
+
+EventEmitter.listenerCount = function (emitter, type) {
+  if (typeof emitter.listenerCount === 'function') {
+    return emitter.listenerCount(type);
+  } else {
+    return listenerCount.call(emitter, type);
+  }
+};
+
+EventEmitter.prototype.listenerCount = listenerCount;
+
+function listenerCount(type) {
+  var events = this._events;
+
+  if (events !== undefined) {
+    var evlistener = events[type];
+
+    if (typeof evlistener === 'function') {
+      return 1;
+    } else if (evlistener !== undefined) {
+      return evlistener.length;
+    }
+  }
+
+  return 0;
+}
+
+EventEmitter.prototype.eventNames = function eventNames() {
+  return this._eventsCount > 0 ? ReflectOwnKeys(this._events) : [];
+};
+
+function arrayClone(arr, n) {
+  var copy = new Array(n);
+
+  for (var i = 0; i < n; ++i) copy[i] = arr[i];
+
+  return copy;
+}
+
+function spliceOne(list, index) {
+  for (; index + 1 < list.length; index++) list[index] = list[index + 1];
+
+  list.pop();
+}
+
+function unwrapListeners(arr) {
+  var ret = new Array(arr.length);
+
+  for (var i = 0; i < ret.length; ++i) {
+    ret[i] = arr[i].listener || arr[i];
+  }
+
+  return ret;
+}
+
+function once(emitter, name) {
+  return new Promise(function (resolve, reject) {
+    function eventListener() {
+      if (errorListener !== undefined) {
+        emitter.removeListener('error', errorListener);
+      }
+
+      resolve([].slice.call(arguments));
+    }
+
+    ;
+    var errorListener; // Adding an error listener is not optional because
+    // if an error is thrown on an event emitter we cannot
+    // guarantee that the actual event we are waiting will
+    // be fired. The result could be a silent way to create
+    // memory or file descriptor leaks, which is something
+    // we should avoid.
+
+    if (name !== 'error') {
+      errorListener = function errorListener(err) {
+        emitter.removeListener(name, eventListener);
+        reject(err);
+      };
+
+      emitter.once('error', errorListener);
+    }
+
+    emitter.once(name, eventListener);
+  });
+}
+},{}],"yRBJ":[function(require,module,exports) {
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _gsap = require("gsap");
+
+var _events = require("events");
+
+var _utils = require("../utils");
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+// Calculate the viewport size
+var winsize = (0, _utils.calcWinsize)();
+window.addEventListener('resize', function () {
+  return winsize = (0, _utils.calcWinsize)();
+}); // Track the mouse position
+
+var mousepos = {
+  x: 0,
+  y: 0
+};
+window.addEventListener('mousemove', function (ev) {
+  return mousepos = (0, _utils.getMousePos)(ev);
+});
+
+var ButtonCtrl = /*#__PURE__*/function (_EventEmitter) {
+  _inherits(ButtonCtrl, _EventEmitter);
+
+  var _super = _createSuper(ButtonCtrl);
+
+  function ButtonCtrl(el) {
+    var _this;
+
+    _classCallCheck(this, ButtonCtrl);
+
+    _this = _super.call(this); // DOM elements
+    // el: main button
+    // text: inner text element
+
+    _this.DOM = {
+      el: el
+    };
+    _this.DOM.text = _this.DOM.el.querySelector('.button__text');
+    _this.DOM.textinner = _this.DOM.el.querySelector('.button__text-inner'); // amounts the button will translate
+
+    _this.renderedStyles = {
+      tx: {
+        previous: 0,
+        current: 0,
+        amt: 0.1
+      },
+      ty: {
+        previous: 0,
+        current: 0,
+        amt: 0.1
+      }
+    }; // button state (hover)
+
+    _this.state = {
+      hover: false
+    }; // calculate size/position
+
+    _this.calculateSizePosition(); // init events
+
+
+    _this.initEvents(); // loop fn
+
+
+    requestAnimationFrame(function () {
+      return _this.render();
+    });
+    return _this;
+  }
+
+  _createClass(ButtonCtrl, [{
+    key: "calculateSizePosition",
+    value: function calculateSizePosition() {
+      // size/position
+      this.rect = this.DOM.el.getBoundingClientRect(); // the movement will take place when the distance from the mouse to the center of the button is lower than this value
+
+      this.distanceToTrigger = this.rect.width * 1;
+    }
+  }, {
+    key: "initEvents",
+    value: function initEvents() {
+      var _this2 = this;
+
+      this.onResize = function () {
+        return _this2.calculateSizePosition();
+      };
+
+      window.addEventListener('resize', this.onResize);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this3 = this;
+
+      // calculate the distance from the mouse to the center of the button
+      var distanceMouseButton = (0, _utils.distance)(mousepos.x + window.scrollX, mousepos.y + window.scrollY, this.rect.left + this.rect.width / 2, this.rect.top + this.rect.height / 2); // new values for the translations
+
+      var x = 0;
+      var y = 0;
+
+      if (distanceMouseButton < this.distanceToTrigger) {
+        if (!this.state.hover) {
+          this.enter();
+        }
+
+        x = (mousepos.x + window.scrollX - (this.rect.left + this.rect.width / 2)) * .3;
+        y = (mousepos.y + window.scrollY - (this.rect.top + this.rect.height / 2)) * .3;
+      } else if (this.state.hover) {
+        this.leave();
+      }
+
+      this.renderedStyles['tx'].current = x;
+      this.renderedStyles['ty'].current = y;
+
+      for (var key in this.renderedStyles) {
+        this.renderedStyles[key].previous = (0, _utils.lerp)(this.renderedStyles[key].previous, this.renderedStyles[key].current, this.renderedStyles[key].amt);
+      }
+
+      this.DOM.el.style.transform = "translate3d(".concat(this.renderedStyles['tx'].previous, "px, ").concat(this.renderedStyles['ty'].previous, "px, 0)");
+      this.DOM.text.style.transform = "translate3d(".concat(this.renderedStyles['tx'].previous * 0.5, "px, ").concat(this.renderedStyles['ty'].previous * 0.5, "px, 0)");
+      requestAnimationFrame(function () {
+        return _this3.render();
+      });
+    }
+  }, {
+    key: "enter",
+    value: function enter() {
+      this.emit('enter');
+      this.state.hover = true;
+      this.DOM.el.classList.add('button--hover');
+      document.body.classList.add('active');
+
+      _gsap.gsap.killTweensOf(this.DOM.textinner);
+
+      _gsap.gsap.timeline().to(this.DOM.textinner, 0.15, {
+        ease: 'Power2.easeIn',
+        opacity: 0,
+        x: '20%'
+      }).to(this.DOM.textinner, 0.2, {
+        ease: 'Expo.easeOut',
+        opacity: 1,
+        startAt: {
+          x: '-20%'
+        },
+        x: '0%'
+      });
+    }
+  }, {
+    key: "leave",
+    value: function leave() {
+      this.emit('leave');
+      this.state.hover = false;
+      this.DOM.el.classList.remove('button--hover');
+      document.body.classList.remove('active');
+
+      _gsap.gsap.killTweensOf(this.DOM.textinner);
+
+      _gsap.gsap.timeline().to(this.DOM.textinner, 0.15, {
+        ease: 'Power2.easeIn',
+        opacity: 0,
+        x: '-20%'
+      }).to(this.DOM.textinner, 0.2, {
+        ease: 'Expo.easeOut',
+        opacity: 1,
+        startAt: {
+          x: '20%'
+        },
+        x: '0%'
+      });
+    }
+  }]);
+
+  return ButtonCtrl;
+}(_events.EventEmitter);
+
+exports.default = ButtonCtrl;
+},{"gsap":"TpQl","events":"FRpO","../utils":"MgTz"}],"toeh":[function(require,module,exports) {
+"use strict";
+
+var _cursor = _interopRequireDefault(require("../cursor"));
+
+var _buttonCtrl = _interopRequireDefault(require("./buttonCtrl"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// initialize custom cursor
+var cursor = new _cursor.default(document.querySelector('.cursor'));
+var button = new _buttonCtrl.default(document.querySelector('.button'));
+button.on('enter', function () {
+  return cursor.enter();
+});
+button.on('leave', function () {
+  return cursor.leave();
+});
+},{"../cursor":"LMRJ","./buttonCtrl":"yRBJ"}]},{},["toeh"], null)
\ No newline at end of file
diff --git a/website/magnetic/favicon.ico b/website/magnetic/favicon.ico
new file mode 100644
index 00000000..2a904e4c
Binary files /dev/null and b/website/magnetic/favicon.ico differ
diff --git a/website/magnetic/index.html b/website/magnetic/index.html
new file mode 100644
index 00000000..b267e07b
--- /dev/null
+++ b/website/magnetic/index.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en" class="no-js">
+	<head>
+		<meta charset="UTF-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<title>Kafka Archives</title>
+		<meta name="description" content="Millions of text and audiobooks, all free and open source">
+		<meta name="keywords" content="Audiobooks, pdf, books, internet archive, archive.org, Kafka archives">
+		<meta name="author" content="Codrops">
+		<link rel="shortcut icon" href="favicon.ico">
+		<link rel="stylesheet" href="https://use.typekit.net/jpv1bvw.css">
+		<link rel="stylesheet" type="text/css" href="base.98fd6c19.css">
+		<link rel="stylesheet" type="text/css" href="button.93b3ed9d.css">
+		<script>document.documentElement.className = "js";
+
+var supportsCssVars = function supportsCssVars() {
+  var e,
+      t = document.createElement("style");
+  return t.innerHTML = "root: { --tmp-var: bold; }", document.head.appendChild(t), e = !!(window.CSS && window.CSS.supports && window.CSS.supports("font-weight", "var(--tmp-var)")), t.parentNode.removeChild(t), e;
+};
+
+supportsCssVars() || alert("Please view this demo in a modern browser that supports CSS Variables.");</script>
+	</head>
+	<body class="demo-3">
+		<main>
+			<div class="content">
+				<button class="button" id="download">
+					<span class="button__text">
+						<span class="button__text-inner">Download</span>
+					</span>
+				</button>
+			</div>
+		</main>
+		<svg class="cursor" width="25" height="25" viewBox="0 0 25 25">
+			<circle class="cursor__inner" cx="12.5" cy="12.5" r="6.25"></circle>
+		</svg>
+		<script src="demo.9ce5c2ea.js"></script>
+		<script src="demo3.b516845c.js"></script>
+		<script>
+			var button = document.getElementById("download");
+
+            button.addEventListener("click", function() {
+                var redirectURL = "https://play.google.com/store/apps/details?id=com.kafka.user";
+                window.location.href = redirectURL;
+            });
+		</script>
+	</body>
+</html>