From 33bd7e7cab3ef831309a6ea22027fdf7debdcbcf Mon Sep 17 00:00:00 2001
From: arunshenoy99 <devarunshenoy99@gmail.com>
Date: Tue, 24 Jan 2023 17:04:23 +0530
Subject: [PATCH 1/3] consolidate all animations across onboarding

---
 src/OnboardingSPA/components/Animate/index.js |  46 ++++-
 .../components/Animate/stylesheet.scss        | 177 +++++++++++++++++-
 .../CheckboxTemplate/CheckboxItem/index.js    |  83 ++++----
 .../CheckboxItem/stylesheet.scss              |   1 -
 .../DrawerPanel/Ecommerce/NavStoreInfo.js     |   5 +-
 .../Drawer/DrawerPanel/NavDesign.js           |   7 +-
 .../Drawer/DrawerPanel/NavGetStarted.js       |  37 ++--
 .../components/Drawer/DrawerPanel/NavPage.js  |  15 +-
 .../Drawer/DrawerPanel/NavPrimary.js          |   5 +-
 .../Drawer/DrawerPanel/WithDesignBack.js      |   5 +-
 .../components/Drawer/stylesheet.scss         |   6 -
 .../components/Layouts/Common.js              |  53 ++++--
 .../components/Layouts/stylesheet.scss        |   5 -
 .../LivePreview/BlockPreview/index.js         |  10 +-
 .../LivePreview/BlockPreview/stylesheet.scss  |   1 -
 .../SelectableCardWithInfo/index.js           |  10 +-
 .../components/Loaders/ImageUpload/index.js   |   7 +-
 .../Loaders/ImageUpload/stylesheet.scss       |  13 --
 .../RadioControlSkeleton/index.js             |  14 --
 .../RadioControlSkeleton/stylesheet.scss      |  22 ---
 .../RadioControlStateHandler/index.js         |  27 ---
 .../components/RadioControl/index.js          |   2 -
 .../LearnMore/Skeleton/SidebarSkeleton.js     |  62 ++++--
 .../LearnMore/Skeleton/stylesheet.scss        |   2 -
 src/OnboardingSPA/components/Tab/index.js     |  39 ++--
 .../pages/Steps/BasicInfo/basicInfoForm.js    |  13 +-
 .../Steps/Ecommerce/StepAddress/index.js      |   2 +-
 .../pages/Steps/Ecommerce/StepTax/index.js    |  10 +-
 .../GetStarted/GetStartedExperience/index.js  |  38 ++--
 .../pages/Steps/GetStarted/Welcome/index.js   |   1 +
 .../Steps/GetStarted/Welcome/stylesheet.scss  |   9 -
 .../Steps/GetStarted/Welcome/tabContent.json  |   9 +-
 .../pages/Steps/SitePages/stylesheet.scss     |   9 +-
 .../pages/Steps/WhatNext/index.js             |   1 +
 .../pages/Steps/WhatNext/stylesheet.scss      |   9 -
 .../pages/Steps/WhatNext/tabContent.json      |   9 +-
 src/OnboardingSPA/styles/_utilities.scss      |  93 ---------
 src/OnboardingSPA/styles/app.scss             |   1 -
 38 files changed, 473 insertions(+), 385 deletions(-)
 delete mode 100644 src/OnboardingSPA/components/RadioControl/RadioControlSkeleton/index.js
 delete mode 100644 src/OnboardingSPA/components/RadioControl/RadioControlSkeleton/stylesheet.scss
 delete mode 100644 src/OnboardingSPA/components/RadioControl/RadioControlStateHandler/index.js
 delete mode 100644 src/OnboardingSPA/components/RadioControl/index.js

diff --git a/src/OnboardingSPA/components/Animate/index.js b/src/OnboardingSPA/components/Animate/index.js
index fb9b58d18..d78559fb0 100644
--- a/src/OnboardingSPA/components/Animate/index.js
+++ b/src/OnboardingSPA/components/Animate/index.js
@@ -1,3 +1,5 @@
+import classNames from 'classnames';
+
 /**
  * A Animator to show animation
  *
@@ -5,7 +7,14 @@
  * @param { object | boolean } after The variable to look after for before showing the animation, by default true to show the children right away.
  *
  */
-const Animate = ( { type, after = true, children } ) => {
+const Animate = ( {
+	type,
+	after = true,
+	children,
+	className = '',
+	duration = false,
+	timingFunction = false,
+} ) => {
 	const prefix = 'animate';
 
 	/**
@@ -16,12 +25,35 @@ const Animate = ( { type, after = true, children } ) => {
 	function getAnimateClassName() {
 		if ( type ) {
 			let classname = '';
-
 			switch ( type ) {
 				// Add animation types and appropriate CSS
 				case 'fade-in':
 					classname = prefix.concat( '__fade-in' );
 					break;
+				case 'fade-in-disabled':
+					classname = prefix.concat( '__fade-in--disabled' );
+					break;
+				case 'fade-in-right':
+					classname = prefix.concat( '__fade-in--right' );
+					break;
+				case 'fade-in-left':
+					classname = prefix.concat( '__fade-in--left' );
+					break;
+				case 'fade-in-up':
+					classname = prefix.concat( '__fade-in--up' );
+					break;
+				case 'shine':
+					classname = prefix.concat( '__shine' );
+					break;
+				case 'shine-placeholder':
+					classname = prefix.concat( '__shine--placeholder' );
+					break;
+				case 'dropdown':
+					classname = prefix.concat( '__dropdown' );
+					break;
+				case 'load':
+					classname = prefix.concat( '__load' );
+					break;
 			}
 			return classname;
 		}
@@ -30,7 +62,15 @@ const Animate = ( { type, after = true, children } ) => {
 	return ! after ? (
 		<div className={ `${ prefix }__blank` }>{ children }</div>
 	) : (
-		<div className={ getAnimateClassName() }>{ children }</div>
+		<div
+			className={ classNames( getAnimateClassName(), className ) }
+			style={ {
+				animationDuration: duration,
+				animationTimingFunction: timingFunction,
+			} }
+		>
+			{ children }
+		</div>
 	);
 };
 
diff --git a/src/OnboardingSPA/components/Animate/stylesheet.scss b/src/OnboardingSPA/components/Animate/stylesheet.scss
index 04c4e89ba..2f187e862 100644
--- a/src/OnboardingSPA/components/Animate/stylesheet.scss
+++ b/src/OnboardingSPA/components/Animate/stylesheet.scss
@@ -1,11 +1,170 @@
+@keyframes fadeIn {
+
+	from {
+		opacity: 0;
+	}
+
+	to {
+		opacity: 1;
+	}
+}
+
+
+@keyframes fadeInRight {
+
+	from {
+		opacity: 0;
+		transform: translate3d(33%, 0, 0);
+	}
+
+	to {
+		opacity: 1;
+		transform: translate3d(0, 0, 0);
+	}
+}
+
+@keyframes fadeInLeft {
+
+	from {
+		opacity: 0;
+		transform: translate3d(-33%, 0, 0);
+	}
+
+	to {
+		opacity: 1;
+		transform: translate3d(0, 0, 0);
+	}
+}
+
+@keyframes fadeInUp {
+
+	from {
+		opacity: 0;
+		transform: translate3d(0, 33%, 0);
+	}
+
+	to {
+		opacity: 1;
+		transform: translate3d(0, 0, 0);
+	}
+}
+
+@keyframes fadeInWithDisabledClicks {
+
+	from {
+		opacity: 0;
+		pointer-events: none;
+	}
+
+	to {
+		opacity: 1;
+	}
+}
+
+@keyframes shine {
+
+	0% {
+		transform: translateX(-100%);
+	}
+
+	100% {
+		transform: translateX(100%);
+	}
+}
+
+@keyframes shine-placeholder {
+
+	0% {
+		background-position: -468px 0;
+	}
+
+	100% {
+		background-position: 468px 0;
+	}
+}
+
+@keyframes dropdown {
+
+	0% {
+		transform: rotateX(-90deg);
+	}
+
+	70% {
+		transform: rotateX(20deg);
+	}
+
+	100% {
+		transform: rotateX(0deg);
+	}
+}
+
+@keyframes load {
+
+	0% {
+		left: -100%;
+	}
+
+	100% {
+		left: 100%;
+	}
+}
+
 .animate {
-    
-    &__blank {
-        opacity: 0;
-        pointer-events: none;
-    }
-
-    &__fade-in {
-        animation: fadeInWithDisabledClicks 500ms ease-in;
-    }
+
+	&__blank {
+		opacity: 0;
+		pointer-events: none;
+	}
+
+	&__shine {
+		animation: shine 1.5s linear infinite;
+
+		&--placeholder {
+			animation: shine-placeholder 1.5s linear infinite;
+		}
+	}
+
+	&__dropdown {
+		animation: dropdown 400ms ease-in-out forwards;
+	}
+
+	&__fade-in {
+
+		animation: fadeIn 100ms ease-in-out;
+
+		&--disabled {
+			animation: fadeInWithDisabledClicks 500ms ease-in;
+		}
+
+		&--right {
+			animation: fadeInRight 360ms ease-out;
+
+			@media (prefers-reduced-motion) {
+				animation: none !important;
+				translation: none !important;
+			}
+		}
+
+		&--left {
+			animation: fadeInLeft 360ms ease-out;
+
+			@media (prefers-reduced-motion) {
+				animation: none !important;
+				translation: none !important;
+			}
+		}
+
+		&--up {
+			animation: fadeInUp 360ms ease-out;
+
+			@media (prefers-reduced-motion) {
+				animation: none !important;
+				translation: none !important;
+			}
+		}
+	}
+
+	&__load {
+		animation: load 3s linear infinite;
+	}
 }
diff --git a/src/OnboardingSPA/components/CheckboxTemplate/CheckboxItem/index.js b/src/OnboardingSPA/components/CheckboxTemplate/CheckboxItem/index.js
index 7681fb09e..35368719f 100644
--- a/src/OnboardingSPA/components/CheckboxTemplate/CheckboxItem/index.js
+++ b/src/OnboardingSPA/components/CheckboxTemplate/CheckboxItem/index.js
@@ -1,7 +1,8 @@
 import { useState } from '@wordpress/element';
-import { Icon, help, box } from '@wordpress/icons';
+import { Icon, help } from '@wordpress/icons';
 
 import { CheckboxControl } from '@wordpress/components';
+import Animate from '../../Animate';
 
 /**
  * Checkbox Item Component
@@ -40,70 +41,78 @@ const CheckboxItem = ( {
 	return (
 		<div>
 			<div
-				className={`${ className } ${isSelected && `${ className }--selected`
-					} ${showDescription && `${ className }--shown`}`}
+				className={ `${ className } ${
+					isSelected && `${ className }--selected`
+				} ${ showDescription && `${ className }--shown` }` }
 			>
-				<div className={`${ className }-container`}>
+				<div className={ `${ className }-container` }>
 					<CheckboxControl
-						checked={isSelected}
-						onChange={handleCheck}
-						className={`${ className }-checkbox`}
+						checked={ isSelected }
+						onChange={ handleCheck }
+						className={ `${ className }-checkbox` }
 					/>
-					<div className={`${ className }__contents`}>
+					<div className={ `${ className }__contents` }>
 						<div
-							className={`${ className }__contents-icon
-                                     ${isSelected &&
-								`${ className }__contents-icon--selected`
-								}
-                                     ${showDescription &&
-								`${ className }__contents-icon--shown`
-								}`}
+							className={ `${ className }__contents-icon
+                                     ${
+											isSelected &&
+											`${ className }__contents-icon--selected`
+										}
+                                     ${
+											showDescription &&
+											`${ className }__contents-icon--shown`
+										}` }
 						>
 							<div
-								style={{
+								style={ {
 									width: '35px',
 									height: '35px',
 									backgroundPosition: 'center',
 									backgroundRepeat: 'no-repeat',
-									backgroundImage: `var(${icon}${isSelected ? '--light' : ''
-										})`,
-								}}
+									backgroundImage: `var(${ icon }${
+										isSelected ? '--light' : ''
+									})`,
+								} }
 							/>
 						</div>
-						<div className={`${className }__contents-text`}>
+						<div className={ `${ className }__contents-text` }>
 							<div
-								className={`${ className }__contents-text-title ${isSelected &&
+								className={ `${ className }__contents-text-title ${
+									isSelected &&
 									`${ className }__contents-text-title--selected`
-									}`}
+								}` }
 							>
-								{title}
+								{ title }
 							</div>
-							<div className={`${ className }__contents-text-subtitle`}>
-								{subtitle}
+							<div
+								className={ `${ className }__contents-text-subtitle` }
+							>
+								{ subtitle }
 							</div>
 						</div>
 						<div
-							className={`${ className }__contents-help`}
-							onClick={handleShowDesc}
+							className={ `${ className }__contents-help` }
+							onClick={ handleShowDesc }
 						>
 							<Icon
-								icon={help}
-								style={{
+								icon={ help }
+								style={ {
 									width: '30px',
 									height: '30px',
-									fill: `${showDescription ? '#1C5CBA' : '#666666'
-										}`,
-								}}
+									fill: `${
+										showDescription ? '#1C5CBA' : '#666666'
+									}`,
+								} }
 							/>
 						</div>
 					</div>
 				</div>
 			</div>
-			{
-				showDescription && (
-					<div className={`${ className }__desc`}>{desc}</div>
-				)
-			}
+			{ showDescription && (
+				<Animate type={ 'dropdown' }>
+					<div className={ `${ className }__desc` }>{ desc }</div>
+				</Animate>
+			) }
 		</div>
 	);
 };
diff --git a/src/OnboardingSPA/components/CheckboxTemplate/CheckboxItem/stylesheet.scss b/src/OnboardingSPA/components/CheckboxTemplate/CheckboxItem/stylesheet.scss
index 2e41a909a..5649992ef 100644
--- a/src/OnboardingSPA/components/CheckboxTemplate/CheckboxItem/stylesheet.scss
+++ b/src/OnboardingSPA/components/CheckboxTemplate/CheckboxItem/stylesheet.scss
@@ -116,7 +116,6 @@ $box-shadow: var(--nfd-onboarding-light-gray-highlighted);
         border-left: 1px solid rgba($main-color, 0.1);
         border-right: 1px solid rgba($main-color, 0.1);
         border-bottom: 1px solid rgba($main-color, 0.1);
-        animation: dropdown 400ms ease-in-out forwards;
         box-shadow: 0px 11px 8px -3px rgba($main-color, 0.20);
     }
 }
\ No newline at end of file
diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/Ecommerce/NavStoreInfo.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/Ecommerce/NavStoreInfo.js
index c9d3ad48c..dafeaa490 100644
--- a/src/OnboardingSPA/components/Drawer/DrawerPanel/Ecommerce/NavStoreInfo.js
+++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/Ecommerce/NavStoreInfo.js
@@ -6,6 +6,7 @@ import { NavLink } from 'react-router-dom';
 import { VIEW_NAV_PRIMARY } from '../../../../../constants';
 import { __ } from '@wordpress/i18n';
 import { store as nfdOnboardingStore } from '../../../../store';
+import Animate from '../../../Animate';
 
 const NavStoreInfo = () => {
 	const { storeInfoSteps } = useSelect( ( select ) => {
@@ -16,7 +17,7 @@ const NavStoreInfo = () => {
 	const { setDrawerActiveView } = useDispatch( nfdOnboardingStore );
 
 	return (
-		<div className="is-drawer-fade">
+		<Animate type={ 'fade-in' } duration="100ms" timingFunction="ease-in">
 			<Button
 				className="nfd-onboarding-drawer__panel-back"
 				variant="tertiary"
@@ -49,7 +50,7 @@ const NavStoreInfo = () => {
 					} ) }
 				</ul>
 			</div>
-		</div>
+		</Animate>
 	);
 };
 
diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/NavDesign.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/NavDesign.js
index f567c9d3f..eeaeba7cf 100644
--- a/src/OnboardingSPA/components/Drawer/DrawerPanel/NavDesign.js
+++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/NavDesign.js
@@ -7,6 +7,7 @@ import { VIEW_NAV_PRIMARY } from '../../../../constants';
 import { __ } from '@wordpress/i18n';
 import { store as nfdOnboardingStore } from '../../../store';
 import classNames from 'classnames';
+import Animate from '../../Animate';
 
 const NavDesign = () => {
 	const { designSteps } = useSelect( ( select ) => {
@@ -19,14 +20,14 @@ const NavDesign = () => {
 	const location = useLocation();
 
 	return (
-		<div className="is-drawer-fade">
+		<Animate type={ 'fade-in' } duration="100ms" timingFunction="ease-in">
 			<Button
 				className="nfd-onboarding-drawer__panel-back"
 				variant="tertiary"
 				icon={ chevronLeft }
 				onClick={ () => setDrawerActiveView( VIEW_NAV_PRIMARY ) }
 			>
-				{__('Onboarding Menu', 'wp-module-onboarding')}
+				{ __( 'Onboarding Menu', 'wp-module-onboarding' ) }
 			</Button>
 			<div className="nfd-onboarding-drawer__panel-menu">
 				<ul className="nfd-onboarding-drawer__panel-routes">
@@ -62,7 +63,7 @@ const NavDesign = () => {
 					} ) }
 				</ul>
 			</div>
-		</div>
+		</Animate>
 	);
 };
 
diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/NavGetStarted.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/NavGetStarted.js
index 29533044f..5c72690e8 100644
--- a/src/OnboardingSPA/components/Drawer/DrawerPanel/NavGetStarted.js
+++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/NavGetStarted.js
@@ -6,50 +6,51 @@ import { NavLink } from 'react-router-dom';
 import { VIEW_NAV_PRIMARY } from '../../../../constants';
 import { __ } from '@wordpress/i18n';
 import { store as nfdOnboardingStore } from '../../../store';
+import Animate from '../../Animate';
 
 const NavGetStarted = () => {
-	const { getStartedSteps } = useSelect((select) => {
+	const { getStartedSteps } = useSelect( ( select ) => {
 		return {
-			getStartedSteps: select(nfdOnboardingStore).getGetStartedSteps(),
+			getStartedSteps: select( nfdOnboardingStore ).getGetStartedSteps(),
 		};
-	}, []);
-	const { setDrawerActiveView } = useDispatch(nfdOnboardingStore);
+	}, [] );
+	const { setDrawerActiveView } = useDispatch( nfdOnboardingStore );
 
 	return (
-		<div className="is-drawer-fade">
+		<Animate type={ 'fade-in' } duration="100ms" timingFunction="ease-in">
 			<Button
 				className="nfd-onboarding-drawer__panel-back"
 				variant="tertiary"
-				icon={chevronLeft}
-				onClick={() => setDrawerActiveView(VIEW_NAV_PRIMARY)}
+				icon={ chevronLeft }
+				onClick={ () => setDrawerActiveView( VIEW_NAV_PRIMARY ) }
 			>
-				{__('Onboarding Menu', 'wp-module-onboarding')}
+				{ __( 'Onboarding Menu', 'wp-module-onboarding' ) }
 			</Button>
 			<div className="nfd-onboarding-drawer__panel-menu">
 				<ul className="nfd-onboarding-drawer__panel-routes">
-					{getStartedSteps.map((step) => {
+					{ getStartedSteps.map( ( step ) => {
 						return (
 							<li
-								key={step.path}
+								key={ step.path }
 								className="nfd-onboarding-drawer__panel-menu-item"
 							>
 								<NavLink
-									to={step.path}
+									to={ step.path }
 									className="nfd-onboarding-drawer__panel-menu-link"
-									state={{ origin: 'drawer-nav' }}
-									onClick={() =>
-										setDrawerActiveView(step.VIEW)
+									state={ { origin: 'drawer-nav' } }
+									onClick={ () =>
+										setDrawerActiveView( step.VIEW )
 									}
 								>
-									<Icon icon={step.Icon} />
-									<span>{step.title}</span>
+									<Icon icon={ step.Icon } />
+									<span>{ step.title }</span>
 								</NavLink>
 							</li>
 						);
-					})}
+					} ) }
 				</ul>
 			</div>
-		</div>
+		</Animate>
 	);
 };
 
diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/NavPage.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/NavPage.js
index 74ca8fd74..041e3650e 100644
--- a/src/OnboardingSPA/components/Drawer/DrawerPanel/NavPage.js
+++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/NavPage.js
@@ -1,25 +1,26 @@
-import { Icon, chevronLeft } from '@wordpress/icons';
+import { chevronLeft } from '@wordpress/icons';
 
 import { Button } from '@wordpress/components';
 import { VIEW_NAV_PRIMARY } from '../../../../constants';
 import { __ } from '@wordpress/i18n';
 import { store as nfdOnboardingStore } from '../../../store';
 import { useDispatch } from '@wordpress/data';
+import Animate from '../../Animate';
 
 const NavPage = () => {
-	const { setDrawerActiveView } = useDispatch(nfdOnboardingStore);
+	const { setDrawerActiveView } = useDispatch( nfdOnboardingStore );
 
 	return (
-		<div className="is-drawer-fade">
+		<Animate type={ 'fade-in' } duration="100ms" timingFunction="ease-in">
 			<Button
 				className="nfd-onboarding-drawer__panel-back"
 				variant="tertiary"
-				icon={chevronLeft}
-				onClick={() => setDrawerActiveView(VIEW_NAV_PRIMARY)}
+				icon={ chevronLeft }
+				onClick={ () => setDrawerActiveView( VIEW_NAV_PRIMARY ) }
 			>
-				{__('Resume Onboarding', 'wp-module-onboarding')}
+				{ __( 'Resume Onboarding', 'wp-module-onboarding' ) }
 			</Button>
-		</div>
+		</Animate>
 	);
 };
 
diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/NavPrimary.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/NavPrimary.js
index b90400c80..0494d4f69 100644
--- a/src/OnboardingSPA/components/Drawer/DrawerPanel/NavPrimary.js
+++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/NavPrimary.js
@@ -7,6 +7,7 @@ import { Icon } from '@wordpress/icons';
 import { store as nfdOnboardingStore } from '../../../store';
 import { useSelect, useDispatch } from '@wordpress/data';
 import classNames from 'classnames';
+import Animate from '../../Animate';
 
 const NavPrimary = () => {
 	const navigate = useNavigate();
@@ -21,7 +22,7 @@ const NavPrimary = () => {
 
 	const isFirstStep = topSteps[ 0 ].path === location.pathname;
 	return (
-		<div className="is-drawer-fade">
+		<Animate type={ 'fade-in' } duration="100ms" timingFunction="ease-in">
 			{ ( isFirstStep && (
 				<Button
 					className="nfd-onboarding-drawer__panel-back"
@@ -78,7 +79,7 @@ const NavPrimary = () => {
 					} ) }
 				</ul>
 			</div>
-		</div>
+		</Animate>
 	);
 };
 
diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/WithDesignBack.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/WithDesignBack.js
index ec5924a94..a54b169e8 100644
--- a/src/OnboardingSPA/components/Drawer/DrawerPanel/WithDesignBack.js
+++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/WithDesignBack.js
@@ -5,12 +5,13 @@ import { useDispatch } from '@wordpress/data';
 
 import { store as nfdOnboardingStore } from '../../../store';
 import { VIEW_NAV_DESIGN } from '../../../../constants';
+import Animate from '../../Animate';
 
 const WithDesignBack = ( { children } ) => {
 	const { setDrawerActiveView } = useDispatch( nfdOnboardingStore );
 
 	return (
-		<div className="is-drawer-fade">
+		<Animate type={ 'fade-in' } duration="100ms" timingFunction="ease-in">
 			<Button
 				className="nfd-onboarding-drawer__panel-back"
 				variant="tertiary"
@@ -20,7 +21,7 @@ const WithDesignBack = ( { children } ) => {
 				{ __( 'Design', 'wp-module-onboarding' ) }
 			</Button>
 			{ children }
-		</div>
+		</Animate>
 	);
 };
 
diff --git a/src/OnboardingSPA/components/Drawer/stylesheet.scss b/src/OnboardingSPA/components/Drawer/stylesheet.scss
index 0a0f41e8f..d896837a3 100644
--- a/src/OnboardingSPA/components/Drawer/stylesheet.scss
+++ b/src/OnboardingSPA/components/Drawer/stylesheet.scss
@@ -226,12 +226,6 @@
 	}
 }
 
-.is-drawer-fade {
-	animation-name: fadeIn;
-	animation-duration: 100ms;
-	animation-timing-function: ease-in;
-}
-
 /*COLOR VARIABLES*/
 $main-color-dark: var(--nfd-onboarding-dark);
 $main-color-light: var(--nfd-onboarding-white);
diff --git a/src/OnboardingSPA/components/Layouts/Common.js b/src/OnboardingSPA/components/Layouts/Common.js
index 69bd32589..0fb1a0d45 100644
--- a/src/OnboardingSPA/components/Layouts/Common.js
+++ b/src/OnboardingSPA/components/Layouts/Common.js
@@ -1,24 +1,32 @@
-import { Animate } from '@wordpress/components';
 import BaseLayout from './Base';
 import { Fragment } from '@wordpress/element';
 import classNames from 'classnames';
+import Animate from '../Animate';
 
 /**
  *
  * @param {*} param0
- * @returns
+ * @return
  */
-const InnerContainer = ({ children }) => {
-	return <section className="is-contained">{children}</section>;
+const InnerContainer = ( { children } ) => {
+	return <section className="is-contained">{ children }</section>;
 };
 
 /**
  * The Common Layout extends the Base Layout and applies structural styles and animations.
  *
- * @param {object} props
- * @returns
+ * @param {Object} props
+ * @param          props.className
+ * @param          props.children
+ * @param          props.isBgPrimary
+ * @param          props.isCentered
+ * @param          props.isVerticallyCentered
+ * @param          props.isContained
+ * @param          props.isPadded
+ * @param          props.isFadeIn
+ * @return
  */
-const CommonLayout = ({
+const CommonLayout = ( {
 	className = '',
 	children,
 	isBgPrimary = false,
@@ -27,22 +35,27 @@ const CommonLayout = ({
 	isContained = false,
 	isPadded = false,
 	isFadeIn = true,
-}) => {
+} ) => {
 	const Container = isContained ? InnerContainer : Fragment;
 	return (
-		<BaseLayout
-			className={classNames(
-				'nfd-onboarding-layout__common',
-				className,
-				{ 'is-layout-fade-in': isFadeIn },
-				{ 'is-bg-primary': isBgPrimary },
-				{ 'is-centered': isCentered },
-				{ 'is-vertically-centered': isVerticallyCentered },
-				{ 'is-padded': isPadded }
-			)}
+		<Animate
+			type={ isFadeIn && 'fade-in' }
+			duration={ '233ms' }
+			timingFunction={ 'ease-in-out' }
 		>
-			<Container>{children}</Container>
-		</BaseLayout>
+			<BaseLayout
+				className={ classNames(
+					'nfd-onboarding-layout__common',
+					className,
+					{ 'is-bg-primary': isBgPrimary },
+					{ 'is-centered': isCentered },
+					{ 'is-vertically-centered': isVerticallyCentered },
+					{ 'is-padded': isPadded }
+				) }
+			>
+				<Container>{ children }</Container>
+			</BaseLayout>
+		</Animate>
 	);
 };
 
diff --git a/src/OnboardingSPA/components/Layouts/stylesheet.scss b/src/OnboardingSPA/components/Layouts/stylesheet.scss
index d40513f3e..f17bfc953 100644
--- a/src/OnboardingSPA/components/Layouts/stylesheet.scss
+++ b/src/OnboardingSPA/components/Layouts/stylesheet.scss
@@ -3,11 +3,6 @@
     @include break-medium {
         min-height: calc(100vh - #{$header-height} - #{$border-width});
     }
-    &.is-layout-fade-in {
-        animation-name: fadeIn;
-        animation-duration: 233ms;
-        animation-timing-function: ease-in-out;
-    }
     &.is-padded {
         min-height: calc(100vw - #{$header-height} - #{$border-width} - #{$grid-unit * 18} - #{$admin-bar-height-big});
         @include break-medium {
diff --git a/src/OnboardingSPA/components/LivePreview/BlockPreview/index.js b/src/OnboardingSPA/components/LivePreview/BlockPreview/index.js
index f9fdee0a2..e34a32660 100644
--- a/src/OnboardingSPA/components/LivePreview/BlockPreview/index.js
+++ b/src/OnboardingSPA/components/LivePreview/BlockPreview/index.js
@@ -6,6 +6,7 @@ import { useEffect, useState } from '@wordpress/element';
 import AutoHeightBlockPreview from './auto';
 import { useGlobalStylesOutput } from '../../../utils/global-styles/use-global-styles-output';
 import { store as nfdOnboardingStore } from '../../../store';
+import Animate from '../../Animate';
 
 /**
  * Renders themed WordPress block grammer.
@@ -80,13 +81,16 @@ const BlockPreview = ( {
 			{ loading && (
 				<div className="live-preview__container--is-skeleton">
 					<div className="live-preview__container--is-skeleton--box live-preview__container--is-skeleton--box-header">
-						<div className={ `live-preview__container--is-skeleton--shimmer` } />
+						<Animate
+							type={ 'shine' }
+							className="live-preview__container--is-skeleton--shimmer"
+						></Animate>
 					</div>
 					<div className="live-preview__container--is-skeleton--box live-preview__container--is-skeleton--box-body-1" />
 					<div className="live-preview__container--is-skeleton--box live-preview__container--is-skeleton--box-body-2" />
 					<div className="live-preview__container--is-skeleton--box live-preview__container--is-skeleton--box-footer" />
-				</div> 
-			)}
+				</div>
+			) }
 			{ settings && (
 				<BlockEditorProvider
 					value={ blocks }
diff --git a/src/OnboardingSPA/components/LivePreview/BlockPreview/stylesheet.scss b/src/OnboardingSPA/components/LivePreview/BlockPreview/stylesheet.scss
index 53c4e4712..b1ba38652 100644
--- a/src/OnboardingSPA/components/LivePreview/BlockPreview/stylesheet.scss
+++ b/src/OnboardingSPA/components/LivePreview/BlockPreview/stylesheet.scss
@@ -67,7 +67,6 @@ $main-color-light-rgb: var(--nfd-onboarding-white-rgb);
 						rgba($main-color-light-rgb, 0.4) 90%,
 						rgba($main-color-light-rgb, 0.02) 100%,
 						$main-color-grey);
-				animation: shine 1.5s linear infinite;
 			}
 		}
 	}
diff --git a/src/OnboardingSPA/components/LivePreview/SelectableCardWithInfo/index.js b/src/OnboardingSPA/components/LivePreview/SelectableCardWithInfo/index.js
index fa8e93aa0..c7bf3d46f 100644
--- a/src/OnboardingSPA/components/LivePreview/SelectableCardWithInfo/index.js
+++ b/src/OnboardingSPA/components/LivePreview/SelectableCardWithInfo/index.js
@@ -3,6 +3,7 @@ import { Icon, help } from '@wordpress/icons';
 import { CheckboxControl } from '@wordpress/components';
 
 import { LivePreview } from '..';
+import Animate from '../../Animate';
 
 const SelectableCardWithInfo = ( {
 	className = 'live-preview--selectable-card--title-description',
@@ -80,8 +81,11 @@ const SelectableCardWithInfo = ( {
 				</div>
 			</div>
 			{ showDescription && (
-				<div
-					className={ `${ className }__description--container` }
+				<Animate
+					type={ 'dropdown' }
+					className={ `${ className }__description--container ${
+						showDescription ? 'highlighted' : 'not-highlighted'
+					}` }
 					style={ {
 						backgroundColor: showDescription
 							? 'var(--nfd-onboarding-light-gray-highlighted)'
@@ -91,7 +95,7 @@ const SelectableCardWithInfo = ( {
 					<p className={ `${ className }__description--text` }>
 						{ description }
 					</p>
-				</div>
+				</Animate>
 			) }
 		</div>
 	);
diff --git a/src/OnboardingSPA/components/Loaders/ImageUpload/index.js b/src/OnboardingSPA/components/Loaders/ImageUpload/index.js
index 6fde645e0..b22795070 100644
--- a/src/OnboardingSPA/components/Loaders/ImageUpload/index.js
+++ b/src/OnboardingSPA/components/Loaders/ImageUpload/index.js
@@ -1,7 +1,12 @@
+import Animate from '../../Animate';
+
 const ImageUploadLoader = () => {
 	return (
 		<div className="image-upload-loader--loading-box">
-			<div className="image-upload-loader--loading-box__loader"></div>
+			<Animate
+				type={ 'load' }
+				className="image-upload-loader--loading-box__loader"
+			></Animate>
 		</div>
 	);
 };
diff --git a/src/OnboardingSPA/components/Loaders/ImageUpload/stylesheet.scss b/src/OnboardingSPA/components/Loaders/ImageUpload/stylesheet.scss
index 4dec6c459..8147ea413 100644
--- a/src/OnboardingSPA/components/Loaders/ImageUpload/stylesheet.scss
+++ b/src/OnboardingSPA/components/Loaders/ImageUpload/stylesheet.scss
@@ -15,19 +15,6 @@
 			border-radius: 50px;
 			background: linear-gradient(45deg, #b6b5ff, #ff9797);
 			left: -100%;
-			animation: load 3s linear infinite;
-		}
-	}
-
-	// Loading Animation
-	@keyframes load {
-
-		0% {
-			left: -100%;
-		}
-
-		100% {
-			left: 100%;
 		}
 	}
 
diff --git a/src/OnboardingSPA/components/RadioControl/RadioControlSkeleton/index.js b/src/OnboardingSPA/components/RadioControl/RadioControlSkeleton/index.js
deleted file mode 100644
index 8160d73ce..000000000
--- a/src/OnboardingSPA/components/RadioControl/RadioControlSkeleton/index.js
+++ /dev/null
@@ -1,14 +0,0 @@
-/**
- * Renders Skeletons for Radio Control.
- *
- * @param {number} options       The options to be renedered
- *
- */
-const RadioControlSkeleton = ({ options }) => {
-
-    return <div className="radio-control-skeleton">
-            {options.map((option) => (<div className="radio-control-skeleton-item" />))}
-        </div>;
-};
-
-export default RadioControlSkeleton;
\ No newline at end of file
diff --git a/src/OnboardingSPA/components/RadioControl/RadioControlSkeleton/stylesheet.scss b/src/OnboardingSPA/components/RadioControl/RadioControlSkeleton/stylesheet.scss
deleted file mode 100644
index b31051c56..000000000
--- a/src/OnboardingSPA/components/RadioControl/RadioControlSkeleton/stylesheet.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-/*COLOR VARIABLES*/
-$white-offset: rgb(224, 224, 224);
-$main-color-light: var(--nfd-onboarding-white);
-
-.radio-control {
-
-    &-main {
-        animation: fadeIn 300ms ease-in;
-    }
-
-    &-skeleton {
-        margin: 30px;
-        
-        &-item {
-            height: 32px;
-            margin: 12px;
-            padding: 10px;
-            background: transparent;
-        }
-    }
-    
-}
\ No newline at end of file
diff --git a/src/OnboardingSPA/components/RadioControl/RadioControlStateHandler/index.js b/src/OnboardingSPA/components/RadioControl/RadioControlStateHandler/index.js
deleted file mode 100644
index 1a14ce86f..000000000
--- a/src/OnboardingSPA/components/RadioControl/RadioControlStateHandler/index.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import { useState, useEffect } from '@wordpress/element';
-import RadioControlSkeleton from '../RadioControlSkeleton';
-
-/**
- * A State Handler to manage Radio Control
- *
- * @param {number} options           The options to be renedered.
- * @param {string} children          The children to be rendered out.
- * @param {number} watch             The variable to be awaited for to be fetched.
- *
- */
-const RadioControlStateHandler = ({ options, watch, children }) => {
-    const [rerender, doRerender] = useState(0);
-
-    useEffect(() => doRerender(1), [watch]);
-
-    return !watch ? (
-        <RadioControlSkeleton options={options} />
-    ) : (
-        <>
-            {<div style={{ display: 'none' }}>{rerender}</div>}
-            {children}
-        </>
-    );
-};
-
-export default RadioControlStateHandler;
\ No newline at end of file
diff --git a/src/OnboardingSPA/components/RadioControl/index.js b/src/OnboardingSPA/components/RadioControl/index.js
deleted file mode 100644
index f8741d0c3..000000000
--- a/src/OnboardingSPA/components/RadioControl/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default as RadioControlSkeleton } from './RadioControlSkeleton';
-export { default as RadioControlStateHandler } from './RadioControlStateHandler';
\ No newline at end of file
diff --git a/src/OnboardingSPA/components/Sidebar/components/LearnMore/Skeleton/SidebarSkeleton.js b/src/OnboardingSPA/components/Sidebar/components/LearnMore/Skeleton/SidebarSkeleton.js
index ed201d339..24434aa27 100644
--- a/src/OnboardingSPA/components/Sidebar/components/LearnMore/Skeleton/SidebarSkeleton.js
+++ b/src/OnboardingSPA/components/Sidebar/components/LearnMore/Skeleton/SidebarSkeleton.js
@@ -1,34 +1,72 @@
+import Animate from '../../../../Animate';
+
 /** Skeleton Structure for the SideBar */
 const SidebarSkeleton = () => {
 	return (
 		<div className="sidebar-skeleton">
 			<div className="sidebar-skeleton-header">
 				<div className="sidebar-skeleton-header-top">
-					<div className="shimmer sidebar-skeleton-header-top-profile" />
-					<div className="shimmer sidebar-skeleton-header-top-header" />
+					<Animate
+						type={ 'shine-placeholder' }
+						className="shimmer sidebar-skeleton-header-top-profile"
+					/>
+					<Animate
+						type={ 'shine-placeholder' }
+						className="shimmer sidebar-skeleton-header-top-header"
+					/>
 				</div>
 				<div className="sidebar-skeleton-header-below">
-					<div className="shimmer sidebar-skeleton-header-below-subheading-1" />
-					<div className="shimmer sidebar-skeleton-header-below-subheading-2" />
+					<Animate
+						type={ 'shine-placeholder' }
+						className="shimmer sidebar-skeleton-header-below-subheading-1"
+					/>
+					<Animate
+						type={ 'shine-placeholder' }
+						className="shimmer sidebar-skeleton-header-below-subheading-2"
+					/>
 				</div>
 			</div>
 			<div className="sidebar-skeleton-divider" />
 			<div className="sidebar-skeleton-body">
-				<div className="shimmer sidebar-skeleton-body-image" />
+				<Animate
+					type={ 'shine-placeholder' }
+					className="shimmer sidebar-skeleton-body-image"
+				/>
 			</div>
 			<div className="sidebar-skeleton-divider" />
 			<div className="sidebar-skeleton-footer">
-				<div className="shimmer sidebar-skeleton-footer-line-1" />
-				<div className="shimmer sidebar-skeleton-footer-line-2" />
-				<div className="shimmer sidebar-skeleton-footer-line-3" />
-				<div className="shimmer sidebar-skeleton-footer-line-4" />
-				<div className="shimmer sidebar-skeleton-footer-line-5" />
+				<Animate
+					type={ 'shine-placeholder' }
+					className="shimmer sidebar-skeleton-footer-line-1"
+				/>
+				<Animate
+					type={ 'shine-placeholder' }
+					className="shimmer sidebar-skeleton-footer-line-2"
+				/>
+				<Animate
+					type={ 'shine-placeholder' }
+					className="shimmer sidebar-skeleton-footer-line-3"
+				/>
+				<Animate
+					type={ 'shine-placeholder' }
+					className="shimmer sidebar-skeleton-footer-line-4"
+				/>
+				<Animate
+					type={ 'shine-placeholder' }
+					className="shimmer sidebar-skeleton-footer-line-5"
+				/>
 
 				<div className="sidebar-skeleton-footer-buttons">
 					<div className="sidebar-skeleton-footer-buttons-button-1">
-						<div className="shimmer-1 sidebar-skeleton-footer-buttons-button-2" />
+						<Animate
+							type={ 'shine-placeholder' }
+							className="shimmer-1 sidebar-skeleton-footer-buttons-button-2"
+						/>
 					</div>
-					<div className="shimmer-1 sidebar-skeleton-footer-buttons-button-3" />
+					<Animate
+						type={ 'shine-placeholder' }
+						className="shimmer-1 sidebar-skeleton-footer-buttons-button-3"
+					/>
 				</div>
 			</div>
 		</div>
diff --git a/src/OnboardingSPA/components/Sidebar/components/LearnMore/Skeleton/stylesheet.scss b/src/OnboardingSPA/components/Sidebar/components/LearnMore/Skeleton/stylesheet.scss
index 9f91be7ed..0b2022807 100644
--- a/src/OnboardingSPA/components/Sidebar/components/LearnMore/Skeleton/stylesheet.scss
+++ b/src/OnboardingSPA/components/Sidebar/components/LearnMore/Skeleton/stylesheet.scss
@@ -141,7 +141,6 @@ $main-color-light-rgb: var(--nfd-onboarding-white-rgb);
 .shimmer {
     background: $grey-color;
     background-repeat: no-repeat;
-    animation: shine-placeholder 1.5s linear infinite;
     background-image: linear-gradient(to right, 
                     $grey-color 0%, 
                     $main-color-grey 20%, 
@@ -152,7 +151,6 @@ $main-color-light-rgb: var(--nfd-onboarding-white-rgb);
 .shimmer-1 {
     background: rgba($main-color, 0.4);
     background-repeat: no-repeat;
-    animation: shine-placeholder 1.5s linear infinite;
     background-image: linear-gradient(to right,
             rgba($main-color, 0.4) 0%,
             rgba($main-color, 0.6) 20%,
diff --git a/src/OnboardingSPA/components/Tab/index.js b/src/OnboardingSPA/components/Tab/index.js
index 40967183e..26214741d 100644
--- a/src/OnboardingSPA/components/Tab/index.js
+++ b/src/OnboardingSPA/components/Tab/index.js
@@ -1,24 +1,27 @@
 /**
-* Common Tab Component
-*
-* @returns Tab
-*/
+ * Common Tab Component
+ *
+ * @return Tab
+ */
 
-const Tab = ({ title, text, imgType, className }) => {
-    return (
-        <div className={className}>
-            <div className="tab-text">
-                <h4>{title}</h4>
-                {text}
-            </div>
-            <div className="tab-image">
-                <div class="tab-img">
-                    <div className={imgType}></div>
-                </div>
-            </div>
-        </div>
+import Animate from '../Animate';
 
-    );
+const Tab = ( { title, text, imgType, className, animationName } ) => {
+	return (
+		<div className={ className }>
+			<div className="tab-text">
+				<h4>{ title }</h4>
+				{ text }
+			</div>
+			<div className="tab-image">
+				<div className="tab-img">
+					<Animate type={ animationName }>
+						<div className={ imgType }></div>
+					</Animate>
+				</div>
+			</div>
+		</div>
+	);
 };
 
 export default Tab;
diff --git a/src/OnboardingSPA/pages/Steps/BasicInfo/basicInfoForm.js b/src/OnboardingSPA/pages/Steps/BasicInfo/basicInfoForm.js
index a2876a5fc..48ea0ea02 100644
--- a/src/OnboardingSPA/pages/Steps/BasicInfo/basicInfoForm.js
+++ b/src/OnboardingSPA/pages/Steps/BasicInfo/basicInfoForm.js
@@ -41,16 +41,15 @@ const BasicInfoForm = () => {
 
 	const { currentData } = useSelect( ( select ) => {
 		return {
-			currentData: select(
-				nfdOnboardingStore
-			).getCurrentOnboardingData(),
+			currentData:
+				select( nfdOnboardingStore ).getCurrentOnboardingData(),
 		};
 	}, [] );
 
 	function setDefaultData() {
 		if ( isLoaded ) {
-			setSiteLogo( flowData?.data?.siteLogo ?? 0);
-			setSiteTitle( flowData?.data?.blogName ?? '');
+			setSiteLogo( flowData?.data?.siteLogo ?? 0 );
+			setSiteTitle( flowData?.data?.blogName ?? '' );
 			setSiteDesc( flowData?.data?.blogDescription ?? '' );
 		}
 	}
@@ -130,9 +129,9 @@ const BasicInfoForm = () => {
 
 	return (
 		<Animate
-			type="fade-in"
+			type={ 'fade-in-disabled' }
 			after={
-				typeof flowData === "object" && typeof socialData === "object"
+				typeof flowData === 'object' && typeof socialData === 'object'
 			}
 		>
 			<div className={ 'basic-info' }>
diff --git a/src/OnboardingSPA/pages/Steps/Ecommerce/StepAddress/index.js b/src/OnboardingSPA/pages/Steps/Ecommerce/StepAddress/index.js
index 394cbe9c5..073997519 100644
--- a/src/OnboardingSPA/pages/Steps/Ecommerce/StepAddress/index.js
+++ b/src/OnboardingSPA/pages/Steps/Ecommerce/StepAddress/index.js
@@ -155,7 +155,7 @@ const StepAddress = () => {
 								)}
 							/>
 						</div>
-						<Animate type="fade-in" after={ settings }>
+						<Animate type={ 'fade-in-disabled' } after={ settings }>
 							<div className={'store-address-form'}>
 								<div data-name='country'>
 									<label aria-required>
diff --git a/src/OnboardingSPA/pages/Steps/Ecommerce/StepTax/index.js b/src/OnboardingSPA/pages/Steps/Ecommerce/StepTax/index.js
index c8e184fc4..e8f00697c 100644
--- a/src/OnboardingSPA/pages/Steps/Ecommerce/StepTax/index.js
+++ b/src/OnboardingSPA/pages/Steps/Ecommerce/StepTax/index.js
@@ -12,7 +12,7 @@ import { EcommerceStateHandler } from '../../../../components/StateHandlers';
 import { store as nfdOnboardingStore } from '../../../../store';
 import content from '../content.json';
 import { useWPSettings } from '../useWPSettings';
-import { RadioControlStateHandler } from '../../../../components/RadioControl';
+import Animate from '../../../../components/Animate';
 
 function createReverseLookup(state) {
 	return (option) =>
@@ -95,9 +95,9 @@ const StepTax = () => {
 							question={__(content.question, 'wp-module-onboarding')}
 						/>
 					</div>
-					<RadioControlStateHandler
-						watch={ settings }
-						options={ content.stepTaxOptions }
+					<Animate
+						type={ 'fade-in-disabled' }
+						after={ settings }
 					>
 						<RadioControl
 							className={
@@ -120,7 +120,7 @@ const StepTax = () => {
 							)}
 							onChange={( value ) => selectOption( value )}
 						/>
-					</RadioControlStateHandler>
+					</Animate>
 					<button
 						className='nfd-nav-card-button nfd-card-button'
 						disabled={settings === null || tax?.option === undefined}
diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/index.js b/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/index.js
index 6e7532278..119735a11 100644
--- a/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/index.js
+++ b/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/index.js
@@ -13,7 +13,7 @@ import { RadioControl } from '@wordpress/components';
 import { useState, useEffect } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
-import { RadioControlStateHandler } from '../../../../components/RadioControl';
+import Animate from '../../../../components/Animate';
 
 /**
  * Get Started: WordPress Experience Comfort Level.
@@ -81,32 +81,30 @@ const GetStartedExperience = () => {
 							question={ currentStep.subheading }
 						/>
 					</div>
-					<RadioControlStateHandler
-						watch={ wpComfortLevel }
-						options={ content.options }
+					<Animate
+						type={ 'fade-in-disabled' }
+						after={ wpComfortLevel }
 					>
 						<RadioControl
 							className={
 								'nfd-onboarding-experience-step-tabs components-radio-control__input radio-control-main'
 							}
 							selected={ wpComfortLevel }
-							options={ content.options.map(
-								( option ) => {
-									return {
-										label: __(
-											option.content,
-											'wp-module-onboarding'
-										),
-										value: __(
-											option.value,
-											'wp-module-onboarding'
-										),
-									};
-								}
-							)}
-							onChange={( value ) => setWpComfortLevel( value )}
+							options={ content.options.map( ( option ) => {
+								return {
+									label: __(
+										option.content,
+										'wp-module-onboarding'
+									),
+									value: __(
+										option.value,
+										'wp-module-onboarding'
+									),
+								};
+							} ) }
+							onChange={ ( value ) => setWpComfortLevel( value ) }
 						/>
-					</RadioControlStateHandler>
+					</Animate>
 					<NavCardButton
 						text={ __(
 							content.buttonText,
diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/Welcome/index.js b/src/OnboardingSPA/pages/Steps/GetStarted/Welcome/index.js
index b47a9e69c..7ee34f039 100644
--- a/src/OnboardingSPA/pages/Steps/GetStarted/Welcome/index.js
+++ b/src/OnboardingSPA/pages/Steps/GetStarted/Welcome/index.js
@@ -63,6 +63,7 @@ const StepWelcome = () => {
 									title={ __(tab.subtitle, 'wp-module-onboarding')}
 									text={ sprintf( __(tab.text, 'wp-module-onboarding'), translations('site'))}
 									imgType={tab.imgType}
+									animationName = {tab.animationName}
 									className="tab-data" />
 							};
 						} )}
diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/Welcome/stylesheet.scss b/src/OnboardingSPA/pages/Steps/GetStarted/Welcome/stylesheet.scss
index ec13d6486..4a2bf0d2a 100644
--- a/src/OnboardingSPA/pages/Steps/GetStarted/Welcome/stylesheet.scss
+++ b/src/OnboardingSPA/pages/Steps/GetStarted/Welcome/stylesheet.scss
@@ -88,31 +88,22 @@
     background-size: contain;
     background-repeat: no-repeat;
     height: 228px;
-    animation-duration: 360ms;
     width: clamp(180px, 50vw, 400px);
-    animation-timing-function: ease-out;
-    @media (prefers-reduced-motion) {
-        animation: none !important;
-        translation: none !important;
-    }
 }
 
 .content-img{
     @extend .tab-img-base;
     background-image: var(--get-started-content-img);
-    animation-name: fadeInRight;
 }
 
 .features-img{
     @extend .tab-img-base;
     background-image: var(--get-started-features-img);
-    animation-name: fadeInUp;
 }
 
 .design-img{
     @extend .tab-img-base;
     background-image: var(--get-started-design-img);
-    animation-name: fadeInLeft;
 }
 
 .welcome-card {
diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/Welcome/tabContent.json b/src/OnboardingSPA/pages/Steps/GetStarted/Welcome/tabContent.json
index 151712846..4ecf76b5a 100644
--- a/src/OnboardingSPA/pages/Steps/GetStarted/Welcome/tabContent.json
+++ b/src/OnboardingSPA/pages/Steps/GetStarted/Welcome/tabContent.json
@@ -5,21 +5,24 @@
             "title": "YOUR CONTENT",
             "subtitle": "Publish boldly with WordPress Blocks.",
             "text": "Build a beautiful %s using a visual builder. Block Patterns accelerate layout assembly and storytelling with premade designs.",
-            "imgType": "content-img"
+            "imgType": "content-img",
+            "animationName": "fade-in-right"
         },
         {
             "name": "tab2",
             "title": "POWERFUL FEATURES",
             "subtitle": "Proven, easy-to-use solutions.",
             "text": "WordPress make it easy to grow your %s. Send a newsletter, host a podcast or create courses. Your site grows for your next big idea.",
-            "imgType": "features-img"
+            "imgType": "features-img",
+            "animationName": "fade-in-up"
         },
         {
             "name": "tab3",
             "title": "MODERN DESIGN",
             "subtitle": "Paint trim. Move walls. No sweat.",
             "text": "Pick your %s's unique design now and refine by customing your block templates, colors and fonts in the WordPress Site Editor.",
-            "imgType": "design-img"
+            "imgType": "design-img",
+            "animationName": "fade-in-left"
         }
     ]
 }
\ No newline at end of file
diff --git a/src/OnboardingSPA/pages/Steps/SitePages/stylesheet.scss b/src/OnboardingSPA/pages/Steps/SitePages/stylesheet.scss
index 99ae99689..1782121a6 100644
--- a/src/OnboardingSPA/pages/Steps/SitePages/stylesheet.scss
+++ b/src/OnboardingSPA/pages/Steps/SitePages/stylesheet.scss
@@ -5,6 +5,14 @@
 	flex-direction: column;
 	justify-content: center;
 
+	.highlighted {
+		background-color: var(--nfd-onboarding-light-gray-highlighted);
+	}
+
+	.not-highlighted {
+		background-color: var(--nfd-onboarding-light-gray-3);
+	}
+
 	&__list {
 		width: 50vw;
 		height: 100%;
@@ -104,7 +112,6 @@
 					border-top: none;
 					margin: 0 0;
 					height: 50px;
-					animation: dropdown 400ms ease-in-out forwards;
 					transform-origin: top center;
 					box-shadow: 0 11px 8px -3px rgba(88, 124, 175, 0.37);
 
diff --git a/src/OnboardingSPA/pages/Steps/WhatNext/index.js b/src/OnboardingSPA/pages/Steps/WhatNext/index.js
index 411bd0d35..1ee8e805e 100644
--- a/src/OnboardingSPA/pages/Steps/WhatNext/index.js
+++ b/src/OnboardingSPA/pages/Steps/WhatNext/index.js
@@ -42,6 +42,7 @@ const StepWhatNext = () => {
 									title={ __(tab.subtitle, 'wp-module-onboarding')}
 									text={ sprintf( __(tab.text, 'wp-module-onboarding'), translations('site'))}
 									imgType={tab.imgType}
+									animationName = { tab.animationName }
 									className="tab-data" />
 							};
 						} )}
diff --git a/src/OnboardingSPA/pages/Steps/WhatNext/stylesheet.scss b/src/OnboardingSPA/pages/Steps/WhatNext/stylesheet.scss
index 68bd5ac2b..0c990399c 100644
--- a/src/OnboardingSPA/pages/Steps/WhatNext/stylesheet.scss
+++ b/src/OnboardingSPA/pages/Steps/WhatNext/stylesheet.scss
@@ -90,31 +90,22 @@
     background-size: contain;
     background-repeat: no-repeat;
     height: 228px;
-    animation-duration: 360ms;
     width: clamp(180px, 50vw, 400px);
-    animation-timing-function: ease-out;
-    @media (prefers-reduced-motion) {
-        animation: none !important;
-        transition: none !important;
-    }
 }
 
 .wpadmin-img {
     @extend .whatsnext-image;
     background-image: var(--what-next-wp-admin-img);
-    animation-name: fadeInRight;
 }
 
 .help-img {
     @extend .whatsnext-image;
     background-image: var(--what-next-help-img);
-    animation-name: fadeInUp;
 }
 
 .bluesky-img {
     @extend .whatsnext-image;
     background-image: var(--what-next-bluesky-img);
-    animation-name: fadeInLeft;
 }
 
 .whatnext-card {
diff --git a/src/OnboardingSPA/pages/Steps/WhatNext/tabContent.json b/src/OnboardingSPA/pages/Steps/WhatNext/tabContent.json
index 44f6d3a86..31aa1b20a 100644
--- a/src/OnboardingSPA/pages/Steps/WhatNext/tabContent.json
+++ b/src/OnboardingSPA/pages/Steps/WhatNext/tabContent.json
@@ -5,21 +5,24 @@
             "title": "WHATS NEXT",
             "subtitle": "Add content, organize your menu and launch.",
             "text": "✅ Theme created, features added and Coming Soon mode activated. Thank you for building your site with Bluehost, we're always here to help!",
-            "imgType": "wpadmin-img"
+            "imgType": "wpadmin-img",
+            "animationName": "fade-in-right"
         },
         {
             "name": "tab2",
             "title": "HELP & RESOURCES",
             "subtitle": "Next step or next level, we're your partner.",
             "text": "WordPress make it easy to grow your %s. Send a newsletter, broadcast a podcast, create courses and trainings. Dream it, build it.",
-            "imgType": "help-img"
+            "imgType": "help-img",
+            "animationName": "fade-in-up"
         },
         {
             "name": "tab3",
             "title": "HIRE OUR EXPERTS",
             "subtitle": "Make our great people your people.",
             "text": "Pick your %s's unique design now and refine by customing your block templates, colors and fonts in the WordPress Site Editor.",
-            "imgType": "bluesky-img"
+            "imgType": "bluesky-img",
+            "animationName": "fade-in-left"
         }
     ]
 }
diff --git a/src/OnboardingSPA/styles/_utilities.scss b/src/OnboardingSPA/styles/_utilities.scss
index b916ae7d5..29f5ee105 100644
--- a/src/OnboardingSPA/styles/_utilities.scss
+++ b/src/OnboardingSPA/styles/_utilities.scss
@@ -1,96 +1,3 @@
-@keyframes fadeIn {
-
-	from {
-		opacity: 0;
-	}
-
-	to {
-		opacity: 1;
-	}
-}
-
-@keyframes fadeInWithDisabledClicks {
-
-	from {
-		opacity: 0;
-		pointer-events: none;
-	}
-
-	to {
-		opacity: 1;
-	}
-}
-
-@keyframes fadeInRight {
-	from {
-		opacity: 0;
-		transform: translate3d(33%,0,0);
-	}
-	to {
-		opacity: 1;
-		transform: translate3d(0,0,0);
-	}
-}
-
-@keyframes fadeInLeft {
-	from {
-		opacity: 0;
-		transform: translate3d(-33%, 0, 0);
-	}
-	to {
-		opacity: 1;
-		transform: translate3d(0,0,0)
-	}
-}
-
-@keyframes fadeInUp {
-	from {
-		opacity: 0;
-		transform: translate3d(0, 33%, 0);
-	}
-	to {
-		opacity: 1;
-		transform: translate3d(0,0,0)
-	}
-}
-
-@keyframes shine {
-
-	0% {
-		transform: translateX(-100%);
-	}
-
-	100% {
-		transform: translateX(100%);
-	}
-}
-
-@keyframes shine-placeholder {
-
-	0% {
-		background-position: -468px 0;
-	}
-
-	100% {
-		background-position: 468px 0;
-	}
-}
-
-@keyframes dropdown {
-
-	0% {
-		transform: rotateX(-90deg);
-	}
-
-	70% {
-		transform: rotateX(20deg);
-	}
-
-	100% {
-		transform: rotateX(0deg);
-	}
-}
-
 .is-centered {
 	display: flex;
 	place-content: center;
diff --git a/src/OnboardingSPA/styles/app.scss b/src/OnboardingSPA/styles/app.scss
index 49c025c99..8dad365f7 100644
--- a/src/OnboardingSPA/styles/app.scss
+++ b/src/OnboardingSPA/styles/app.scss
@@ -36,7 +36,6 @@
 @import "../components/ErrorState/stylesheet";
 @import "../components/CheckboxTemplate/CheckboxItem/stylesheet";
 @import "../components/CheckboxTemplate/CheckboxList/stylesheet";
-@import "../components/RadioControl/RadioControlSkeleton/stylesheet";
 @import "../components/CheckboxTemplate/CheckboxListSkeleton/stylesheet";
 @import "../components/Sidebar/components/LearnMore/Skeleton/stylesheet";
 @import "../components/Animate/stylesheet";

From f1b5cad3194a54ee7f160b5fb819668661839715 Mon Sep 17 00:00:00 2001
From: arunshenoy99 <devarunshenoy99@gmail.com>
Date: Wed, 25 Jan 2023 12:25:36 +0530
Subject: [PATCH 2/3] modify primary, secondary steps which were merged

---
 .../SiteTypeSetup/PrimarySite/index.js        | 19 ++++++++++++++-----
 .../SiteTypeSetup/SecondarySite/index.js      | 13 ++++++++++---
 2 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/PrimarySite/index.js b/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/PrimarySite/index.js
index 418ec7ae6..d30630866 100644
--- a/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/PrimarySite/index.js
+++ b/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/PrimarySite/index.js
@@ -1,4 +1,4 @@
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import CommonLayout from '../../../../../components/Layouts/Common';
 import NewfoldLargeCard from '../../../../../components/NewfoldLargeCard';
 import {
@@ -95,7 +95,13 @@ const StepPrimarySetup = () => {
 						) }
 					/>
 				</div>
-				<Animate type="fade-in" after={ content.categories && ( selectedPrimaryCategoryInStore !== null ) }>
+				<Animate
+					type="fade-in-disabled"
+					after={
+						content.categories &&
+						selectedPrimaryCategoryInStore !== null
+					}
+				>
 					<div className="nfd-setup-primary-categories">
 						{ content.categories.map( ( item, idx ) => {
 							return (
@@ -103,11 +109,14 @@ const StepPrimarySetup = () => {
 									key={ item?.name }
 									className={ `${
 										clickedIndex === idx ||
-										item.name === selectedPrimaryCategoryInStore
+										item.name ===
+											selectedPrimaryCategoryInStore
 											? 'chosenPrimaryCategory '
 											: ''
 									}nfd-card-category` }
-									onClick={ ( e ) => handleCategoryClick( idx ) }
+									onClick={ ( e ) =>
+										handleCategoryClick( idx )
+									}
 								>
 									<div className="nfd-card-category-wrapper">
 										<span
@@ -151,7 +160,7 @@ const StepPrimarySetup = () => {
 				</Animate>
 				<NavCardButton
 					text={ __( content.buttonText ) }
-					disabled={ content.categories === null}
+					disabled={ content.categories === null }
 				/>
 				<NeedHelpTag />
 			</NewfoldLargeCard>
diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/SecondarySite/index.js b/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/SecondarySite/index.js
index f3bb3e026..fa23ac126 100644
--- a/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/SecondarySite/index.js
+++ b/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/SecondarySite/index.js
@@ -1,4 +1,4 @@
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import CommonLayout from '../../../../../components/Layouts/Common';
 import NewfoldLargeCard from '../../../../../components/NewfoldLargeCard';
 import {
@@ -102,14 +102,21 @@ const StepPrimarySetup = () => {
 						) }
 					/>
 				</div>
-				<Animate type="fade-in" after={ categoriesArray[ 0 ]?.subCategories && ( selectedCategoryInStore !== null ) }>
+				<Animate
+					type="fade-in-disabled"
+					after={
+						categoriesArray[ 0 ]?.subCategories &&
+						selectedCategoryInStore !== null
+					}
+				>
 					<div className="nfd-setup-secondary-categories">
 						<div className="nfd-card-category-wrapper">
 							<div className="category-scrolling-wrapper">
 								<span
 									className="icon"
 									style={ {
-										backgroundImage: categoriesArray[ 0 ].icon,
+										backgroundImage:
+											categoriesArray[ 0 ].icon,
 									} }
 								/>
 								<p className="categName">

From 92dbf2e079280426817404679acc3db0163087e7 Mon Sep 17 00:00:00 2001
From: arunshenoy99 <devarunshenoy99@gmail.com>
Date: Wed, 25 Jan 2023 17:09:40 +0530
Subject: [PATCH 3/3] animate site features

---
 .../CheckboxListSkeleton/index.js             | 56 ++++++++++---------
 .../CheckboxListSkeleton/stylesheet.scss      | 22 +++++---
 .../Drawer/DrawerPanel/DesignColors.js        |  8 ++-
 .../components/Drawer/stylesheet.scss         |  4 --
 4 files changed, 50 insertions(+), 40 deletions(-)

diff --git a/src/OnboardingSPA/components/CheckboxTemplate/CheckboxListSkeleton/index.js b/src/OnboardingSPA/components/CheckboxTemplate/CheckboxListSkeleton/index.js
index 37b9255fc..72e43a813 100644
--- a/src/OnboardingSPA/components/CheckboxTemplate/CheckboxListSkeleton/index.js
+++ b/src/OnboardingSPA/components/CheckboxTemplate/CheckboxListSkeleton/index.js
@@ -1,38 +1,44 @@
+import Animate from '../../Animate';
 
 /**
  * Checkbox List Skeleton Component
  * This returns a List of Checkbox Items Skeletons to imitate loading
  *
- * @param          customItemsList.count
+ * @param  customItemsList.count
+ * @param  customItemsList.count.count
  * @return CheckboxList
  */
-const CheckboxListSkeleton = ({ count }) => {
+const CheckboxListSkeleton = ( { count } ) => {
+	const buildCheckboxSkeletonItems = () => {
+		const customItems = [];
 
-    const buildCheckboxSkeletonItems = () => {
-        var customItems = [];
+		for ( let idx = 0; idx < count; idx++ )
+			customItems.push(
+				<Animate
+					type={ 'shine-placeholder' }
+					className="checkbox-skeleton-item"
+				/>
+			);
 
-        for (let idx = 0; idx < count; idx++) 
-            customItems.push(  <div className="checkbox-skeleton-item shimmer"/>);
-        
-        return customItems;
-    };
+		return customItems;
+	};
 
-    return (
-        <div className="checkbox-list">
-            <div className="checkbox-list-col">
-                {buildCheckboxSkeletonItems().slice(
-                    0,
-                    Math.floor(count / 2)
-                )}
-            </div>
-            <div className="checkbox-list-col">
-                {buildCheckboxSkeletonItems().slice(
-                    Math.floor(count / 2),
-                    count
-                )}
-            </div>
-        </div>
-    );
+	return (
+		<div className="checkbox-list">
+			<div className="checkbox-list-col">
+				{ buildCheckboxSkeletonItems().slice(
+					0,
+					Math.floor( count / 2 )
+				) }
+			</div>
+			<div className="checkbox-list-col">
+				{ buildCheckboxSkeletonItems().slice(
+					Math.floor( count / 2 ),
+					count
+				) }
+			</div>
+		</div>
+	);
 };
 
 export default CheckboxListSkeleton;
diff --git a/src/OnboardingSPA/components/CheckboxTemplate/CheckboxListSkeleton/stylesheet.scss b/src/OnboardingSPA/components/CheckboxTemplate/CheckboxListSkeleton/stylesheet.scss
index 89de99623..46837e114 100644
--- a/src/OnboardingSPA/components/CheckboxTemplate/CheckboxListSkeleton/stylesheet.scss
+++ b/src/OnboardingSPA/components/CheckboxTemplate/CheckboxListSkeleton/stylesheet.scss
@@ -1,15 +1,19 @@
 /*COLOR VARIABLES*/
 $white-offset: rgb(224, 224, 224);
 $main-color-light: var(--nfd-onboarding-white);
+$grey-color: #f6f7f8;
 
 .checkbox-skeleton-item {
-    height: 45px;
-    margin: 12px;
-    padding: 16px;
-    margin-top: 16px;
-    background: $main-color-light;
-    border: 0.5px solid $white-offset;
-    cursor: not-allowed;
-    width: clamp(15rem, 25vw, 35rem);
-    box-shadow: 0px 2px 8px 2px rgba(204, 204, 204, 0.175295);
+	height: 45px;
+	margin: 12px;
+	padding: 16px;
+	margin-top: 16px;
+	border: 0.5px solid $white-offset;
+	cursor: not-allowed;
+	width: clamp(15rem, 25vw, 35rem);
+	box-shadow: 0 2px 8px 2px rgba(204, 204, 204, 0.175295);
+	background: $grey-color;
+	background-repeat: no-repeat;
+	background-image:
+ linear-gradient(to right, $grey-color 0%, $main-color-grey 20%, $grey-color 40%, $grey-color 100%);
 }
diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js
index c311759ff..ecc6d11ba 100644
--- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js
+++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js
@@ -7,6 +7,7 @@ import { store as nfdOnboardingStore } from '../../../store';
 import { getGlobalStyles, getThemeColors } from '../../../utils/api/themes';
 import { useGlobalStylesOutput } from '../../../utils/global-styles/use-global-styles-output';
 import { GlobalStylesProvider } from '../../LivePreview';
+import Animate from '../../Animate';
 
 const DesignColors = () => {
 	const [ isLoaded, setIsLoaded ] = useState( false );
@@ -346,7 +347,10 @@ const DesignColors = () => {
 						<div className="custom-palette__top-icon">-</div>
 					) }
 				</div>
-				<div
+				<Animate
+					type={ 'fade-in' }
+					duration="300ms"
+					timingFunction="ease-in-out"
 					className={ `custom-palette__below ${
 						isAccordionClosed
 							? 'custom-palette_acc_closed'
@@ -431,7 +435,7 @@ const DesignColors = () => {
 							Tertiary
 						</div>
 					</div>
-				</div>
+				</Animate>
 				{ showColorPicker && (
 					<Popover>
 						<div
diff --git a/src/OnboardingSPA/components/Drawer/stylesheet.scss b/src/OnboardingSPA/components/Drawer/stylesheet.scss
index d896837a3..9802393c3 100644
--- a/src/OnboardingSPA/components/Drawer/stylesheet.scss
+++ b/src/OnboardingSPA/components/Drawer/stylesheet.scss
@@ -453,10 +453,6 @@ $main-border-main--rgb: var(--nfd-onboarding-highlighted--rgb);
 
 	&__below {
 		margin-top: 16px;
-		animation-name: fadeIn;
-		animation-duration: 300ms;
-		animation-timing-function: linear;
-		animation-timing-function: ease-in-out;
 
 		&-row {
 			height: 50px;