From 2ca6f44819e9217f2d2f65d9774df8d871d8d7d8 Mon Sep 17 00:00:00 2001 From: johnbister Date: Tue, 29 Nov 2022 12:26:23 -0800 Subject: [PATCH 1/5] add sort ascending --- .../OperationsSection/OperationsSection.js | 11 +++ .../SortAscendingMotion.js | 47 +++++++++ .../Operations/SortAscendingMotion/index.js | 2 + .../sort-ascending--motion.module.scss | 97 +++++++++++++++++++ src/components/Operations/index.js | 2 + src/index.js | 1 + 6 files changed, 160 insertions(+) create mode 100644 src/components/Operations/SortAscendingMotion/SortAscendingMotion.js create mode 100644 src/components/Operations/SortAscendingMotion/index.js create mode 100644 src/components/Operations/SortAscendingMotion/sort-ascending--motion.module.scss diff --git a/example/src/components/OperationsSection/OperationsSection.js b/example/src/components/OperationsSection/OperationsSection.js index e424a031..cbead55a 100644 --- a/example/src/components/OperationsSection/OperationsSection.js +++ b/example/src/components/OperationsSection/OperationsSection.js @@ -48,6 +48,7 @@ const OperationsSection = () => { const [sendAltAnimating, setSendAltAnimating] = useState(false) const [sendAltFilledAnimating, setSendAltFilledAnimating] = useState(false) const [sendFilledAnimating, setSendFilledAnimating] = useState(false) + const [sortAscendingAnimating, setSortAscendingAnimating] = useState(false) const [tagAnimating, setTagAnimating] = useState(false) const [tagEditAnimating, setTagEditAnimating] = useState(false) const [tagExportAnimating, setTagExportAnimating] = useState(false) @@ -505,6 +506,16 @@ const OperationsSection = () => { isAnimating={sendFilledAnimating} size={32} /> +
  • setSortAscendingAnimating(true)} + onMouseLeave={() => setSortAscendingAnimating(false)} + > +

    Sort ascending

    + +
  • setTagAnimating(true)} onMouseLeave={() => setTagAnimating(false)} diff --git a/src/components/Operations/SortAscendingMotion/SortAscendingMotion.js b/src/components/Operations/SortAscendingMotion/SortAscendingMotion.js new file mode 100644 index 00000000..c507b194 --- /dev/null +++ b/src/components/Operations/SortAscendingMotion/SortAscendingMotion.js @@ -0,0 +1,47 @@ +import React, { useRef, useState, useEffect } from 'react' +import styles from './sort-ascending--motion.module.scss' + +const SortAscendingMotion = (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 ( +
    + + Sort Ascending + + + + + + + + + + + + + + + + +
    + ) +} + +export default SortAscendingMotion diff --git a/src/components/Operations/SortAscendingMotion/index.js b/src/components/Operations/SortAscendingMotion/index.js new file mode 100644 index 00000000..54a4567b --- /dev/null +++ b/src/components/Operations/SortAscendingMotion/index.js @@ -0,0 +1,2 @@ +import SortAscendingMotion from './SortAscendingMotion' +export default SortAscendingMotion diff --git a/src/components/Operations/SortAscendingMotion/sort-ascending--motion.module.scss b/src/components/Operations/SortAscendingMotion/sort-ascending--motion.module.scss new file mode 100644 index 00000000..ef98fefd --- /dev/null +++ b/src/components/Operations/SortAscendingMotion/sort-ascending--motion.module.scss @@ -0,0 +1,97 @@ +@keyframes sort-ascending-arrow { + 0% { + transform: translatey(0px); + } + 10% { + transform: translatey(4px); + } + 20% { + transform: translatey(0px); + } + 100% { + transform: translatey(0px); + } +} + +@keyframes sort-ascending-line1 { + 0% { + transform: translateX(0px); + } + 6% { + transform: translateX(-2px); + } + 12% { + transform: translateX(0px); + } + 100% { + transform: translateX(0px); + } +} + +@keyframes sort-ascending-line2 { + 4% { + transform: translateX(0px); + } + 10% { + transform: translateX(-2px); + } + 16% { + transform: translateX(0px); + } + 100% { + transform: translateX(0px); + } +} + +@keyframes sort-ascending-line3 { + 8% { + transform: translateX(0px); + } + 14% { + transform: translateX(-2px); + } + 20% { + transform: translateX(0px); + } + 100% { + transform: translateX(0px); + } +} + + +.SortAscendingArrow { + will-change: transform; +} + +.isAnimating { + .SortAscendingArrow { + animation: sort-ascending-arrow infinite cubic-bezier(0.4, 0.14, 0.3, 1) 2s; + } +} + +.SortAscendingLine1, +.SortAscendingLine2, +.SortAscendingLine3 { + will-change: transform; + transform-origin: 1rem 0rem; +} + +.isAnimating { + .SortAscendingLine1 { + animation: sort-ascending-line1 infinite cubic-bezier(0.4, 0.14, 0.3, 1) 2s; + } +} + +.isAnimating { + .SortAscendingLine2 { + animation: sort-ascending-line2 infinite cubic-bezier(0.4, 0.14, 0.3, 1) 2s; + } +} + +.isAnimating { + .SortAscendingLine3 { + animation: sort-ascending-line3 infinite cubic-bezier(0.4, 0.14, 0.3, 1) 2s; + } +} + + diff --git a/src/components/Operations/index.js b/src/components/Operations/index.js index 4dea7222..c575bba9 100644 --- a/src/components/Operations/index.js +++ b/src/components/Operations/index.js @@ -42,6 +42,7 @@ import SendMotion from './SendMotion'; import SendAltMotion from './SendAltMotion'; import SendAltFilledMotion from './SendAltFilledMotion'; import SendFilledMotion from './SendFilledMotion'; +import SortAscendingMotion from './SortAscendingMotion' import TagMotion from './TagMotion' import TagEditMotion from './TagEditMotion' import TagExportMotion from './TagExportMotion' @@ -100,6 +101,7 @@ export { SendAltMotion, SendAltFilledMotion, SendFilledMotion, + SortAscendingMotion, TagMotion, TagEditMotion, TagExportMotion, diff --git a/src/index.js b/src/index.js index a2279f93..612bf8a7 100644 --- a/src/index.js +++ b/src/index.js @@ -93,6 +93,7 @@ export { SendAltMotion, SendAltFilledMotion, SendFilledMotion, + SortAscendingMotion, TagMotion, TagEditMotion, TagExportMotion, From b4d33679c14f60cf87a818e88e33cf133d3d9103 Mon Sep 17 00:00:00 2001 From: johnbister Date: Tue, 29 Nov 2022 14:05:02 -0800 Subject: [PATCH 2/5] add sort descending --- .../OperationsSection/OperationsSection.js | 11 +++ .../SortDescendingMotion.js | 47 +++++++++ .../Operations/SortDescendingMotion/index.js | 2 + .../sort-descending--motion.module.scss | 97 +++++++++++++++++++ src/components/Operations/index.js | 2 + src/index.js | 1 + 6 files changed, 160 insertions(+) create mode 100644 src/components/Operations/SortDescendingMotion/SortDescendingMotion.js create mode 100644 src/components/Operations/SortDescendingMotion/index.js create mode 100644 src/components/Operations/SortDescendingMotion/sort-descending--motion.module.scss diff --git a/example/src/components/OperationsSection/OperationsSection.js b/example/src/components/OperationsSection/OperationsSection.js index cbead55a..2bc8fc43 100644 --- a/example/src/components/OperationsSection/OperationsSection.js +++ b/example/src/components/OperationsSection/OperationsSection.js @@ -49,6 +49,7 @@ const OperationsSection = () => { const [sendAltFilledAnimating, setSendAltFilledAnimating] = useState(false) const [sendFilledAnimating, setSendFilledAnimating] = useState(false) const [sortAscendingAnimating, setSortAscendingAnimating] = useState(false) + const [sortDescendingAnimating, setSortDescendingAnimating] = useState(false) const [tagAnimating, setTagAnimating] = useState(false) const [tagEditAnimating, setTagEditAnimating] = useState(false) const [tagExportAnimating, setTagExportAnimating] = useState(false) @@ -516,6 +517,16 @@ const OperationsSection = () => { isAnimating={sortAscendingAnimating} size={32} />
    • +
  • setSortDescendingAnimating(true)} + onMouseLeave={() => setSortDescendingAnimating(false)} + > +

    Sort descending

    + +
  • setTagAnimating(true)} onMouseLeave={() => setTagAnimating(false)} diff --git a/src/components/Operations/SortDescendingMotion/SortDescendingMotion.js b/src/components/Operations/SortDescendingMotion/SortDescendingMotion.js new file mode 100644 index 00000000..9ffae472 --- /dev/null +++ b/src/components/Operations/SortDescendingMotion/SortDescendingMotion.js @@ -0,0 +1,47 @@ +import React, { useRef, useState, useEffect } from 'react' +import styles from './sort-descending--motion.module.scss' + +const SortDescendingMotion = (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 ( +
    + + Sort descending + + + + + + + + + + + + + + + + +
    + ) +} + +export default SortDescendingMotion diff --git a/src/components/Operations/SortDescendingMotion/index.js b/src/components/Operations/SortDescendingMotion/index.js new file mode 100644 index 00000000..1f550736 --- /dev/null +++ b/src/components/Operations/SortDescendingMotion/index.js @@ -0,0 +1,2 @@ +import SortDescendingMotion from './SortDescendingMotion' +export default SortDescendingMotion diff --git a/src/components/Operations/SortDescendingMotion/sort-descending--motion.module.scss b/src/components/Operations/SortDescendingMotion/sort-descending--motion.module.scss new file mode 100644 index 00000000..d007e9c3 --- /dev/null +++ b/src/components/Operations/SortDescendingMotion/sort-descending--motion.module.scss @@ -0,0 +1,97 @@ +@keyframes sort-descending-arrow { + 0% { + transform: translatey(0px); + } + 10% { + transform: translatey(4px); + } + 20% { + transform: translatey(0px); + } + 100% { + transform: translatey(0px); + } +} + +@keyframes sort-descending-line1 { + 0% { + transform: translateX(0px); + } + 6% { + transform: translateX(-2px); + } + 12% { + transform: translateX(0px); + } + 100% { + transform: translateX(0px); + } +} + +@keyframes sort-descending-line2 { + 4% { + transform: translateX(0px); + } + 10% { + transform: translateX(-2px); + } + 16% { + transform: translateX(0px); + } + 100% { + transform: translateX(0px); + } +} + +@keyframes sort-descending-line3 { + 8% { + transform: translateX(0px); + } + 14% { + transform: translateX(-2px); + } + 20% { + transform: translateX(0px); + } + 100% { + transform: translateX(0px); + } +} + + +.SortDescendingArrow { + will-change: transform; +} + +.isAnimating { + .SortDescendingArrow { + animation: sort-descending-arrow infinite cubic-bezier(0.4, 0.14, 0.3, 1) 2s; + } +} + +.SortDescendingLine1, +.SortDescendingLine2, +.SortDescendingLine3 { + will-change: transform; + transform-origin: 1rem 0rem; +} + +.isAnimating { + .SortDescendingLine1 { + animation: sort-descending-line1 infinite cubic-bezier(0.4, 0.14, 0.3, 1) 2s; + } +} + +.isAnimating { + .SortDescendingLine2 { + animation: sort-descending-line2 infinite cubic-bezier(0.4, 0.14, 0.3, 1) 2s; + } +} + +.isAnimating { + .SortDescendingLine3 { + animation: sort-descending-line3 infinite cubic-bezier(0.4, 0.14, 0.3, 1) 2s; + } +} + + diff --git a/src/components/Operations/index.js b/src/components/Operations/index.js index c575bba9..119a2c8c 100644 --- a/src/components/Operations/index.js +++ b/src/components/Operations/index.js @@ -43,6 +43,7 @@ import SendAltMotion from './SendAltMotion'; import SendAltFilledMotion from './SendAltFilledMotion'; import SendFilledMotion from './SendFilledMotion'; import SortAscendingMotion from './SortAscendingMotion' +import SortDescendingMotion from './SortDescendingMotion' import TagMotion from './TagMotion' import TagEditMotion from './TagEditMotion' import TagExportMotion from './TagExportMotion' @@ -102,6 +103,7 @@ export { SendAltFilledMotion, SendFilledMotion, SortAscendingMotion, + SortDescendingMotion, TagMotion, TagEditMotion, TagExportMotion, diff --git a/src/index.js b/src/index.js index 612bf8a7..cb49ced0 100644 --- a/src/index.js +++ b/src/index.js @@ -94,6 +94,7 @@ export { SendAltFilledMotion, SendFilledMotion, SortAscendingMotion, + SortDescendingMotion, TagMotion, TagEditMotion, TagExportMotion, From eb2e703a10533d9e9109610c9b1ac6e6b48a5b86 Mon Sep 17 00:00:00 2001 From: johnbister Date: Tue, 29 Nov 2022 14:18:28 -0800 Subject: [PATCH 3/5] add sort remove --- .../OperationsSection/OperationsSection.js | 11 ++ .../SortRemoveMotion/SortRemoveMotion.js | 50 +++++++ .../Operations/SortRemoveMotion/index.js | 2 + .../sort-remove--motion.module.scss | 135 ++++++++++++++++++ src/components/Operations/index.js | 2 + src/index.js | 1 + 6 files changed, 201 insertions(+) create mode 100644 src/components/Operations/SortRemoveMotion/SortRemoveMotion.js create mode 100644 src/components/Operations/SortRemoveMotion/index.js create mode 100644 src/components/Operations/SortRemoveMotion/sort-remove--motion.module.scss diff --git a/example/src/components/OperationsSection/OperationsSection.js b/example/src/components/OperationsSection/OperationsSection.js index 2bc8fc43..b582f3ae 100644 --- a/example/src/components/OperationsSection/OperationsSection.js +++ b/example/src/components/OperationsSection/OperationsSection.js @@ -50,6 +50,7 @@ const OperationsSection = () => { const [sendFilledAnimating, setSendFilledAnimating] = useState(false) const [sortAscendingAnimating, setSortAscendingAnimating] = useState(false) const [sortDescendingAnimating, setSortDescendingAnimating] = useState(false) + const [sortRemoveAnimating, setSortRemoveAnimating] = useState(false) const [tagAnimating, setTagAnimating] = useState(false) const [tagEditAnimating, setTagEditAnimating] = useState(false) const [tagExportAnimating, setTagExportAnimating] = useState(false) @@ -527,6 +528,16 @@ const OperationsSection = () => { isAnimating={sortDescendingAnimating} size={32} />
    • +
  • setSortRemoveAnimating(true)} + onMouseLeave={() => setSortRemoveAnimating(false)} + > +

    Sort remove

    + +
  • setTagAnimating(true)} onMouseLeave={() => setTagAnimating(false)} diff --git a/src/components/Operations/SortRemoveMotion/SortRemoveMotion.js b/src/components/Operations/SortRemoveMotion/SortRemoveMotion.js new file mode 100644 index 00000000..a6c09252 --- /dev/null +++ b/src/components/Operations/SortRemoveMotion/SortRemoveMotion.js @@ -0,0 +1,50 @@ +import React, { useRef, useState, useEffect } from 'react' +import styles from './sort-remove--motion.module.scss' + +const SortRemoveMotion = (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 ( +
    + + Sort remove + + + + + + + + + + + + + + + + + + + +
    + ) +} + +export default SortRemoveMotion diff --git a/src/components/Operations/SortRemoveMotion/index.js b/src/components/Operations/SortRemoveMotion/index.js new file mode 100644 index 00000000..9d03c1e7 --- /dev/null +++ b/src/components/Operations/SortRemoveMotion/index.js @@ -0,0 +1,2 @@ +import SortRemoveMotion from './SortRemoveMotion' +export default SortRemoveMotion diff --git a/src/components/Operations/SortRemoveMotion/sort-remove--motion.module.scss b/src/components/Operations/SortRemoveMotion/sort-remove--motion.module.scss new file mode 100644 index 00000000..d82031a1 --- /dev/null +++ b/src/components/Operations/SortRemoveMotion/sort-remove--motion.module.scss @@ -0,0 +1,135 @@ + + +@keyframes sort-remove-line1 { + 0% { + transform: translateX(0px); + } + 6% { + transform: translateX(-2px); + } + 12% { + transform: translateX(0px); + } + 100% { + transform: translateX(0px); + } +} + +@keyframes sort-remove-line2 { + 4% { + transform: translateX(0px); + } + 10% { + transform: translateX(-2px); + } + 16% { + transform: translateX(0px); + } + 100% { + transform: translateX(0px); + } +} + +@keyframes sort-remove-line3 { + 8% { + transform: translateX(0px); + } + 14% { + transform: translateX(-2px); + } + 20% { + transform: translateX(0px); + } + 100% { + transform: translateX(0px); + } +} + + +@keyframes sort-remove-vertical { + 0% { + transform: scaleY(1); + } + 10% { + transform: scaleY(.7); + } + 20% { + transform: scaleY(1); + } + 100% { + transform: scaleY(1); + } +} + +@keyframes sort-remove-horizontal { + 0% { + transform: scaleX(1); + } + 10% { + transform: scaleX(.7); + } + 20% { + transform: scaleX(1); + } + 100% { + transform: scaleX(1); + } +} + +.SortRemoveVertical, +.SortRemoveHorizontal { + will-change: transform; + rotate: 45deg; + transform-origin: 1.5625rem 1.4375rem; +} + +.isAnimating { + .SortRemoveVertical { + animation: sort-remove-vertical infinite cubic-bezier(0.4, 0.14, 0.3, 1) 2s; + } +} + +.isAnimating { + .SortRemoveHorizontal { + animation: sort-remove-horizontal infinite cubic-bezier(0.4, 0.14, 0.3, 1) 2s; + } +} + + + +.SortRemoveArrow { + will-change: transform; +} + +.isAnimating { + .SortRemoveArrow { + animation: sort-remove-arrow infinite cubic-bezier(0.4, 0.14, 0.3, 1) 2s; + } +} + +.SortRemoveLine1, +.SortRemoveLine2, +.SortRemvoeLine3 { + will-change: transform; + transform-origin: 1rem 0rem; +} + +.isAnimating { + .SortRemoveLine1 { + animation: sort-remove-line1 infinite cubic-bezier(0.4, 0.14, 0.3, 1) 2s; + } +} + +.isAnimating { + .SortRemoveLine2 { + animation: sort-remove-line2 infinite cubic-bezier(0.4, 0.14, 0.3, 1) 2s; + } +} + +.isAnimating { + .SortRemoveLine3 { + animation: sort-remove-line3 infinite cubic-bezier(0.4, 0.14, 0.3, 1) 2s; + } +} + + diff --git a/src/components/Operations/index.js b/src/components/Operations/index.js index 119a2c8c..b5d1381e 100644 --- a/src/components/Operations/index.js +++ b/src/components/Operations/index.js @@ -44,6 +44,7 @@ import SendAltFilledMotion from './SendAltFilledMotion'; import SendFilledMotion from './SendFilledMotion'; import SortAscendingMotion from './SortAscendingMotion' import SortDescendingMotion from './SortDescendingMotion' +import SortRemoveMotion from './SortRemoveMotion' import TagMotion from './TagMotion' import TagEditMotion from './TagEditMotion' import TagExportMotion from './TagExportMotion' @@ -104,6 +105,7 @@ export { SendFilledMotion, SortAscendingMotion, SortDescendingMotion, + SortRemoveMotion, TagMotion, TagEditMotion, TagExportMotion, diff --git a/src/index.js b/src/index.js index cb49ced0..3a2cecf0 100644 --- a/src/index.js +++ b/src/index.js @@ -95,6 +95,7 @@ export { SendFilledMotion, SortAscendingMotion, SortDescendingMotion, + SortRemoveMotion, TagMotion, TagEditMotion, TagExportMotion, From 335b9a6aa1d4622dff9f91c93454f89f306230d0 Mon Sep 17 00:00:00 2001 From: johnbister Date: Thu, 1 Dec 2022 07:18:23 -0800 Subject: [PATCH 4/5] fix sort remove --- .../SortRemoveMotion/SortRemoveMotion.js | 4 ++-- .../sort-remove--motion.module.scss | 16 ++++++++-------- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/src/components/Operations/SortRemoveMotion/SortRemoveMotion.js b/src/components/Operations/SortRemoveMotion/SortRemoveMotion.js index a6c09252..3e3c5c45 100644 --- a/src/components/Operations/SortRemoveMotion/SortRemoveMotion.js +++ b/src/components/Operations/SortRemoveMotion/SortRemoveMotion.js @@ -25,7 +25,7 @@ const SortRemoveMotion = (props) => { > Sort remove - + @@ -34,7 +34,7 @@ const SortRemoveMotion = (props) => { - + diff --git a/src/components/Operations/SortRemoveMotion/sort-remove--motion.module.scss b/src/components/Operations/SortRemoveMotion/sort-remove--motion.module.scss index d82031a1..1793ff1b 100644 --- a/src/components/Operations/SortRemoveMotion/sort-remove--motion.module.scss +++ b/src/components/Operations/SortRemoveMotion/sort-remove--motion.module.scss @@ -4,10 +4,10 @@ 0% { transform: translateX(0px); } - 6% { - transform: translateX(-2px); + 10% { + transform: translateX(6px); } - 12% { + 20% { transform: translateX(0px); } 100% { @@ -16,13 +16,13 @@ } @keyframes sort-remove-line2 { - 4% { + 0% { transform: translateX(0px); } 10% { - transform: translateX(-2px); + transform: translateX(-6px); } - 16% { + 20% { transform: translateX(0px); } 100% { @@ -31,10 +31,10 @@ } @keyframes sort-remove-line3 { - 8% { + 0% { transform: translateX(0px); } - 14% { + 10% { transform: translateX(-2px); } 20% { From f9ebd7bf2dcd03ec1107fbb3578e9015b8ebe232 Mon Sep 17 00:00:00 2001 From: Krista Starr Date: Tue, 20 Dec 2022 14:02:23 -0600 Subject: [PATCH 5/5] changes to rotation css --- .../Operations/SortRemoveMotion/sort-remove--motion.module.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Operations/SortRemoveMotion/sort-remove--motion.module.scss b/src/components/Operations/SortRemoveMotion/sort-remove--motion.module.scss index 1793ff1b..a5b15e2d 100644 --- a/src/components/Operations/SortRemoveMotion/sort-remove--motion.module.scss +++ b/src/components/Operations/SortRemoveMotion/sort-remove--motion.module.scss @@ -79,7 +79,7 @@ .SortRemoveVertical, .SortRemoveHorizontal { will-change: transform; - rotate: 45deg; + transform: rotate(45deg); transform-origin: 1.5625rem 1.4375rem; }