Skip to content
This repository has been archived by the owner on Nov 4, 2024. It is now read-only.

Gi nytt navn til boxref #140

Merged
merged 3 commits into from
Jan 25, 2022
Merged

Gi nytt navn til boxref #140

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4434aa6
Gi nytt navn til boxref
w3bdesign Jan 25, 2022
11da929
Vurder å bruke gsap på mouseenter og mouseleave?
w3bdesign Jan 25, 2022
fd4f676
Prettier
w3bdesign Jan 25, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 5 additions & 4 deletions src/components/Index/Hero.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,13 @@ import { SiTypescript, SiWordpress } from "react-icons/si";
type TTimeLineRef = HTMLDivElement | null;

const Hero = (): JSX.Element => {
const boxRef = useRef<TTimeLineRef>(null);
const animateRef = useRef<TTimeLineRef>(null);

// wait until DOM has been rendered
useEffect(() => {
gsap
.timeline()
.from(boxRef.current, {
.from(animateRef.current, {
scale: 0.6,
duration: 1.5,
opacity: 0,
Expand Down Expand Up @@ -45,8 +45,9 @@ const Hero = (): JSX.Element => {
aria-label="Kontainer for animasjoner av introtekst"
id="main-hero"
data-testid="main-hero"
className="flex flex-col justify-center text-lg">
<div ref={boxRef} className="p-4 mt-6 mb-6 bg-white opacity-75">
className="flex flex-col justify-center text-lg"
>
<div ref={animateRef} className="p-4 mt-6 mb-6 bg-white opacity-75">
<div className="text-black rounded">
<section role="intro" aria-label="Introduksjonstekst">
<h1 className="text-reveal text-5xl text-center p-2">Hei!</h1>
Expand Down
2 changes: 2 additions & 0 deletions src/components/Layout/Navbar.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@ import LINKS from "../../utils/constants/LINKS";
*/

const Navbar = (): JSX.Element => {
// https://stackoverflow.com/questions/59273754/how-can-i-assign-a-new-ref-to-every-iteration-inside-a-map-function
// TODO Vurder å bruke gsap på mouseenter?
return (
<header role="banner" aria-label="Header for logo og navigasjon">
<nav className="fixed top-0 z-50 w-full p-4 bg-gray-800">
Expand Down