Las tabs no redirigen bien a la seccion al dar click, a veces funciona y otras veces no, soy nuevo en gsap y next js, primero itero las secciones despues itero las tabs y por ultimo las conecto, no se si esta bien la logica, como podria solucionar ese error?
gsap.registerPlugin(ScrollTrigger, ScrollToPlugin);
let panels = gsap.utils.toArray(".panel");
let scrollTween;
function goToSection(i) {
scrollTween = gsap.to(window, {
scrollTo: {
y: i * innerHeight,
autoKill: false,
ease: "Power3.easeInOut",
},
duration: 1.5,
onComplete: () => (scrollTween = null),
overwrite: true,
});
}
panels.forEach((panel, i) => {
const tl = gsap.timeline({ paused: true, reversed: true });
const tlreverse = gsap.timeline({ paused: true, reversed: true });
tl.to(panel.querySelector(".parr1"), { xPercent: 0, opacity: 1 }).to(
panel.querySelector(".parr2"),
{ xPercent: 0, opacity: 1 },
"<"
);
tlreverse
.to(panel.querySelector(".parr1"), { xPercent: -50, opacity: 0 })
.to(panel.querySelector(".parr2"), { xPercent: 50, opacity: 0 }, "<");
ScrollTrigger.create({
trigger: panel,
onToggle: (self) => self.isActive && !scrollTween && goToSection(i),
});
ScrollTrigger.create({
trigger: panel,
start: "bottom bottom",
onEnterBack: () => goToSection(i),
});
ScrollTrigger.create({
animation: tl,
trigger: panel,
start: "top bottom",
end: "top top",
scrub: 1,
/* markers: true, */
});
ScrollTrigger.create({
animation: tlreverse,
trigger: panel,
start: "bottom bottom",
end: "bottom top",
scrub: 1,
});
});
let links = gsap.utils.toArray("nav a");
links.forEach((a, i) => {
let element = document.querySelector(a.getAttribute("href")),
linkST = ScrollTrigger.create({
trigger: element,
start: "top top",
});
ScrollTrigger.create({
trigger: element,
start: "top center",
end: "bottom center",
onToggle: (self) => self.isActive && setActive(a),
});
a.addEventListener("click", (e) => {
e.preventDefault();
gsap.to(window, {
duration: 1.5,
scrollTo: linkST.start,
overwrite: "auto",
});
});
});
function setActive(link) {
links.forEach((el) => el.classList.remove("active"));
link.classList.add("active");
}
* {
box-sizing: border-box;
font-family: sans-serif;
}
html,
body {
margin: 0;
padding: 0;
}
.content{
height: 100vh;
width: 100%
}
.panel {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.parr1{
translate: 0 -50;
}
.parr2{
translate: 0 50;
}
.panel p {
font-size: 6vw;
}
.red {
background: red;
}
.blue {
background: blue;
}
.green {
background: green;
}
.orange {
background: orange;
}
nav {
position: fixed;
top: 10px;
right: 10px;
background: #0000007d;
padding: 0px 10px;
border-radius: 10px;
font-weight: normal;
}
nav a {
line-height: 1.7;
text-decoration: none;
color: var(--color-surface-white);
opacity: 0.6;
}
nav a:hover {
text-decoration: underline;
}
nav a.active {
opacity: 1
}
<div class="content">
<section id="one" class="panel red">
<p class="parr1">This is page 1</p>
<p class="parr2">h1 1</p>
</section>
<section id="two" class="panel green">
<p class="parr1">This is page 2</p>
<p class="parr2">h2 2</p>
</section>
<section id="three" class="panel blue">
<p class="parr1">This is page 3</p>
<p class="parr2">h3 3</p>
</section>
<section id="four" class="panel orange">
<p class="parr1">This is page 4</p>
<p class="parr2">h4 4</p>
</section>
<nav>
<div>
<a href="#one">Section one</a>
</div>
<div>
<a href="#two">Section two</a>
</div>
<div>
<a href="#three">Section three</a>
</div>
<div>
<a href="#four">Section four</a>
</div>
</nav>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ScrollTrigger.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ScrollToPlugin.min.js"></script>