add view

example/src/components/ToggleSection/ToggleSection.js

@@ -5,6 +5,7 @@ import '@carbon/icons-motion/dist/index.css'
 const ToggleSection = () => {
   const [notificationAnimating, setNotificationAnimating] = useState(false)
   const [notificationFilledAnimating, setNotificationFilledAnimating] = useState(false)
+  const [viewAnimating, setViewAnimating] = useState(false)
 
 	return (
 		<section className="icon-section">	
@@ -32,6 +33,16 @@ const ToggleSection = () => {
           <icons.NotificationFilledMotion 
             isAnimating={notificationFilledAnimating} 
             size={32} />
+          </li>
+          <li
+            className='icon-tile'
+            onMouseEnter={() => setViewAnimating(true)}
+            onMouseLeave={() => setViewAnimating(false)}
+          >
+          <h3>View</h3>
+          <icons.ViewMotion 
+            isAnimating={viewAnimating} 
+            size={32} />
           </li>
   		  </ul>
 		  </div>

src/components/Toggle/ViewMotion/ViewMotion.js

@@ -0,0 +1,37 @@
+import React, { useRef, useState, useEffect } from 'react'
+import styles from './view--motion.module.scss'
+
+const ViewMotion = (props) => {
+  const iconRef = useRef(null)
+  const [isAnimating, setIsAnimating] = useState(props.isAnimating)
+
+  let iconStyles = {
+    width: props.size,
+    height: props.size
+  }
+
+  React.useEffect(() => {
+    setIsAnimating(props.isAnimating)
+  }, [props.isAnimating])
+
+  const shouldAnimate = isAnimating ? styles.isAnimating : ''
+
+  return (
+    <div ref={iconRef} className={`${shouldAnimate}`}>
+      <svg style={iconStyles} viewBox='0 0 32 32' className={styles.ViewMotion}>
+        <title>View</title>
+        <path className={styles.ViewEye} d="M30.9,15.7C28.5,9.4,22.7,5.3,16,5C9.3,5.3,3.5,9.4,1.1,15.7c-0.1,0.2-0.1,0.5,0,0.7C3.5,22.6,9.3,26.7,16,27
+		c6.7-0.3,12.5-4.4,14.9-10.7C31,16.1,31,15.9,30.9,15.7z M16,25c-5.3,0-10.9-3.9-12.9-9c2-5.1,7.6-9,12.9-9s10.9,3.9,12.9,9
+		C26.9,21.1,21.3,25,16,25z" />
+        <path className={styles.ViewIris} d="M16,10c-3.3,0-6,2.7-6,6s2.7,6,6,6s6-2.7,6-6S19.3,10,16,10z M16,20c-2.2,0-4-1.8-4-4s1.8-4,4-4s4,1.8,4,4S18.2,20,16,20z" />
+        <path className={styles.ViewFilledEye} d="M30.9,15.7C28.5,9.4,22.7,5.3,16,5C9.3,5.3,3.5,9.4,1.1,15.7c-0.1,0.2-0.1,0.5,0,0.7C3.5,22.6,9.3,26.7,16,27
+		c6.7-0.3,12.5-4.4,14.9-10.7C31,16.1,31,15.9,30.9,15.7z" />
+        <path className={styles.ViewFilledIris} fill="#ffffff" d="M16,9.5c3.6,0,6.5,2.9,6.5,6.5s-2.9,6.5-6.5,6.5S9.5,19.6,9.5,16S12.4,9.5,16,9.5z" />
+        <path className={styles.ViewFilledPupil} d="M16,12c2.2,0,4,1.8,4,4s-1.8,4-4,4s-4-1.8-4-4S13.8,12,16,12z" />
+      </svg>
+    </div>
+  )
+}
+
+export default ViewMotion
+

src/components/Toggle/ViewMotion/index.js

@@ -0,0 +1,2 @@
+import ViewMotion from './ViewMotion';
+export default ViewMotion;

src/components/Toggle/ViewMotion/view--motion.module.scss

@@ -0,0 +1,117 @@
+@keyframes view-eye {
+  0% { transform: scaleY(1)}
+  10% { transform: scaleY(.75)}
+  20% { transform: scaleY(1)}
+  100% { transform: scaleY(1)}
+}
+
+
+.ViewIris {
+  transform-origin: 1rem 1rem;
+  will-change: transform;
+}
+
+.ViewEye {
+  transform-origin: 1rem 1rem;
+  will-change: transform;
+}
+
+
+.isAnimating {
+  .ViewEye {
+    animation: view-eye 2s cubic-bezier(0.2, 0, 0.38, 0.9)
+  }
+}
+
+.isAnimating {
+  .ViewIris {
+    animation: view-iris 2s cubic-bezier(0.2, 0, 0.38, 0.9)
+  }
+}
+
+
+
+/////////////////FILLED//////////////
+
+
+
+@keyframes view-filled-eye {
+  0% {
+    transform: scale(1,1);
+    opacity: 0;
+  }
+  10% {
+    transform: scale(1,.75);
+    opacity: 1;
+  }
+  20% {
+    transform: scale(1,1);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1,1);
+    opacity: 1;
+  }
+}
+
+
+
+.ViewFilledEye {
+  transform-origin: 1rem 1rem;
+  scale: 1;
+  opacity: 0;
+}
+
+
+.isAnimating {
+  .ViewFilledEye {
+    animation: view-filled-eye 2s cubic-bezier(0.2, 0, 0.38, 0.9)
+  }
+}
+
+
+////////
+
+@keyframes view-filled-pupil {
+  0% { opacity: 0}
+  10% { opacity: 1}
+  20% { opacity: 1}
+  100% { opacity: 1}
+}
+
+
+.ViewFilledPupil {
+  transform-origin: 1rem 1rem;
+  will-change: transform;
+  opacity: 0;
+}
+
+
+.isAnimating {
+  .ViewFilledPupil {
+    animation: view-filled-pupil 2s cubic-bezier(0.2, 0, 0.38, 0.9)
+  }
+}
+
+//////////
+
+
+@keyframes view-filled-iris {
+  0% { opacity: 0}
+  10% { opacity: 1}
+  20% { opacity: 1}
+  100% { opacity: 1}
+}
+
+.ViewFilledIris {
+  transform-origin: 1rem 1rem;
+  will-change: transform;
+  opacity: 0;
+}
+
+
+.isAnimating {
+  .ViewFilledIris {
+    animation: view-filled-iris 2s cubic-bezier(0.2, 0, 0.38, 0.9)
+  }
+}

src/components/Toggle/index.js

@@ -1,7 +1,9 @@
 import NotificationMotion from './NotificationMotion'
 import NotificationFilledMotion from './NotificationFilledMotion'
+import ViewMotion from './ViewMotion'
 
 export {
   NotificationMotion,
   NotificationFilledMotion,
+  ViewMotion,
 }

src/index.js

@@ -137,4 +137,5 @@ export {
 export {
   NotificationMotion,
   NotificationFilledMotion,
+  ViewMotion,
 } from './components/Toggle'