animation in testimonials section

Author: ArunTeltia

src/views/pages/common/Recommendations.js

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import { makeStyles } from '@material-ui/core/styles';
+import './index.css';
 import {
   Grid,
   Typography,
@@ -35,7 +36,6 @@ const useStyles = makeStyles(theme => ({
   gridList: {
     flexWrap: 'nowrap',
     width: '100%',
-    // Promote the list into his own layer on Chrome. This cost memory but helps keeping high FPS.
     transform: 'translateZ(0)'
   },
   card: {
@@ -48,7 +48,6 @@ const useStyles = makeStyles(theme => ({
   cardMedia: {
     width: '100%',
     height: 'auto'
-    // paddingTop: "56.25%", // 16:9
   },
   cardContent: {
     flexGrow: 1
@@ -138,12 +137,14 @@ export default function Recommendations({ recommendationsImages }) {
 
       <Grid container spacing={4}>
         <GridList
+          id="recommendation_grid"
           className={classes.gridList}
           cols={large ? 4 : medium ? 3.5 : small ? 2.7 : 1.4}
         >
           {recommendations.map((recommendation, index) => {
             return (
               <GridListTile
+                className="recommendation_slide"
                 key={index}
                 style={{
                   margin: '20px',

src/views/pages/common/index.css

@@ -0,0 +1,35 @@
+:root{
+    scrollbar-color:#000000 white !important;
+    scrollbar-width:thin !important;
+}
+::-webkit-scrollbar-track {
+    border: 1px solid gray;
+    background-color: #f5f5f5;
+    border-radius: 10px;
+}  
+::-webkit-scrollbar {
+    width: 10px;
+    background-color: #f5f5f5;
+}  
+::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    background-color: #000000;
+    animation: animate 6s linear infinite;
+}
+#recommendation_grid{
+    position:relative;
+    overflow: hidden;
+}
+.recommendation_slide{
+  position: relative;
+  left: 0;
+  top: 0;
+  height: 100%;
+  width: 250%;
+  animation: slideshow 100s linear infinite; 
+}
+@keyframes slideshow {
+    0%    { left: 0%; }
+    50%  { left: -150%; }
+    100%  { left: 0%; }
+  }