Horizontal Tab ScrollTrigger problem on manually resizing the browser window

[HarshalP]

Hi all,

I have created horizontal tabs which changes on scroll with its content. It works fine until I resize the browser window manually. When I resize the browser window manually, it changes the active tab without any reference and goes to the last tabs and overlaps the tab content of each tab.

I have already tried using the "ScrollTrigger.refresh()" but on it is not working as expected.

Please find the below attached code that I have developed for initializing the GSAP module.Any help is greatly appreciated, TIA!

Please let me know if you have any questions

 

(function ($) {
  var wwidth = $(window).width();
  var wheight = $(window).height();
  function refreshResize(){
    let tempwidth = $(window).width();
    let tempheight = $(window).height();
    if(wwidth > tempwidth + 20 || wwidth < tempwidth - 20){
      ScrollTrigger.refresh();
    }
    if(wheight > 650 && tempheight > 650){
      ScrollTrigger.refresh();
    }
    else if(wheight < 650 && tempheight < 650){
       ScrollTrigger.refresh();
    }
  }
  ScrollTrigger.defaults({
    toggleAction: "restart reverse restart pause",
  });
  ScrollTrigger.config({
    // default is "resize,visibilitychange,DOMContentLoaded,load" so we can remove "resize" from the list:
    autoRefreshEvents: "visibilitychange,DOMContentLoaded,load"
  });

  let ulItem = [];
  ulItem = gsap.utils.toArray(".dsk-block .single-block");
 
  var wheight = $(window).height() * 2 + innerHeight / 6;
  var wheight2 = $(window).height() / 2;
  var lastslide = $(window).height() + wheight2;
  var wheight3 = wheight2 + 300;
  ScrollTrigger.create({
    trigger: "#pin1",
    pin: true,
    start: "top top",
    end: "+=" + wheight,
    id: "Pin",
  });

  var ulList = [];
  $(".cust-tabs li a").each(function (index, item) {
    ulList = [...ulList, item];
  });

  ulItem.forEach(function (item, index) {
    function menuStatus(self, index) {
      $(".cust-tabs li a").removeClass("active");
      $(ulList[index]).addClass("active");
    }
    if (index == 0) {
      var block1 = gsap.timeline({
        scrollTrigger: {
          trigger: ulItem[index],
          start: "top 90%",
          end: "+=" + wheight3,
          id: "sec-" + (index + 1),
          onUpdate: (self) => menuStatus(self, index),
          pinnedContainer: "#pin1",
          // markers: true,
          toggleClass: { targets: ulItem[index], className: "active" },
        },
      });
    } else if(index > 0 && index < 4) {
      var block2 = gsap.timeline({
        scrollTrigger: {
          trigger: ulItem[index],
          start: (self) => self.previous().end,
          end: "+=" + wheight2,
          id: "sec-" + (index + 1),
          onUpdate: (self) => menuStatus(self, index),
          pinnedContainer: "#pin1",
          toggleClass: { targets: ulItem[index], className: "active" },
        },
      });
    }
    else{
      var block3 = gsap.timeline({
        scrollTrigger: {
          trigger: ulItem[index],
          start: (self) => self.previous().end,
          end: "+=" + lastslide,
          id: "sec-" + (index + 1),
          onUpdate: (self) => menuStatus(self, index), 
          pinnedContainer: "#pin1",
          toggleClass: { targets: ulItem[index], className: "active" },
        },
      });
    }
  });

  function tabsFun() {
    var secList = [];
    var secEnd = [];
    var scrollTrig = ScrollTrigger.getAll();
    scrollTrig.forEach(function (item) {
      secList = [...secList, item.start];
      secEnd = [...secEnd, item.end];
      // console.log('item',item);
    });
 
    $(".cust-tabs li a").on("click", function (e) {
      let dataid = $(this).attr("data-id");
      if (dataid == 0) {
        $("html, body").animate(
          {
            scrollTop: secList[dataid] + 1,
          },
          300
        );
      } else {
        $("html, body").animate(
          {
            scrollTop: secEnd[dataid] + 1,
          },
          300
        );
      }
    });
  }

  $(window).on("load", function () {
    tabsFun();
  });

  $(window).resize(function () {
    refreshResize();
  });


})(jQuery);

 

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[HarshalP]

Thank you!
I am try to give codepen demo.

[HarshalP]

Hi. I put together a codepen here: 

See the Pen Poabdwz by pharshal (@pharshal) on CodePen

 

 

This section is in middle of page in my project, When the window is resized  start sec-1 point go to page top so tab change on scroll are start from top of the page, but its need to start from section two.
First time when we come on page start sec-1 point start from tab section so its working fine. 

 

 

 

Thanks

[Rodrigo]

Hi,

 

Sorry for the late response.

 

I think your setup is a bit convoluted IMHO. You should look at this example for inspiration for this project:

See the Pen bGexQpq by GreenSock (@GreenSock) on CodePen

 

One of the things I can tell you is that you are creating several different ScrollTrigger instances for each tab and in the same parent, which you are pinning on every ScrolltTrigger you create. Just create a single timeline for all the tabs and just one ScrollTrigger to control everything.

 

Finally you should remove ScrollTrigger from your setup and be sure that the animation works as you expect, then add ScrollTrigger to make everything work. Check this video @Cassie made in order to get a better grasp of creating a ScrollTrigger based project:

Happy Tweening!

[HarshalP]

Hi,

Thanks for taking your time sharing this🙂, I will try.