tben/personal-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updates

Browse Source
This commit is contained in:
Tben
2022-06-04 08:26:53 +01:00
parent cb7af35bdc
commit 71128aee00
9 changed files with 165 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/actions/TextShuffler.jsx
+125 -31
View File
@@ -4,12 +4,14 @@ import { gsap } from "gsap";
let timer = 0;
let keyNum = 0;
let textTimeout;
let textInterval;
// let chars = ("abcdefghijklmnopqrstuvwxyz1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ!@#$%^&*()_+=-;.,/?><][}{:`~").split("");
let interval = 200;
const TextShuffler = ({ textInput, delay }) => {
let [text, setText] = useState(textInput);
let [refresh, setRefresh] = useState(0);
// let [text, setText] = useState(textInput);
// let [refresh, setRefresh] = useState(0);
let [readyState, setReadyState] = useState(false);
const spanRef = React.useRef();
@@ -17,25 +19,13 @@ const TextShuffler = ({ textInput, delay }) => {
useEffect(() => {
const spanObserver = new IntersectionObserver((entries, observer) => {
if (entries[0].isIntersecting) {
requestAnimationFrame(() => {
if (delay) {
setTimeout(() => {
gsap.to(spanRef.current, {
opacity: 1,
duration: 2
});
setReadyState(true);
}, delay);
} else {
gsap.to(spanRef.current, {
opacity: 1,
duration: 2
});
if (delay) {
setTimeout(() => {
setReadyState(true);
}
})
}, delay);
} else {
setReadyState(true);
}
observer.unobserve(spanRef.current)
}
@@ -47,25 +37,129 @@ const TextShuffler = ({ textInput, delay }) => {
spanObserver.observe(spanRef.current)
}, [])
// useEffect(() => {
// if (!readyState) return;
// requestAnimationFrame(() => {
// textTimeout = setTimeout(() => {
// if (timer === 7) {
// setText(textInput);
// return window.clearTimeout(textTimeout);
// };
// setRefresh(prev => prev + 1);
// timer++
// }, 300);
// })
// }, [refresh, readyState])
useEffect(() => {
if (!readyState) return;
requestAnimationFrame(() => {
textTimeout = setTimeout(() => {
if (timer === 7) {
setText(textInput);
return window.clearTimeout(textTimeout);
};
setRefresh(prev => prev + 1);
timer++
}, 300);
let chars = textInput.split("");
let charsSpans = chars.map(char => `<span style="opacity:0">${char}</span>`)
spanRef.current.innerHTML = charsSpans.join("");
gsap.to(spanRef.current, {
opacity: 1,
duration: 1
});
let textSpans = spanRef.current.querySelectorAll("span");
// textInterval = setInterval(() => {
// if (timer >= 600) {
// window.clearInterval(textInterval);
// requestAnimationFrame(() => {
// textSpans.forEach(span => {
// // gsap.killTweensOf(span, "opacity");
// gsap.to(span, {
// opacity: 1,
// duration: Math.random(),
// delay: Math.random()
// })
// })
// })
// return;
// }
// requestAnimationFrame(() => {
// textSpans.forEach(span => {
// gsap.to(span, {
// opacity: 1,
// duration: Math.random() * 2,
// delay: Math.random() * 1.5
// })
// })
// // textSpans.forEach(span => {
// // gsap.to(span, {
// // opacity: 0,
// // duration: Math.random() * 2,
// // delay: Math.random() * 1.5
// // })
// // })
// // gsap.to(spanRef.current, {
// // opacity: 0,
// // duration: 2
// // });
// timer += interval;
// })
// }, interval)
requestAnimationFrame(() => {
// let charsSpans = chars.map(char => `<span>${char}</span>`)
// spanRef.current.innerHTML = charsSpans.join("");
// let textSpans = spanRef.current.querySelectorAll("span");
textSpans.forEach(span => {
gsap.to(span, {
opacity: 1,
duration: Math.random() * 1.5,
})
})
textSpans.forEach(span => {
gsap.killTweensOf(span, "opacity");
gsap.to(span, {
opacity: 0,
duration: Math.random() * 1.5,
delay: Math.random() * 0.5
})
})
textSpans.forEach(span => {
gsap.killTweensOf(span, "opacity");
gsap.to(span, {
opacity: 1,
duration: Math.random() * 1.5,
delay: Math.random()
})
})
})
}, [refresh])
}, [readyState])
return (
<span className="shuffled-text-span" ref={ spanRef } style={ { opacity: 0 } }>
{ text.split("").map(char => <span key={ keyNum++ } style={ { animationDelay: Math.random() * 1.5 + "s", animationDuration: (Math.random() * 2) + "s" } }>{ char }</span>) }
{/* { text.split("").map(char => <span key={ keyNum++ } style={ { animationDelay: Math.random() * 1.5 + "s", animationDuration: (Math.random() * 2) + "s" } }>{ char }</span>) } */ }
{ textInput }
</span>
)
}