0

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?

link codepen ejemplo

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>

2
  • Claramente hay un error de lógica de procedimiento. Primero, el problema está al ir desde la sección uno a la 4ta por ejemplo, simplemente se detiene en la siguiente. Pero esto no ocurre cuando es al revés... de todos modos, si voy desde la 4ta a la 1ra, no debería demorarse tanto ni detenerse en las otras 2 secciones no ?
    – Excorpion
    Commented el 13 jun. a las 16:05
  • La traducción de la explicación en inglés está de más. Acá hablamos la lengua de cervantes. Está Stack Overflow en inglés, dónde podrías publicar tu pregunta en ese idioma, pero los sitios son independientes y no suelen considerarse bilingües.
    – jachguate
    Commented el 13 jun. a las 23:06

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.