bubenko

Hi @GreenSock community, I am relatively new to GSAP. I'm currently building a page where the user scrolls (vertically) through the page, and when he comes to a certain point horizontal scroll section with menu fires. The issue I am having is that when using the menu for the horizontal scroll it is not scrolling to the correct panel. Here is simplified version of CodePen: https://codepen.io/skip229/pen/xxqaKVx Thank you guys for your help!

@GreenSock @Ali Manuel No worries guys. I was running old mac OS, as a result it was giving flickering effect. When I updated OS everything works well! Thank you for help!

@Ali Manuel Changed the GSAP version to 3.6.1 and it seems like its flickering more than 3.4.2. The weird thing that its only happening on Safari

@Ali Manuel @GreenSock Thank you guys for your quick response. It seems like I'm experiencing some sort of performance issue with GSAP version 3.4.2 or it might be some CSS affecting the performance. When I'm using an older Mac it gives me this flickering using Safari. But on the newer ones everything is working well. Here is the attached video example: https://vimeo.com/559373235 Thank you for your help guys!

Hey guys! I'm new to GSAP and am currently trying to figure out why my horizontal scroll flickers on Safari macOS. Other browsers (Chrome, Opera, Mozilla) working smooth. Only on Safari having flickering issues. Im using GSAP v3.4.2 Thank you for your help guys! Here is example: https://janusaidev.wpengine.com/home-testing/ Here is the code: (function( $ ) { // Reference // https://codepen.io/GreenSock/pen/ZEpNLZa if ($(".slider-panel")[0]){ gsap.registerPlugin(ScrollTrigger, ScrollToPlugin); const sections = gsap.utils.toArray(".slider-panel"); let maxWidth = 0; const getMaxWidth = () => { maxWidth = 0; sections.forEach((section) => { maxWidth += section.offsetWidth; }); }; getMaxWidth(); ScrollTrigger.addEventListener("refreshInit", getMaxWidth); gsap.to(sections, { x: () => `-${maxWidth - window.innerWidth}`, ease: "none", duration: 0.01, scrollTrigger: { trigger: ".sidescroll-inner", pin: true, scrub: true, duration: 0.01, snap: { delay: 0.25, snapTo: 1 / (sections.length - 1), duration: 0.125, ease: "power1.inOut", }, end: () => `+=${maxWidth}`, invalidateOnRefresh: true }, }); gsap.utils.toArray(".platform-tab-list .platform-tab-link").forEach((a, i) => { a.addEventListener("click", e => { e.preventDefault(); gsap.to(window, {scrollTo: i * (innerWidth + 540) }) }); }); // Adds active state sections.forEach((sct, i) => { ScrollTrigger.create({ trigger: sct, start: () => 'top top-=' + (sct.offsetLeft - window.innerWidth/2) * (maxWidth / (maxWidth - window.innerWidth)), end: () => '+=' + sct.offsetWidth * (maxWidth / (maxWidth - window.innerWidth)), toggleClass: {targets: sct, className: "active"} }); }); // Check actives $( window ).on('load scroll', function( e ) { $('.sidescroll-inner > .panel').each(function( index ) { var theId = $(this).attr('id'); if ($(this).hasClass('active')) { // console.log(theId); $('.tab-link').removeClass('active'); $('#nav_' + theId).addClass('active'); } }); }); } })( jQuery );