Akish

Thank you! This is great solution.

I'm trying to create a fade slider or animation that loops over elements. I got to loop but is there anyway to have controls over the animation to move over previous or next elements like a slider. I've attached a basic codepen example of where I'm at.

This works like a charm on desktop but on mobile there's way too much blank space below the section. The images are hidden on mobile or screens < 992px.

I'm trying to replicate the same scroll behavior as on the section on this website: https://www.evnex.com/ The opacity on the elements works based on the scroll progress of the section. I've tried to get it as close as possible but it's not exactly working as intended. I'd highly appreciate some guidance.

Thank you so much for this! I was over-complicating things as always.

Hi, I've included the minimal demo now. https://codepen.io/akishjoseph/pen/NWzYaXe The click even is working fine without any delay on the demo. But I'm stuck with other issues. Here's what I'm trying to achieve: On mobile initially and on resize the menu should be hidden by default even if open on desktop and on click should slide in from the right. On Desktop it should slide in from the left and be open by default even if it closed on mobile. Seems pretty simple but I'm stuck. And I'm trying to not duplicate the menu for different screens.

Hi, I've started with GSAP recently and I'm working on a project and the click event animation works fine first 2-3 times but then it starts delaying the animation for more than 6-7 seconds. I'm trying to not duplicate the menu node so I'm trying to animate the same menu differently on mobile and desktop. I'll attach some screenshots below for better understanding. I can't provide codepen because it's a WordPress project, I'm not using any builder plugin. The menu is supposed to be closed by default and on resize on mobile while appearing on the right side. And on desktop it's supposed to be open on the left by default and on resize. gsap.registerPlugin(ScrollTrigger); document.addEventListener('DOMContentLoaded', function(){ let navTl = gsap.timeline({ paused: true, yoyo:true, reversed: true }); const header = { main: document.querySelector('.site-header'), leftNav: document.querySelector('.leftNavWrap'), button: document.querySelector('.siteToggler button'), sections: document.querySelector('.marginWrapper') } function debounce(func){ let timer; return function(event){ if(timer) clearTimeout(timer); timer = setTimeout(func, 100, event); }; } function leftNavPosition(func){ const headerHeight = header.main.offsetHeight; header.leftNav.style.top = headerHeight + 'px'; func(); } function updateNavOnResize(){ let isMobile = window.matchMedia('(max-width: 991px)'); if(isMobile.matches){ gsap.to('.leftNavWrap', {x: '100%', duration: 0}); } else{ gsap.to('.leftNavWrap', {x: '0', duration: 0}); } } window.addEventListener('resize', debounce(function(e){ leftNavPosition(updateNavOnResize); })); leftNavPosition(updateNavOnResize); function toggleNav(){ let mq = gsap.matchMedia(); mq.add({ isMobile: '(max-width: 991px)', isDesktop: '(min-width: 992px)' }, (context)=>{ let {isMobile, isDesktop} = context.conditions; navTl.to('.leftNavWrap', { duration: 1, x: isMobile ? '0' : '-100%' , ease: Expo.easeInOut, }); }); navTl.reversed() ? navTl.play() : navTl.reverse(); } const button = document.querySelector('.siteToggler button'); button.addEventListener('click', function(){ const currentState = button.getAttribute("data-state"); if (!currentState || currentState === "closed") { button.setAttribute("data-state", "opened"); button.setAttribute("aria-expanded", "true"); } else { button.setAttribute("data-state", "closed"); button.setAttribute("aria-expanded", "false"); } if(!navTl.isActive()){toggleNav();} }); });