My navigation code wont work when im input my gsap scroll trigger code

Hi guys I'm working on my portfolio and I'm stuck with this code.

The problem is Whenever I write the gsap scroll trigger the navigation button won't work and then when I delete my gsap scroll code the nav button work perfectly fine.

$(document).ready(function() {
      $('.menu-toggler').on('click', function() {
        $(this).toggleClass('open');
        $('.top-nav').toggleClass('open');
      });

      $('.top-nav .nav-link').on('click', function() {
        $('.menu-toggler').removeClass('open');
        $('.top-nav').removeClass('open');
      });

      $('nav a[href*="#"]').on('click', function() {
        $('html, body').animate(keyframes = {
          scrollTop: $($(this).attr('href')).offset().top - 100
        }, options = 2000);

      });

      gsap.registerPlugin(ScrollTrigger);
      gsap.to(".div2, .div2", {
            scrollTrigger: {
              trigger: ".div2, .div2",
              start: "top bottom",
              end: "bottom top",
              scrub: 1
            },
            x: 400
            // navigation ends here