Skip to content

Instantly share code, notes, and snippets.

@sidwebworks
Created September 17, 2021 22:34
Show Gist options
  • Save sidwebworks/f3e1fb0d40fbc0a7b476df14039499e1 to your computer and use it in GitHub Desktop.
Save sidwebworks/f3e1fb0d40fbc0a7b476df14039499e1 to your computer and use it in GitHub Desktop.
Udemy course
import React, { useState, useEffect, useCallback } from "react";
import styles from "./index.css";
import mojs from "mo-js";
const initialState = {
isClicked: false,
count: 0,
countTotal: 3400,
};
/**
* Custom Hook for animation
*/
const useClapAnimation = ({ clapCountEl, clapTotalEl, clapEl }) => {
const [timeline, setTimeline] = useState(() => new mojs.Timeline());
const tlDuration = 300;
useEffect(() => {
const scaleButton = new mojs.Html({
el: clapEl,
duration: tlDuration,
scale: { 1.3: 1 },
easing: mojs.easing.ease.out,
});
const triangleBurst = new mojs.Burst({
parent: clapEl,
radius: { 50: 95 },
count: 5,
angle: 30,
children: {
shape: "polygon",
radius: { 6: 0 },
stroke: `rgba(211,54,0,0.5)`,
strokeWidth: 2,
angle: 210,
speed: 0.2,
delay: 30,
duration: tlDuration,
easing: mojs.easing.bezier(0.1, 1, 0.3, 1),
},
});
const circleBurst = new mojs.Burst({
parent: clapEl,
radius: { 50: 75 },
angle: 25,
duration: tlDuration,
children: {
shape: "circle",
fill: "rgba(149,165,166,0.5)",
delay: 30,
speed: 0.2,
radius: { 3: 0 },
},
});
const fadeCount = new mojs.Html({
el: clapCountEl,
duration: tlDuration,
opacity: { 0: 1 },
easing: mojs.easing.ease.out,
y: { 0: -30 },
}).then({
opacity: { 1: 0 },
delay: tlDuration / 2,
y: -80,
});
const fadeCountTotal = new mojs.Html({
el: clapTotalEl,
duration: tlDuration,
opacity: { 0: 1 },
delay: (3 * tlDuration) / 2,
easing: mojs.easing.ease.out,
y: { 0: -3 },
});
if (typeof clapEl === "string") {
clapEl.style.transform = `scale(1,1)`;
} else {
const clap = document.querySelector("#clap");
clap.style.transform = `scale(1,1)`;
}
const newAnimTimeline = timeline.add([
scaleButton,
fadeCountTotal,
fadeCount,
triangleBurst,
circleBurst,
]);
setTimeline(newAnimTimeline);
}, []);
return timeline;
};
const MediumClap = () => {
const MAX_CLAP_LIMIT = 12;
const [clapState, setClapState] = useState(initialState);
const { count, countTotal, isClicked } = clapState;
const [{ clapCountRef, clapTotalRef, clapRef }, setElements] = useState({});
const setRef = useCallback((node) => {
setElements((prev) => ({ ...prev, [node.dataset.refkey]: node }));
}, []);
const animTimeline = useClapAnimation({
clapCountEl: clapCountRef,
clapTotalEl: clapTotalRef,
clapEl: clapRef,
});
const handleClick = () => {
animTimeline.replay();
setClapState((prev) => ({
isClicked: true,
count: Math.min(prev.count + 1, MAX_CLAP_LIMIT),
countTotal:
count < MAX_CLAP_LIMIT ? prev.countTotal + 1 : prev.countTotal,
}));
};
return (
<button
ref={setRef}
data-refkey="clapRef"
onClick={handleClick}
className={styles.clap}
>
<ClapIcon isClicked={isClicked} />
<ClapCount count={count} setRef={setRef} />
<ClapTotal total={countTotal} setRef={setRef} />
</button>
);
};
const ClapIcon = ({ isClicked }) => {
return (
<svg
className={`${styles.icon} ${isClicked && styles.checked}`}
xmlns="http://www.w3.org/2000/svg"
viewBox="-549 338 100.1 125"
>
<path d="M-471.2 366.8c1.2 1.1 1.9 2.6 2.3 4.1.4-.3.8-.5 1.2-.7 1-1.9.7-4.3-1-5.9-2-1.9-5.2-1.9-7.2.1l-.2.2c1.8.1 3.6.9 4.9 2.2zm-28.8 14c.4.9.7 1.9.8 3.1l16.5-16.9c.6-.6 1.4-1.1 2.1-1.5 1-1.9.7-4.4-.9-6-2-1.9-5.2-1.9-7.2.1l-15.5 15.9c2.3 2.2 3.1 3 4.2 5.3zm-38.9 39.7c-.1-8.9 3.2-17.2 9.4-23.6l18.6-19c.7-2 .5-4.1-.1-5.3-.8-1.8-1.3-2.3-3.6-4.5l-20.9 21.4c-10.6 10.8-11.2 27.6-2.3 39.3-.6-2.6-1-5.4-1.1-8.3z" />
<path d="M-527.2 399.1l20.9-21.4c2.2 2.2 2.7 2.6 3.5 4.5.8 1.8 1 5.4-1.6 8l-11.8 12.2c-.5.5-.4 1.2 0 1.7.5.5 1.2.5 1.7 0l34-35c1.9-2 5.2-2.1 7.2-.1 2 1.9 2 5.2.1 7.2l-24.7 25.3c-.5.5-.4 1.2 0 1.7.5.5 1.2.5 1.7 0l28.5-29.3c2-2 5.2-2 7.1-.1 2 1.9 2 5.1.1 7.1l-28.5 29.3c-.5.5-.4 1.2 0 1.7.5.5 1.2.4 1.7 0l24.7-25.3c1.9-2 5.1-2.1 7.1-.1 2 1.9 2 5.2.1 7.2l-24.7 25.3c-.5.5-.4 1.2 0 1.7.5.5 1.2.5 1.7 0l14.6-15c2-2 5.2-2 7.2-.1 2 2 2.1 5.2.1 7.2l-27.6 28.4c-11.6 11.9-30.6 12.2-42.5.6-12-11.7-12.2-30.8-.6-42.7m18.1-48.4l-.7 4.9-2.2-4.4m7.6.9l-3.7 3.4 1.2-4.8m5.5 4.7l-4.8 1.6 3.1-3.9" />
</svg>
);
};
const ClapCount = ({ count, setRef }) => {
return (
<span ref={setRef} data-refkey="clapCountRef" className={styles.count}>
+ {count}
</span>
);
};
const ClapTotal = ({ total, setRef }) => {
return (
<span ref={setRef} data-refkey="clapTotalRef" className={styles.total}>
{total}
</span>
);
};
const MediumAnimatedClap = () => {
return <MediumClap />;
};
export default MediumAnimatedClap;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment