From 5eff7e0883bda04ab93081b4e4fcf90a4f177ef3 Mon Sep 17 00:00:00 2001
From: Sara Vieira <hey@iamsaravieira.com>
Date: Mon, 5 Feb 2018 13:50:43 +0000
Subject: [PATCH] fix(my-joy-beta): animation speed based on component height

fixes #1137
---
 .../src/containers/create-instance/animated.js     | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/packages/my-joy-beta/src/containers/create-instance/animated.js b/packages/my-joy-beta/src/containers/create-instance/animated.js
index 81542288..871479e1 100644
--- a/packages/my-joy-beta/src/containers/create-instance/animated.js
+++ b/packages/my-joy-beta/src/containers/create-instance/animated.js
@@ -1,26 +1,25 @@
 import React, { Component } from 'react';
 import scrollToElement from 'scroll-to-element';
 
-const ANIMATION_TIME = 400;
-
-function slideDown(el, timing) {
+function slideDown(el) {
   const { style } = el;
   const INITIAL = 'initial';
   const HIDDEN = 'hidden';
-  timing = timing || `${ANIMATION_TIME}ms ease-out`;
 
   // Get element height
   style.transition = INITIAL;
   style.visibility = HIDDEN;
   style.maxHeight = INITIAL;
-  const height = el.offsetHeight + 'px';
+  const offsetHeight = el.offsetHeight;
+  const height = offsetHeight + 'px';
   style.removeProperty('visibility');
   style.maxHeight = '0';
   style.overflow = HIDDEN;
 
+  const timing = `${parseInt(height, 10) * 1.9}ms linear`;
+
   // Begin transition
   style.transition = `max-height ${timing}, opacity ${timing}`;
-
   requestAnimationFrame(() => {
     style.maxHeight = height;
     style.opacity = '1';
@@ -52,8 +51,7 @@ const Animated = WrappedComponent =>
         <div
           ref={w => {
             this.wrapper = w;
-          }}
-        >
+          }}>
           <WrappedComponent {...this.props} />
         </div>
       );