Addded motion to Credits

Diakitelo · Jun 7, 2021 · 8affb60 · 8affb60
1 parent e3b8c2e
commit 8affb60
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 18 deletions.
diff --git a/src/components/Credits/Credits.jsx b/src/components/Credits/Credits.jsx
@@ -1,16 +1,22 @@
 import "./credits.scss"
+import { motion } from "framer-motion";
+import { creditsFadeInUpVariants } from "../../motionUtils";
 
 const Credits = () => {
 	return (
-		<footer className='Credits'>
+		<motion.footer
+			variants={creditsFadeInUpVariants}
+			initial='initial'
+			animate='animate'
+			exit='exit'
+			className='Credits'
+		>
 			<span>Developed by</span>
-			<div className='Credits__wrp'>
-				<a className='Credits__link' href='https://github.com/Th3Wall' target='_blank' rel='noreferrer' > Th3Wall</a>
-				<a className='Credits__link' href='https://github.com/Th3Wall' target='_blank' rel='noreferrer' >
-					<img className='Credits__avatar' src='https://avatars.githubusercontent.com/u/25078541?v=4' alt='Credits Avatar' />
-				</a>
-			</div>
-		</footer>
+			<a className='Credits__linkwrp' href='https://github.com/Th3Wall' target='_blank' rel='noreferrer'>
+				<span> Th3Wall</span>
+				<img className='Credits__avatar' src='https://avatars.githubusercontent.com/u/25078541?v=4' alt='Credits Avatar' />
+			</a>
+		</motion.footer>
 	)
 }
 

diff --git a/src/components/Credits/credits.scss b/src/components/Credits/credits.scss
@@ -5,23 +5,28 @@
 	align-items: center;
 	justify-content: center;
 	text-align: center;
-	margin: 3vh 0;
+	margin: 2.5vh 0;
+	color: #969696;
 	font-size: 15px;
 
-    &__wrp {
-      display: flex;
-      align-items: center;
-    }
-
-	&__link {
+	&__linkwrp {
+	  	display: flex;
+	  	align-items: center;
 		color: inherit;
 		font-weight: bold;
         margin-left: 5px;
+		text-decoration: none;
+		transition: color 0.4s cubic-bezier(0.6, -0.05, 0.01, 0.99);
+
+		&:hover {
+			color: $white;
+		}
 	}
 
 	&__avatar {
 		display: inline-block;
 		max-width: 40px;
 		width: 100%;
+		margin-left: 5px;
 	}
 }
diff --git a/src/motionUtils.js b/src/motionUtils.js
@@ -63,6 +63,12 @@ export const authPageFadeInVariants = {
 	exit: { opacity: 0, transition: { duration: .6, ease: defaultEasing }}
 };
 
+export const creditsFadeInUpVariants = {
+	initial: { y: 60, opacity: 0, transition: { duration: .8, ease: defaultEasing } },
+	animate: { y: 0, opacity: 1, transition: { delay: .8, duration: .8, ease: defaultEasing } },
+	exit: { y: 60, opacity: 0, transition: { duration: .8, ease: defaultEasing }  }
+};
+
 export const defaultPageFadeInVariants = {
 	initial: { opacity: 0, transition: { duration: .6, ease: defaultEasing }, willChange: "opacity, transform" },
 	animate: { opacity: 1, transition: { duration: .6, ease: defaultEasing }, willChange: "opacity, transform" },

diff --git a/src/pages/MyList/myList.scss b/src/pages/MyList/myList.scss
@@ -1,7 +1,7 @@
 @import "../../scss/mixin";
 
 .MyList {
-	padding: 2em 4vw;
+	padding: 2em 4vw 0 4vw;
 	margin-top: 4em;
 
 	&__wrp {

diff --git a/src/pages/Search/Search.jsx b/src/pages/Search/Search.jsx
@@ -15,7 +15,7 @@ const Search = searchResults => {
 				<h2 className="Search__title">Search results for: {selectInputValue}</h2>
 			)}
 			<motion.div
-				className="MyList__wrp"
+				className="Search__wrp"
 				variants={staggerHalf}
 				initial="initial"
 				animate="animate"

diff --git a/src/pages/Search/search.scss b/src/pages/Search/search.scss
@@ -1,7 +1,7 @@
 @import "../../scss/mixin";
 
 .Search {
-	padding: 2em 4vw;
+	padding: 2em 4vw 0 4vw;
 	margin-top: 4em;
 
 	&__wrp {