/* global gsap */
import React, { useEffect } from 'react';
import gsap from 'gsap';
import ScrollTrigger from 'gsap/ScrollTrigger';
import Navbar from './Navbar';
import backgroundImage from '../Assets/bmw.jpg';
const Herosection = () => {
useEffect(() => {
gsap.registerPlugin(ScrollTrigger);
const tl = gsap.timeline({
scrollTrigger: {
trigger: "#main",
markers: true,
start: "50% 50%",
end: "100% 50%",
scrub: 2,
// pin: true
}
});
tl.to("#center", { height: "100vh" }, 'a')
.to("#top", { top: "-50%" }, 'a')
.to("#bottom", { bottom: "-50%" }, 'a')
.to("#top-h", { top: "60%" }, 'a')
.to("#bottom-h", { bottom: "-30%" }, 'a')
.to(".content", { delay: -0.2, marginTop: "0%" });
}, []);
return (
<div>
<Navbar />
<div id="main-p"></div>
<div id="main">
<div id='top'>
<h id="top-h">Gallery</h>
</div>
<div id="center" style={{ backgroundImage: `url(${backgroundImage})` }}>
<div className="content">
<h4>GRAVITY</h4>
<h3>Browse the work that define a movement and created a craft.</h3>
<div className="btn">
<h5>ENTER GALLERY</h5>
</div>
<h2>(17)</h2>
</div>
</div>
<div id='bottom'>
<h id="bottom-h">Gallery</h>
</div>
</div>
</div>
);
};
export default Herosection;
//css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
color: #0f0f0f;
}
@font-face {
font-family: Founder;
src: url(./Assets/FoundersGroteskCondensed-Bold.woff2);
}
@font-face {
font-family: CardinalR;
src: url(./Assets/cardinalfruitweb-regular.woff2);
}
@font-face {
font-family: Cardinali;
src: url(./Assets/cardinalfruitweb-italic.woff2);
}
@font-face {
font-family: Font1;
src: url(./Assets/kesslersuperdisplayweb-regular.ttf);
}
@font-face {
font-family: Font2;
src: url(./Assets/FraktionMono-Regular.ttf);
}
html,
body {
font-family: "Roslindale Display Condensed";
scroll-behavior: smooth;
scroll-snap-type: y proximity;
}
.nav {
position: fixed;
width: 100%;
display: flex;
justify-content: space-between;
z-index: 1000;
}
.nav-links {
display: flex;
}
.logo, .nav-item {
margin: 2em;
font-weight: 400;
font-size: 1.5vw;
}
h1 {
width: 80%;
position:absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
font-weight: 500;
font-size: 20vw !important;
line-height: 1;
text-transform: uppercase;
}
a {
text-decoration: none;
font-weight: 500;
}
.slide-in {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: #0f0f0f;
transform-origin: bottom;
z-index: 15;
}
.slide-out {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: #0f0f0f;
transform-origin: top;
z-index: 15;
}
#main-p{
width:100%;
height:100vh;
background-color: #ffffff;
}
#main{
position: relative;
width: 100%;
height: 100vh;
background-color: aquamarine;
overflow: hidden;
z-index: 0;
}
#top{
position: absolute;
top: 0;
width: 100%;
height: 50vh;
background-color: #fff;
z-index: 1;
overflow: hidden;
}
#center{
position: relative;
width: 100%;
height: 100vh;
transform-origin: center;
background-color: rgba(0, 0, 0, 0.5);
transition: all cubic-bezier(0.19, 1, 0.22, 1)1s;
overflow: hidden;
}
#bottom{
position: absolute;
bottom: 0;
width: 100%;
height: 50vh;
background-color: #fff;
overflow: hidden;
}
#main h{
font-family: Founder;
font-size: 22vw;
position: absolute ;
top: 46.5%;
left: 50%;
transform: translate(-50%,-50%);
}
#top-h{
bottom: 50% ;
}
#bottom-h{
top:0% !important;
}
.content{
margin-top: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100vh;
color: #ffffff;
gap: 4vh;
}
.content h4{
font-size: 1vw;
font-family: Founder;
color: #fff;
}
.content h3{
width: 22%;
font-size: 3vw;
font-family: CardinalR;
text-align: center;
font-weight: 400;
color: #fff;
}
.content .btn{
display: flex;
align-items: center;
justify-content: center;
width: 7vw;
height: 2vw;
border-radius: 50px;
background-color: #fff;
color: #0d0d0d;
font-family: Founder;
}
.content h2{
font-size: 20vw;
font-family: Founder;
color: #fff;
}
/* HeroSection2 */
#main1{
position: relative;
display: flex;
align-items: center;
width: 100%;
height: 100vh;
z-index: 0;
/* overflow: hidden; */
margin-top: 100px;
}
.left1{
display: flex;
align-items: center;
justify-content: center;
width: 30%;
height: 100%;
}
.center1{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 40%;
height: 120%;
}
.right1{
display: flex;
align-items: center;
justify-content: center;
width: 30%;
height: 100%;
}
.btn1{
display: flex;
align-items: center;
justify-content: center;
align-items: center;
padding: 0.5vw 1.2vw;
border: 1px solid #333;
border-radius: 50px;
font-size: 0.5vw;
font-family: Font2;
transition: all cubic-bezier(0.19, 1, 0.22, 1)1s;
}
.t-center{
display: flex;
align-items: flex-end;
justify-content: center;
width: 100%;
height: 50%;
transition: all cubic-bezier(0.19, 1, 0.22, 1)2s;
}
.b-center{
width: 100%;
height: 50%;
transition: all cubic-bezier(0.19, 1, 0.22, 1)2s;
}
.center1 hk{
line-height: 15vh;
font-size: 10vw;
font-weight: 400;
font-family: Font1;
text-align: center;
}
.c-center-one{
position: relative;
transform-origin: center;
width: 100%;
height: 0vh;
transition: all cubic-bezier(0.19, 1, 0.22, 1) 1s;
}
.c-center-two{
width: 100%;
height: 0vh;
transition: all cubic-bezier(0.19, 1, 0.22, 1)1s;
}
.img-all{
position: absolute;
opacity: 0;
pointer-events: none;
transition: all cubic-bezier(0.19, 1, 0.22, 1)2s;
background-size: cover;
background-position: center;
z-index: 200;
}
.img-one{
bottom: 60%;
right: 50%;
width: 25vw;
height: 25vh;
filter: blur(10px);
transition: all cubic-bezier(0.19, 1, 0.22, 1)2s;
}
.img-two{
top: 55%;
left: 50%;
width: 15vw;
height: 17vh;
filter: blur(5px);
transition: all cubic-bezier(0.19, 1, 0.22, 1)2s;
}
.img-three{
top: 50%;
left: 37%;
width: 10vw;
height: 12vh;
background-image: url(https://images.unsplash.com/photo-1683446297911-f4a1fa8e62dd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2564&q=80);
filter: blur(20px);
transition: all cubic-bezier(0.19, 1, 0.22, 1)2s;
}
.img-four{
top: 40%;
left: 55%;
width: 7vw;
height: 7vh;
background-image: url(https://images.unsplash.com/photo-1683446297911-f4a1fa8e62dd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2564&q=80);
filter: blur(20px);
}
#one{
background-image: url(https://images.unsplash.com/photo-1682687218608-5e2522b04673?ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2575&q=80);
}
#two{
background-image: url(https://images.unsplash.com/photo-1683446297911-f4a1fa8e62dd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2564&q=80);
}
#three{
background-image: url(https://images.unsplash.com/photo-1683573254548-ebb7b94d7def?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1353&q=80);
}
#four{
background-image: url(https://images.unsplash.com/photo-1683053243792-28e9d984c25a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1160&q=80);
}
#five{
background-image: url(https://images.unsplash.com/photo-1682709846996-f3c895743d37?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1932&q=80);
}
#six{
background-image: url(https://images.unsplash.com/photo-1682794496831-81a52c8e9136?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1932&q=80);
}
#seven{
background-image: url(https://images.unsplash.com/photo-1682314803906-d2078f031d82?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1932&q=80);
}
#eight{
background-image: url(https://images.unsplash.com/photo-1682200736161-77f04daf9a59?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1744&q=80);
}
/* Componets2 */
.links {
display:flex;
gap:3em;
}
a{
text-decoration: none;
color: #000;
}
footer {
position: fixed;
bottom:0;
width: 100%;
padding: 3em;
display: flex;
justify-content: space-between;
align-items: center;
}
.hero {
width: 100%;
position: absolute;
top: 50%;
left:50%;
transform: translate(-50%,-50%);
text-align: center;
z-index: -1;
}
h1 {
width: 100%;
color: #c0c0c0;
font-size: 15vw;
font-weight: 400;
letter-spacing: -0.05em;
}
p {
font-size: 1.5vw;
color: #000;
opacity: 0.35;
}
.btn {
position: relative;
top:75%;
left:50%;
transform: translate(-50%, -50%);
background: #0084ff;
color: #fff;
font-size: 12px;
border-radius: 30px;
padding: 1em 2em;
cursor:pointer;
z-index: 2;
}
.img-gallery-container {
display: flex;
position: relative;
width: 100vw;
padding-top: 100vh;
}
.img {
position: absolute;
margin-bottom: 1em;
width: 400px;
height: 500px;
overflow: hidden;
top:50%;
left: 50%;
transform: translate(-50%, -50%);
}
.img:nth-child(1),
.img:nth-child(3) {
left:75%;
}
.img:nth-child(2),
.img:nth-child(4) {
left:25%;
}
.img.reorder {
position: absolute;
top:47.5%;
left:50%;
transform: translate(-50%, -50%);
width: 250px;
height: 325px;
}
.img.reorder:nth-child(1) {
transform: translate(-50%,-50%) rotate(10deg);
}
.img.reorder:nth-child(2) {
transform: translate(-50%,-50%) rotate(-5deg);
}
.img.reorder:nth-child(3) {
transform: translate(-50%,-50%) rotate(2deg);
}
.img.reorder:nth-child(4) {
transform: translate(-50%,-50%) rotate(-2deg);
}
package.json
{
"name": "react-website",
"version": "0.1.0",
"private": true,
"dependencies": {
"@gsap/react": "^2.1.0",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"framer-motion": "^11.0.6",
"gsap": "^3.12.5",
"locomotive-scroll": "^4.1.4",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-locomotive-scroll": "^0.2.2",
"react-router-dom": "^6.22.1",
"react-scripts": "5.0.1",
"sass": "^1.71.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
can anyone solve why pin true is not working in my code