adding animations

Greg Pfaff · Greg Pfaff · commit 4d340cad245c · 2017-11-10T16:21:32.000-06:00
diff --git a/Carousel/index.js b/Carousel/index.js
@@ -10,10 +10,13 @@ const activeCards = (event) => {
         card.style.zIndex = "1"
         card.classList.add('active');
         card.setAttribute('aria-selected', 'true');
+        const random = Math.random() * 100 - 50;
+        card.style.transform = `rotate(${random}deg) scale(1.25)`
     } else {
         card.style.zIndex = "0"
         card.classList.remove('active');
         card.setAttribute('aria-selected', 'false');
+        card.style.transform = 'rotate(0deg) scale(1)';
     }
   })
 }
diff --git a/Carousel/style.css b/Carousel/style.css
@@ -27,6 +27,9 @@ h1 {
   right: 0;
   top: 100px;
   margin-left: -125px;
+  transition-duration: 200ms;
+  transition-timing-function: cubic-bezier(0, 0, 0, 0);
+
 }
 
 .card_pagination {
@@ -44,6 +47,13 @@ h1 {
   background-color: black;
 }
 
+.card.active {
+  transition-duration: 200ms;
+  transition-timing-function: cubic-bezier(.17, .67, .92, .3);
+}
+
+
+
 .card.one {
   left: 60%;
   right: 0;

Original file line number	Diff line number	Diff line change
`@@ -10,10 +10,13 @@ const activeCards = (event) => {`
`10`	`10`	`card.style.zIndex = "1"`
`11`	`11`	`card.classList.add('active');`
`12`	`12`	`card.setAttribute('aria-selected', 'true');`
	`13`	`+ const random = Math.random() * 100 - 50;`
	`14`	+ card.style.transform = `rotate(${random}deg) scale(1.25)`
`13`	`15`	`} else {`
`14`	`16`	`card.style.zIndex = "0"`
`15`	`17`	`card.classList.remove('active');`
`16`	`18`	`card.setAttribute('aria-selected', 'false');`
	`19`	`+ card.style.transform = 'rotate(0deg) scale(1)';`
`17`	`20`	`}`
`18`	`21`	`})`
`19`	`22`	`}`