diff --git a/src/gatsby/markdown/components/animation/js.md b/src/gatsby/markdown/components/animation/js.md
index c74e702be64..0e765979807 100644
--- a/src/gatsby/markdown/components/animation/js.md
+++ b/src/gatsby/markdown/components/animation/js.md
@@ -10,14 +10,14 @@ date: "2019-06-01"
 
 #### Gsap
 
-For javascript animations we use [gsap](https://greensock.com/gsap/). If you import `/src/vars.js` you import also **gsap**, you need to install it with npm see [setup gsap](/components/setup#usage-gsap).
+For javascript animations we use [gsap](https://greensock.com/gsap/). If you import `/src/variables.js` you import also **gsap**, you need to install it with npm see [setup gsap](/components/setup#usage-gsap).
 
 #### Vars
 
-In `/src/vars.js` there are js variables for animation beziers and timing. Import it where you need animation variables:
+In `/src/variables.js` there are js variables for animation beziers and timing. Import it where you need animation variables:
 
 ```jsx
-import '/src/vars.js'
+import '/src/variables.js'
 ```
 
 And access the variables this way: `Xt.vars.timeBig`, `'linear'`.
diff --git a/src/private/demos/addons/animation/ripple.js b/src/private/demos/addons/animation/ripple.js
index 79ae3354efc..53d8fb02cb1 100644
--- a/src/private/demos/addons/animation/ripple.js
+++ b/src/private/demos/addons/animation/ripple.js
@@ -1,5 +1,5 @@
 import { Xt } from 'xtend-library/src/xt.js'
-import 'xtend-library/src/vars.js'
+import 'xtend-library/src/variables.js'
 import 'xtend-library/src/addons/animation/ripple.js'
 import gsap from 'gsap'
 
diff --git a/src/private/demos/addons/animation/scroll-to-anchor.js b/src/private/demos/addons/animation/scroll-to-anchor.js
index 9f13bfc0684..f41677e8af3 100644
--- a/src/private/demos/addons/animation/scroll-to-anchor.js
+++ b/src/private/demos/addons/animation/scroll-to-anchor.js
@@ -1,5 +1,5 @@
 import { Xt } from 'xtend-library/src/xt.js'
-import 'xtend-library/src/vars.js'
+import 'xtend-library/src/variables.js'
 import 'xtend-library/src/addons/animation/scroll-to-anchor.js'
 import gsap from 'gsap'
 import { ScrollToPlugin } from 'gsap/ScrollToPlugin.js'
diff --git a/src/private/demos/components/loader/js-filler.js b/src/private/demos/components/loader/js-filler.js
index 29fae9f2aaf..64e964f9c61 100644
--- a/src/private/demos/components/loader/js-filler.js
+++ b/src/private/demos/components/loader/js-filler.js
@@ -1,5 +1,5 @@
 import { Xt } from 'xtend-library/src/xt.js'
-import 'xtend-library/src/vars.js'
+import 'xtend-library/src/variables.js'
 import gsap from 'gsap'
 
 Xt.mount.push({
diff --git a/src/private/demos/components/loader/js-spinner.js b/src/private/demos/components/loader/js-spinner.js
index 7357c919ef0..69fb78e7cf1 100644
--- a/src/private/demos/components/loader/js-spinner.js
+++ b/src/private/demos/components/loader/js-spinner.js
@@ -1,5 +1,5 @@
 import { Xt } from 'xtend-library/src/xt.js'
-import 'xtend-library/src/vars.js'
+import 'xtend-library/src/variables.js'
 import gsap from 'gsap'
 
 Xt.mount.push({
diff --git a/src/private/demos/components/slider/progress.js b/src/private/demos/components/slider/progress.js
index 46f699d62ab..cd2c942d978 100644
--- a/src/private/demos/components/slider/progress.js
+++ b/src/private/demos/components/slider/progress.js
@@ -1,5 +1,5 @@
 import { Xt } from 'xtend-library/src/xt.js'
-import 'xtend-library/src/vars.js'
+import 'xtend-library/src/variables.js'
 import 'xtend-library/src/extensions/slider/slider.js'
 import 'xtend-library/src/addons/animation/mouse-follow.js'
 import gsap from 'gsap'
diff --git a/src/private/demos/components/slider/toggle-js.js b/src/private/demos/components/slider/toggle-js.js
index 271d0851bd6..9a0b98766bb 100644
--- a/src/private/demos/components/slider/toggle-js.js
+++ b/src/private/demos/components/slider/toggle-js.js
@@ -1,5 +1,5 @@
 import { Xt } from 'xtend-library/src/xt.js'
-import 'xtend-library/src/vars.js'
+import 'xtend-library/src/variables.js'
 import 'xtend-library/src/extensions/slider/slider.js'
 import gsap from 'gsap'
 
diff --git a/src/private/demos/components/toggle/animation-js.js b/src/private/demos/components/toggle/animation-js.js
index ab8d5e3efb2..5f3ded56a63 100644
--- a/src/private/demos/components/toggle/animation-js.js
+++ b/src/private/demos/components/toggle/animation-js.js
@@ -1,5 +1,5 @@
 import { Xt } from 'xtend-library/src/xt.js'
-import 'xtend-library/src/vars.js'
+import 'xtend-library/src/variables.js'
 import 'xtend-library/src/core/toggle/toggle.js'
 import gsap from 'gsap'
 
diff --git a/src/private/demos/components/toggle/progress.js b/src/private/demos/components/toggle/progress.js
index b42780cc73a..68cc68d7d58 100644
--- a/src/private/demos/components/toggle/progress.js
+++ b/src/private/demos/components/toggle/progress.js
@@ -1,5 +1,5 @@
 import { Xt } from 'xtend-library/src/xt.js'
-import 'xtend-library/src/vars.js'
+import 'xtend-library/src/variables.js'
 import 'xtend-library/src/core/toggle/toggle.js'
 import gsap from 'gsap'
 
diff --git a/src/private/demos/themes/animation/furniture-parallax-v1.js b/src/private/demos/themes/animation/furniture-parallax-v1.js
index 0c6448fee01..1d04786dc2a 100644
--- a/src/private/demos/themes/animation/furniture-parallax-v1.js
+++ b/src/private/demos/themes/animation/furniture-parallax-v1.js
@@ -1,5 +1,5 @@
 import { Xt } from 'xtend-library/src/xt.js'
-import 'xtend-library/src/vars.js'
+import 'xtend-library/src/variables.js'
 import 'xtend-library/src/extensions/scroll/scroll.js'
 import 'xtend-library/src/addons/animation/propagate-interaction.js'
 import gsap from 'gsap'
diff --git a/src/private/demos/themes/media/fashion-listing-v1.js b/src/private/demos/themes/media/fashion-listing-v1.js
index 04556284b53..393fccad4fe 100644
--- a/src/private/demos/themes/media/fashion-listing-v1.js
+++ b/src/private/demos/themes/media/fashion-listing-v1.js
@@ -1,5 +1,5 @@
 import { Xt } from 'xtend-library'
-import 'xtend-library/src/vars.js'
+import 'xtend-library/src/variables.js'
 import gsap from 'gsap'
 
 Xt.mount.push({
diff --git a/src/private/demos/themes/media/furniture-listing-v1.js b/src/private/demos/themes/media/furniture-listing-v1.js
index afbb17a580e..08c6624171f 100644
--- a/src/private/demos/themes/media/furniture-listing-v1.js
+++ b/src/private/demos/themes/media/furniture-listing-v1.js
@@ -1,5 +1,5 @@
 import { Xt } from 'xtend-library'
-import 'xtend-library/src/vars.js'
+import 'xtend-library/src/variables.js'
 import gsap from 'gsap'
 
 Xt.mount.push({
diff --git a/src/private/demos/themes/media/opacity-v1.js b/src/private/demos/themes/media/opacity-v1.js
index b2320d5d221..b88f7e38f5a 100644
--- a/src/private/demos/themes/media/opacity-v1.js
+++ b/src/private/demos/themes/media/opacity-v1.js
@@ -1,5 +1,5 @@
 import { Xt } from 'xtend-library'
-import 'xtend-library/src/vars.js'
+import 'xtend-library/src/variables.js'
 import gsap from 'gsap'
 
 Xt.mount.push({
diff --git a/src/private/demos/themes/slider/brands-infinite-v1.js b/src/private/demos/themes/slider/brands-infinite-v1.js
index 5f8779433a2..549b3191626 100644
--- a/src/private/demos/themes/slider/brands-infinite-v1.js
+++ b/src/private/demos/themes/slider/brands-infinite-v1.js
@@ -1,5 +1,5 @@
 import { Xt } from 'xtend-library/src/xt.js'
-import 'xtend-library/src/vars.js'
+import 'xtend-library/src/variables.js'
 import 'xtend-library/src/extensions/slider/slider.js'
 import gsap from 'gsap'
 
diff --git a/src/private/demos/themes/slider/fashion-hero-v1.js b/src/private/demos/themes/slider/fashion-hero-v1.js
index 093bf7fd5ac..ea6497cac5e 100644
--- a/src/private/demos/themes/slider/fashion-hero-v1.js
+++ b/src/private/demos/themes/slider/fashion-hero-v1.js
@@ -1,5 +1,5 @@
 import { Xt } from 'xtend-library/src/xt.js'
-import 'xtend-library/src/vars.js'
+import 'xtend-library/src/variables.js'
 import 'xtend-library/src/extensions/slider/slider.js'
 import 'xtend-library/src/addons/slider/navigation-sides.js'
 import gsap from 'gsap'
diff --git a/src/private/demos/themes/slider/fashion-hero-v2.js b/src/private/demos/themes/slider/fashion-hero-v2.js
index 8908bfc48d2..02e370fd9bc 100644
--- a/src/private/demos/themes/slider/fashion-hero-v2.js
+++ b/src/private/demos/themes/slider/fashion-hero-v2.js
@@ -1,5 +1,5 @@
 import { Xt } from 'xtend-library/src/xt.js'
-import 'xtend-library/src/vars.js'
+import 'xtend-library/src/variables.js'
 import 'xtend-library/src/extensions/slider/slider.js'
 import 'xtend-library/src/addons/slider/navigation-sides.js'
 import gsap from 'gsap'
diff --git a/src/private/demos/themes/slider/furniture-hero-v1.js b/src/private/demos/themes/slider/furniture-hero-v1.js
index bd45e6928ae..f90e7da73e9 100644
--- a/src/private/demos/themes/slider/furniture-hero-v1.js
+++ b/src/private/demos/themes/slider/furniture-hero-v1.js
@@ -1,5 +1,5 @@
 import { Xt } from 'xtend-library/src/xt.js'
-import 'xtend-library/src/vars.js'
+import 'xtend-library/src/variables.js'
 import 'xtend-library/src/extensions/slider/slider.js'
 import 'xtend-library/src/addons/slider/navigation-sides.js'
 import gsap from 'gsap'
diff --git a/src/private/demos/themes/slider/industrial-hero-v1.js b/src/private/demos/themes/slider/industrial-hero-v1.js
index 29aa17b127a..4df42ed8a95 100644
--- a/src/private/demos/themes/slider/industrial-hero-v1.js
+++ b/src/private/demos/themes/slider/industrial-hero-v1.js
@@ -1,5 +1,5 @@
 import { Xt } from 'xtend-library/src/xt.js'
-import 'xtend-library/src/vars.js'
+import 'xtend-library/src/variables.js'
 import 'xtend-library/src/extensions/slider/slider.js'
 import gsap from 'gsap'
 
diff --git a/src/vars.js b/src/variables.js
similarity index 100%
rename from src/vars.js
rename to src/variables.js