HarshalP

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

Hi. I put together a codepen here: https://codepen.io/pharshal/pen/Poabdwz 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

Thank you! I am try to give codepen demo.

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);