Search the Community
Showing results for tags 'toggleclass'.
Found 10 results
-
Hi, newbie here. I'm desperately trying to figure out how to pin the second div to the top of the screen, beneath the first div, then releasing it as the div above it ends. Just like - https://jeongsteph.design/ I've tried toggleclass too but I just can't get it and I don't know where I'm going wrong. Please help me Thank you
-
Hi, when we click on the button it opens a modal. Inside this modal, it's possible to scroll down to read all the content. It has on the left a "scroll indicator" and some bullet points related to text content on the right. I'd like to anim the scroll indicator (increase the height when we scroll down) and add a class to the bullet points when the scroll indicator hits them. I have two issues right now: - about the scroll indicator, scrolltrigger creates a huuuge blank space after my content so the the scroll indicator is biased and I don't know why (is it related to the end parameter) ? - I created another function to toggle class my bullet points, it's "working" but it's not perfect because classes aren't toggle exactly when the scroll indicator meet the bullet point. Is it possible to achieve what I want with only one function/scrolltrigger ? How to fix the end section bug ? Thanks in advance.
-
Hi, I have a fixed social-share element that appears on scroll but I am wanting to implement ScrollTrigger to have it add a class of active if the user has scrolled 20% of the viewport and then remove the class of active once the user is 20% from the bottom of the viewport. I've tried messing with this CodePen but am having no luck: https://codepen.io/GreenSock/pen/NWxZPOp You can see how it currently behaves here: https://atmos.earth/raveena-aurora-ashas-awakening-leads-with-love/ This is my code currently: gsap.to(socialShare, { autoAlpha: 1, scrollTrigger: { trigger: "body", markers: true, start: "top -20%", end: "top -20%" } }); Any help would be greatly appreciated as it seems quite simply but it might be early morning brain fog haha. Thanks, Dayne -
Hello, I want to close the content that I opened with the Menu button with the same button. I use scroll pause when opening the menu, but to cancel it "smoother.paused(false);" I have to use is there a method like toggleclass for this? Can you help me? The code i use; $(".hamburgerMenuOpen").click(function () { smoother.paused(true); $(".menu").addClass("visible"); }); //Hamburger Menu Close $(".hamburgerMenuClose").click(function () { smoother.paused(false); $(".menu").removeClass("visible"); });
-
Hi guys ! I'm looping on an array of elements to toggle a class on these elements each time they enter the viewport but I don't think my code is optimized. Is there anything I could do to simplify this : const buttons = gsap.utils.toArray('.btn'); buttons.forEach((btn) => { gsap.from(btn, { scrollTrigger: { start: 'top bottom', end: 'bottom top', trigger: btn, onEnter() { btn.classList.remove('disable'); }, onLeave() { btn.classList.add('disable'); }, onEnterBack() { btn.classList.remove('disable'); }, onLeaveBack() { btn.classList.add('disable'); } } }); }); Thanks for your help
-
http://clients.super-agency.com/test/index.html Hello, I made a menu with gsap, but after clicking on a different link from this menu and going back, the menu remains open, I couldn't find a solution, can you help? Where am I doing wrong? Menu code const ham = document.querySelector(".ham"); const menu = document.querySelector('.main-menu'); const links = menu.querySelectorAll('li a'); const menulist = document.querySelectorAll('.menu-list'); var tl = gsap.timeline({ paused: true }); tl.to(menu, { duration: 1, opacity: 1, height: '100vh', ease: 'expo.inOut', width: "100%", }) tl.from(menulist, { duration: .5, opacity: 0, height: '100vh', left: '0', ease: 'expo.inOut', }, "-=0.5"); tl.from(links, { opacity: 0, duration: 1.2, ease: "power4.out", y: 320, stagger: 0.1, }, "-=0.1"); tl.reverse(); ham.addEventListener('click', () => { menuBar.reversed(!menuBar.reversed()); tl.reversed(!tl.reversed()); }); var menuBar = gsap.timeline(); menuBar.to('.bar-1', 0.5, { attr: { d: "M8,2 L2,8" }, x: 1, ease: Power2.easeInOut }, 'start') menuBar.to('.bar-2', 0.5, { autoAlpha: 0 }, 'start') menuBar.to('.bar-3', 0.5, { attr: { d: "M8,8 L2,2" }, x: 1, ease: Power2.easeInOut }, 'start') menuBar.reverse(); Menu Codepen Code https://codepen.io/r3khchand/pen/MWbJOwz
-
I am toggling class at box-container (black borderbox on left) based on selector's (color boxes) start and end point while scroll. I try to find a way to avoid toggleClass when distance between next start point and current end end point is too short. ( want to implement toggleClass only if this distance is larger than box height ) **** Screenshot that issue happened (passed end and about to pass next start) **** I was trying to achieve this with scrolltrigger's callback functions but it was too complicated and failed to get the distance between endpoint and next start point.
-
Hi. I want to pin a section and change child sections using fadeIn-fadeOut. I tried to use the onToggle method to get the data attribute or just index for the current section, but in this case "onToggle" doesn't work. Same with "toggleClass". Do you know why this is happening? I know I don't need data attributes, index is enough, but I've tried to do it in different ways.
-
If I want to toggle a class on another object, the class "undefined" is set instead of the one I want. Here the example: https://codepen.io/alsodenn/pen/WNrNNap
-
Is working quite ok, the only requirement is making the buttons to animate with GSAP instead than css. On click I should make the button active with width and height 96px. By default the first element should be always active. I put together this code (is not on the demo ) which is not working fine. $(".app-promo-img-align:first").addClass("active"); TweenLite.to('.app-promo-img-align.active a', 0.4, {width:'96px', height:'96px'}) var button = $('.app-promo-images').find('.app-promo-img-align') button.onclick = function(e) { e.preventDefault; $(this).addClass("active"); $('.app-promo-img-align.active').removeClass("active"); if ($(button).hasClass('active')) { TweenLite.to('.app-promo-img-align.active a', .5, {width:'96px', height:'96px', ease: Power3.easeOut }) } else{ TweenLite.to('.app-promo-img-align a', .5, {width:'80px', height:'80px', ease: Power3.easeOut }) } }
