jQuery Slideup & Slidedown replacement with GSAP - TweenLite

index.js

import { TweenLite } from 'gsap';

const DEFAULT_DURATION = 0.3;

export const hideElement = (el, speed = DEFAULT_DURATION) => {
	const oldSpacing = { height: el.clientHeight };
	const newSpacing = { height: 0 };
	const additionalSpacingProperties = ['paddingTop', 'paddingBottom', 'marginTop', 'marginBottom'];

	additionalSpacingProperties.forEach(property => {
		const value = window.getComputedStyle(el)[property];
		if (value !== '0px') {
			oldSpacing[property] = value;
			newSpacing[property] = 0;
		}
	});

	el.showhideprops = oldSpacing;
	TweenLite.to(el, speed, {
		overflow: 'hidden',
		...newSpacing
	});
};

export const showElement = (el, speed = DEFAULT_DURATION) => {
	const showhideprops = el.showhideprops || {};
	TweenLite.to(el, speed, {
		clearProps: 'all',
		...showhideprops
	});
};

export default { showElement, hideElement };