diff --git a/100_projects/22-page-transition-with-gsap-animation/index.html b/100_projects/22-page-transition-with-gsap-animation/index.html new file mode 100644 index 0000000..6e5433b --- /dev/null +++ b/100_projects/22-page-transition-with-gsap-animation/index.html @@ -0,0 +1,40 @@ + + + + + + + Document + + + +
+
+
+

New

+

Offers

+
+
+

Sam

+

Alread A Member

+
+
+ +
+
+
+

Product Designer,
+ maker, brand builder
+ - and type lover.

+
+
+ hero +
+
+
+
+
+ + + + \ No newline at end of file diff --git a/100_projects/22-page-transition-with-gsap-animation/main.js b/100_projects/22-page-transition-with-gsap-animation/main.js new file mode 100644 index 0000000..da62e15 --- /dev/null +++ b/100_projects/22-page-transition-with-gsap-animation/main.js @@ -0,0 +1,5 @@ +const tl = gsap.timeline({defaults: {ease: 'power2.out'}}); + +tl.to('.slider', {y: "-100%", duration:1.2}); +tl.to('.intro .hero', {y: "0%", duration:1.2}, "-=1"); +tl.fromTo('.nav', {opacity:0}, {opacity:1, duration: 1}); \ No newline at end of file diff --git a/100_projects/22-page-transition-with-gsap-animation/style.css b/100_projects/22-page-transition-with-gsap-animation/style.css new file mode 100644 index 0000000..25aaf6e --- /dev/null +++ b/100_projects/22-page-transition-with-gsap-animation/style.css @@ -0,0 +1,97 @@ +*{ + margin:0; + padding: 0; + box-sizing: border-box; +} +body{ + background-color: #000; + color: #fff; +} +img{ + width: 100%; + height: 100%; +} +.warpper{ + width: 100%; + height: 100%; +} +.nav{ + padding: 20px 40px; + display: flex; + justify-content: space-between; + flex-direction: row; + align-items: center; + width: 100%; +} +.nav .left{ + display: flex; + justify-content: flex-start; + flex-direction: row; + align-items: center; +} +.nav .left h3{ + font-weight: 400; + padding-right: 10px; +} +.nav .left h3{ + font-weight:700; + font-style: italic; +} +.nav .right h3{ + font-weight: 400; + padding-right: 10px; + font-size: 24px; +} +.nav .right p{ + font-size: 14px; +} +.intro{ + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; +} +.intro .hero{ + display: flex; + justify-content: flex-start; + flex-direction: row; + align-items: center; + padding: 130px 40px; + transform: translateY(100%); +} +.intro .hero .left-hero{ + width: 55%; +} +.intro .hero .left-hero h1{ + font-size: 3rem; + font-weight: 500; + line-height: 70px; +} +@media(max-width:767px){ + .intro .hero{ + display: flex; + flex-direction: column; + gap: 10px; + } + .intro .hero .left-hero h1{ + font-size: 25px; + } + .intro .hero .right-hero, + .intro .hero .left-hero{ + text-align: center; + width: 100% !important + } +} +.intro .hero .right-hero{ + width: 40%; +} +.slider{ + position: fixed; + top: 0; + left: 0; + background-color: #18181a; + width: 100%; + height: 100%; + transform: translateY(100%); +} \ No newline at end of file diff --git a/100_projects/22-page-transition-with-gsap-animation/woman.jpg b/100_projects/22-page-transition-with-gsap-animation/woman.jpg new file mode 100644 index 0000000..6b34096 Binary files /dev/null and b/100_projects/22-page-transition-with-gsap-animation/woman.jpg differ