@@ -9,13 +9,23 @@ export default class AnimationHandler {
 
 static async getModule(modulePath) {
 if (!(modulePath in this.modules)) {
+const toCamelCase = path => {
+const fileName = path.match(/\/([^\.]+)(?:\.js)?$/)[1];
+return fileName.replace(/-([a-z])/g, (_, letter) =>
+letter.toUpperCase()
+);
+};
 const module = await import(modulePath);
-this.modules[modulePath] = module;
+this.modules[toCamelCase(modulePath)] = module;
 }
 
 return this.modules[modulePath];
 }
 
+async initDependencies() {
+return Promise.resolve();
+}
+
 begin() {
 throw new TypeError("Method 'begin' is not implemented.");
 }

@@ -7,8 +7,6 @@ export default class MotionAnimationHandler extends AnimationHandler {
 this.currentTransition = null;
 }
 
-static #transitionsModule = null;
-
 static #removeMotionCssClass(element) {
 const className = [...element.classList].find(cl =>
 cl.match(/js\-anim\-\-(rotate|scale)/)
@@ -20,27 +18,20 @@ export default class MotionAnimationHandler extends AnimationHandler {
 }
 }
 
-static async #initTransitionsModule() {
-if (!this.#transitionsModule) {
-this.#transitionsModule = await AnimationHandler.getModule(
-'./transitions.js'
-);
-}
+async initDependencies() {
+await AnimationHandler.getModule('./transitions.js');
 }
 
-async begin() {
-await MotionAnimationHandler.#initTransitionsModule();
-this.currentTransition =
-MotionAnimationHandler.#transitionsModule.getCurrentTransition(
-this.element
-);
+begin() {
+const { getCurrentTransition } = AnimationHandler.modules.transitions;
+this.currentTransition = getCurrentTransition(this.element);
 MotionAnimationHandler.#removeMotionCssClass(this.element);
 }
 
-async middle() {
-await MotionAnimationHandler.#initTransitionsModule();
+middle() {
 if (this.currentTransition) {
-MotionAnimationHandler.#transitionsModule.appendTransition(
+const { appendTransition } = AnimationHandler.modules.transitions;
+appendTransition(
 this.element,
 CLASS_NAMES[this.action][this.animationId],
 this.currentTransition

@@ -1,3 +1,4 @@
+import AnimationHandler from './AnimationHandler.js';
 import VisibilityAnimationHandler from './VisibilityAnimationHandler.js';
 
 export default class VisibilityAnimationWithParentResizeHandler extends VisibilityAnimationHandler {
@@ -9,76 +10,59 @@ export default class VisibilityAnimationWithParentResizeHandler extends Visibili
 this.parentMeasures = null;
 }
 
-setDimensionsTransition(heightTransition, widthTransition) {
+setDimensionsTransition({ heightTransition, widthTransition }) {
 this.heightTransition = heightTransition;
 this.widthTransition = widthTransition;
 }
 
-static #resizeParentModule = null;
-static #measurementsModule = null;
-
-static async #initResizeParentModule() {
-if (!VisibilityAnimationWithParentResizeHandler.#resizeParentModule) {
-VisibilityAnimationWithParentResizeHandler.#resizeParentModule =
-await this.getModule('./resize-parent.js');
-}
+async initDependencies() {
+await AnimationHandler.getModule('./resize-parent.js');
+await AnimationHandler.getModule('./measurements.js');
 }
 
-static async #initMeasurementsModule() {
-if (!VisibilityAnimationWithParentResizeHandler.#measurementsModule) {
-VisibilityAnimationWithParentResizeHandler.#measurementsModule =
-await this.getModule('./measurements.js');
-}
-}
-
-async begin() {
-await VisibilityAnimationWithParentResizeHandler.#initResizeParentModule();
+begin() {
 super.begin();
 
 if (this.widthTransition || this.heightTransition) {
-const parentData =
-VisibilityAnimationWithParentResizeHandler.#resizeParentModule.initParentResize(
-{
-element: this.element,
-action: this.action,
-widthTransition: this.widthTransition,
-heightTransition: this.heightTransition,
-}
-);
+const { initParentResize } = AnimationHandler.modules.resizeParent;
+
+const parentData = initParentResize({
+element: this.element,
+action: this.action,
+widthTransition: this.widthTransition,
+heightTransition: this.heightTransition,
+});
 
 this.parentMeasures = parentData.parentMeasures;
 this.dimension = parentData.dimension;
 }
 }
 
-async middle() {
-await VisibilityAnimationWithParentResizeHandler.#initMeasurementsModule();
+middle() {
 super.middle();
 
 setTimeout(() => {
-if (this.dimension)
-VisibilityAnimationWithParentResizeHandler.#measurementsModule.setParentMaxMeasures(
-{
-parentState: 'final',
-element: this.element,
-parentMeasures: this.parentMeasures,
-action: this.action,
-dimension: this.dimension,
-}
-);
+if (this.dimension) {
+const { setParentMaxMeasures } = AnimationHandler.modules.measurements;
+
+setParentMaxMeasures({
+parentState: 'final',
+element: this.element,
+parentMeasures: this.parentMeasures,
+action: this.action,
+dimension: this.dimension,
+});
+}
 }, 0);
 }
 
-async end() {
-await VisibilityAnimationWithParentResizeHandler.#initResizeParentModule();
+end() {
 super.end();
 
 const { widthTransition, heightTransition } = this;
 if (widthTransition || heightTransition) {
-VisibilityAnimationWithParentResizeHandler.#resizeParentModule.endParentResize(
-this.element,
-{ widthTransition, heightTransition }
-);
+const { endParentResize } = AnimationHandler.modules.resizeParent;
+endParentResize(this.element, { widthTransition, heightTransition });
 }
 }
 }

@@ -2,7 +2,6 @@
 * Handles all the animation process
 * @module animate
 */
-import VisibilityAnimationWithParentResizeHandler from './VisibilityAnimationWithParentResizeHandler.js';
 import {
 MOTION_ANIMS_ID,
 PROPERTY_NAMES,
@@ -343,46 +342,38 @@ const initCallback = (trigger, fn, type) => {
 
 const getAnimationHandler = async (animType, args) => {
 const { element, action, id } = args;
+let animationHandler = null;
+
 if (animType === 'motion') {
 const { default: MotionAnimationHandler } = await import(
 './MotionAnimationHandler.js'
 );
-return new MotionAnimationHandler(element, action, id);
-}
-
-if (animType === 'visibility') {
+animationHandler = new MotionAnimationHandler(element, action, id);
+} else if (animType === 'visibility') {
 const { widthTransition, heightTransition } = args;
 
 if (widthTransition || heightTransition) {
 const { default: VisibilityAnimationHandler } = await import(
 './VisibilityAnimationWithParentResizeHandler.js'
 );
-const animationHandler = new VisibilityAnimationHandler(
-element,
-action,
-id
-);
+animationHandler = new VisibilityAnimationHandler(element, action, id);
 animationHandler.setDimensionsTransition({
 heightTransition,
 widthTransition,
 });
-
-return animationHandler;
+} else {
+const { default: VisibilityAnimationHandler } = await import(
+'./VisibilityAnimationHandler.js'
+);
+animationHandler = new VisibilityAnimationHandler(element, action, id);
 }
 
-const { default: VisibilityAnimationHandler } = await import(
-'./VisibilityAnimationHandler.js'
-);
-const animationHandler = new VisibilityAnimationHandler(
-element,
-action,
-id
-);
 if (args.overflowHidden) animationHandler.setOverflowHidden(true);
 if (args.maintainSpace) animationHandler.setMaintainSpace(true);
-
-return animationHandler;
 }
+
+await animationHandler.initDependencies();
+return animationHandler;
 };
 
 /**
@@ -441,15 +432,15 @@ const animate = async (element, action, id, opts = {}) => {
 }
 };
 
-await handleAnimation.begin();
+handleAnimation.begin();
 if (typeof start === 'function') {
 initCallback(trigger, start, 'start');
 }
 element.classList.add(CLASS_NAMES[action][id]);
 element.classList.remove(CLASS_NAMES[OPPOSITE_ACTION[action]][id]);
-await handleAnimation.middle();
+handleAnimation.middle();
 
-setTimeout(() => {
+setTimeout(async () => {
 handleAnimation.end();
 if (typeof complete === 'function') {
 initCallback(trigger, complete, 'complete');
@@ -554,6 +545,17 @@ const init = (animationId, opts = {}) => {
 cursor,
 } = opts;
 
+/** TODO: load dependencies on page load */
+// async function loadDependencies() {
+// await import('./resize-parent.js');
+// await import('./measurements.js');
+// await import('./transitions.js');
+
+// removeEventListener('load', loadDependencies);
+// }
+
+// addEventListener('load', loadDependencies);
+
 document.querySelectorAll(trigger).forEach(btn => {
 btn.classList.add(CLASS_NAMES.btnCursor);
 if (typeof cursor === 'string') {