Navigate to section by clicking dot Indicator, gsap Observer&javascript

Question

thanks for reading.

i want to navigate to section by clicking dot Indicator.

dot indicator is showing which section is now but i also want to click the dot to navigate.

please Give Me your guidance.

thank you very much.

this is my codepen code.

code down below is gsap observer and tween for slide animation.

gsap.registerPlugin(Observer);

let current = 0;
let animating = false;

const sections = gsap.utils.toArray("section");

gsap.set(sections, { yPercent: (i) => 100 * i, xPercent: (i) => 50 * i * -1 });

Observer.create({
target: window,
type: "wheel,touch,pointer",
wheelSpeed: -1,
onUp: () => change(1),
onDown: () => change(-1)
});

function change(direction) {

if (!animating) {

  if (
    !(current === 0 && direction === -1) &&
    !(current === sections.length - 1 && direction === 1)
  ) {
    console.log("start tweening");

    animating = true;

    const tl = gsap.timeline({
  
      onComplete: function () {
        current += direction;
        animating = false;
        console.log("end tweening");
      }
    });

    tl.to(sections, { scale: 0.9 });
    tl.to(
      sections,
      { yPercent: "-=" + direction * 100, xPercent: "+=" + direction * 50 },
      "<+=0.4"
    );
    tl.to(sections, { scale: 1 }, "<+=0.4");
  } else {
    console.log("nowhere to go");
  }
}
}

this is dot indicator code

// Dot Indicator
window.addEventListener("DOMContentLoaded", () => {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      const id = entry.target.getAttribute("id");
      if (entry.intersectionRatio > 0) {
        document
          .querySelector(`.dot-indicator li a[href="#${id}"]`)
          .parentElement.classList.add("active");
      } else {
        document
          .querySelector(`.dot-indicator li a[href="#${id}"]`)
          .parentElement.classList.remove("active");
      }
    });
  });

  // Track all sections that have an `id` applied
  document.querySelectorAll("section[id]").forEach((section) => {
    observer.observe(section);
  });
});

score 0 · Answer 1 · answered Jul 21 '22 at 06:34

problem solved. thanks..

codepen

const dots = document.querySelectorAll('.dot-indicator  a');
Array.from(dots).forEach(function(dot) {
    dot.addEventListener('click', function() {
        index = this.getAttribute("index");
        console.log("index:" + index + "current :" + current);
        direction = index - current;
        change(direction);
    });
});

Navigate to section by clicking dot Indicator, gsap Observer&javascript

1 Answers1