Add FlickUp effect

Author: emilkowalski

components/Snippets/FlickUp.js

@@ -14,120 +14,106 @@ const Wrapper = styled('a', {
   cursor: 'pointer',
   overflow: 'hidden',
   diplay: 'block',
+  position: 'relative',
 
   '.main-text': {
-    diplay: 'block',
-    transform: translateY(0),
+    display: 'block',
     transition: 'transform 500ms'
   },
 
-  '&:before': {
-    content: '',
+  '.hover-text': {
+    diplay: 'block',
+    transform: 'translateY(100%)',
+    transition: 'transform 500ms',
     position: 'absolute',
-    top: '50%',
-    left: '50%',
-    width: '140px',
-    height: '140px',
-    borderRadius: '50%',
-    transform: 'translate3d(-50%,-50%,0) scale3d(0,0,0)',
-    transition: 'opacity .4s cubic-bezier(.19,1,.22,1),transform .75s cubic-bezier(.19,1,.22,1)',
-    backgroundColor: 'hsl(244, 63%, 69%)',
-    opacity: 0
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%'
   },
 
   '&:hover': {
-    '&:before': {
-      opacity: 1,
-      transitionDuration: '.85s',
-      transform: 'translate3d(-50%,-50%,0) scale3d(1.2,1.2,1.2)'
+    '.main-text': {
+      transition: 'transform 250ms',
+      transform: 'translateY(-100%)'
     },
 
-    span: {
-      color: '$white'
+    '.hover-text': {
+      transition: 'transform 250ms',
+      transform: 'translateY(0%)'
     }
   }
 });
 
 const cssStyling = `
 .exampleBtn {
-    padding: 12px 24px;
-    background-color: hsl(222, 100%, 95%);
-    color: hsl(243, 80%, 62%);
-    position: relative;
-    border-radius: 6px;
-    overflow: hidden;
-    z-index: 1;
+	color: 'white';
+	cursor: 'pointer';
+	overflow: 'hidden';
+	diplay: 'block';
+	position: 'relative';
 }
 
-.exampleBtn span {
-    z-index: 1;
-    position: relative;
+.main-text {
+	display: block;
+	transition: transform 500ms;
 }
 
-.exampleBtn::before {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 140px;
-    height: 140px;
-    border-radius: 50%;
-    transform: translate3d(-50%,-50%,0) scale3d(0,0,0);
-    transition: opacity .4s cubic-bezier(.19,1,.22,1),transform .75s cubic-bezier(.19,1,.22,1);
-    background-color: hsl(243, 80%, 62%);
-    opacity: 0;
+.hover-text {
+	transition: transform 250ms;
+	transform: translateY(0%);
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
 }
 
-.exampleBtn:hover span {
-    color: hsl(222, 100%, 95%);
+.exampleBtn:hover .main-text {
+	transition: transform 250ms;
+	transform: translateY(-100%);
 }
 
-.exampleBtn:hover::before {
-    opacity: 1;
-    transition-duration: .85s;
-    transform: translate3d(-50%,-50%,0) scale3d(1.2,1.2,1.2);
+.exampleBtn:hover .hover-text {
+	transition: transform 250ms;
+	transform: translateY(0%);
 }
+
 `;
 
 const scssStyling = `
 .exampleBtn {
-    padding: 12px 24px;
-    background-color: hsl(222, 100%, 95%);
-    color: hsl(243, 80%, 62%);
-    position: relative;
-    border-radius: 6px;
-    overflow: hidden;
-    z-index: 1;
-
-	span {
-		z-index: 1;
-		position: relative;
+	color: 'white';
+	cursor: 'pointer';
+	overflow: 'hidden';
+	diplay: 'block';
+	position: 'relative';
+
+	.main-text {
+		display: block;
+		transition: transform 500ms;
 	}
 
-	&:before {
-		content: '';
+	.hover-text {
+		transition: transform 250ms;
+		transform: translateY(0%);
 		position: absolute;
-		top: 50%;
-		left: 50%;
-		width: 140px;
-		height: 140px;
-		border-radius: 50%;
-		transform: translate3d(-50%,-50%,0) scale3d(0,0,0);
-		transition: opacity .4s cubic-bezier(.19,1,.22,1),transform .75s cubic-bezier(.19,1,.22,1);
-		background-color: hsl(243, 80%, 62%);
-		opacity: 0;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
 	}
 
 	&:hover {
-		span {
-			color: hsl(222, 100%, 95%);
-		}
-
-		&:before {
-			opacity: 1;
-			transition-duration: .85s;
-			transform: translate3d(-50%,-50%,0) scale3d(1.2,1.2,1.2);
-		}
+		.main-text {
+			transition: transform 250ms;
+			transform: translateY(-100%);
+		  }
+
+		  .hover-text {
+			transition: transform 250ms;
+			transform: translateY(0%);
+		  }
 	}
 }
 `;

components/Snippets/index.js

@@ -13,6 +13,7 @@ import * as CircleScaleButton from './CircleScaleButton';
 import * as ThreeDotsLoader from './ThreeDotsLoader';
 import * as ScalePseudo from './ScalePseudo';
 import * as UnderlineRight from './UnderlineRight';
+import * as FlickUp from './FlickUp';
 
 const allSnippets = [
   UnderlineLeftRight,
@@ -29,7 +30,8 @@ const allSnippets = [
   CircleScaleButton,
   ThreeDotsLoader,
   ScalePseudo,
-  UnderlineRight
+  UnderlineRight,
+  FlickUp
 ];
 
 export default allSnippets;