diff --git a/example/src/components/ToggleSection/ToggleSection.js b/example/src/components/ToggleSection/ToggleSection.js index 8d450417..c87318c1 100644 --- a/example/src/components/ToggleSection/ToggleSection.js +++ b/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 (
@@ -32,6 +33,16 @@ const ToggleSection = () => { + +
  • setViewAnimating(true)} + onMouseLeave={() => setViewAnimating(false)} + > +

    View

    +
  • diff --git a/src/components/Toggle/ViewMotion/ViewMotion.js b/src/components/Toggle/ViewMotion/ViewMotion.js new file mode 100644 index 00000000..b5be6d9a --- /dev/null +++ b/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 ( +
    + + View + + + + + + +
    + ) +} + +export default ViewMotion + diff --git a/src/components/Toggle/ViewMotion/index.js b/src/components/Toggle/ViewMotion/index.js new file mode 100644 index 00000000..17d9efb8 --- /dev/null +++ b/src/components/Toggle/ViewMotion/index.js @@ -0,0 +1,2 @@ +import ViewMotion from './ViewMotion'; +export default ViewMotion; \ No newline at end of file diff --git a/src/components/Toggle/ViewMotion/view--motion.module.scss b/src/components/Toggle/ViewMotion/view--motion.module.scss new file mode 100644 index 00000000..bb4b95b0 --- /dev/null +++ b/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) + } +} \ No newline at end of file diff --git a/src/components/Toggle/index.js b/src/components/Toggle/index.js index c4ea9690..3eaba157 100644 --- a/src/components/Toggle/index.js +++ b/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, } diff --git a/src/index.js b/src/index.js index d2a8e253..a9d9fc51 100644 --- a/src/index.js +++ b/src/index.js @@ -137,4 +137,5 @@ export { export { NotificationMotion, NotificationFilledMotion, + ViewMotion, } from './components/Toggle' \ No newline at end of file