diff --git a/src/components/HomeAnimation.tsx b/src/components/HomeAnimation.tsx index bd17027b2ef7620df087550499e1d785771d4d32..79fad02c959734b46de17ae0699999065ef69e6d 100644 --- a/src/components/HomeAnimation.tsx +++ b/src/components/HomeAnimation.tsx @@ -22,7 +22,7 @@ export function HomeAnim() { const main = gsap.timeline({ scrollTrigger: { - trigger: "svg", + trigger: "animStarterClass", scrub: true, start:"top middle", end: "+=4000" @@ -43,7 +43,7 @@ export function HomeAnim() { return ( <div className="row col"> - <svg id="svg" viewBox="0 0 2160 4000"> + <svg id="svg" viewBox="0 0 2000 2500"> <path className="homeAnimLine" d=" M 50 50 C 500 -50 1000 100 1870 50 diff --git a/src/components/test.css b/src/components/test.css index 4d7744bdcca35fc17017a89cf451a2c227628982..b2cca45f86c9a2eba3c1c2f248d34a82eef6794c 100644 --- a/src/components/test.css +++ b/src/components/test.css @@ -34,11 +34,15 @@ } .vector { - height: 100px; - width: 100px; + width: 20px; + height: 40px; background-color: white; } + .animStarterClass { + visibility: hidden; + } + #payload { height: 100px; width: 100px; diff --git a/src/contents/Home.tsx b/src/contents/Home.tsx index 96d57cbb6256a451610e4abd707331121add68b1..92369339217b6fd0094d73529538d15c387e9b2d 100644 --- a/src/contents/Home.tsx +++ b/src/contents/Home.tsx @@ -34,7 +34,7 @@ export function Home() { return ( <> - <div className="row"> + <div className="row animStarterClass"> <div className="col"> <HomeAnim/> </div>