Added animation to scrollMe

main
E. Almqvist 2 years ago
parent 70c3978b45
commit a82ae2cd47
No known key found for this signature in database
GPG Key ID: E31A99CE3E75A158
  1. 23
      components/scrollme.tsx

@ -8,6 +8,9 @@ const ScrollMeWrapper = styled.div`
bottom: 2rem; bottom: 2rem;
left: 50%; left: 50%;
color: var(--fg-faded); color: var(--fg-faded);
animation-name: scrollMeAnim;
animation-duration: 3s;
animation-iteration-count: infinite;
@media only screen and (max-height: 490px) { @media only screen and (max-height: 490px) {
display: none; display: none;
@ -21,15 +24,31 @@ const ScrollMeWrapper = styled.div`
width: 1.2rem; width: 1.2rem;
height: auto; height: auto;
} }
@keyframes scrollMeAnim {
0% {
opacity: 0;
transform: translateY(0);
}
50% {
opacity: 1;
}
100% {
opacity: 0;
transform: translateY(.75rem);
}
}
`; `;
const ScrollMe = (props: SVGProps<SVGSVGElement> & { href: string }) => { const ScrollMe = (props: SVGProps<SVGSVGElement> & { href: string }) => {
const handleScroll = () => { const handleScroll = () => {
const sectionRef = document.querySelector(props.href); const sectionRef = document.querySelector(props.href);
if (sectionRef) { if (sectionRef) {
sectionRef.scrollIntoView({ behavior: "smooth" }); sectionRef.scrollIntoView({ behavior: "smooth" });
} }
} };
return ( return (
<ScrollMeWrapper onClick={handleScroll}> <ScrollMeWrapper onClick={handleScroll}>

Loading…
Cancel
Save