Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'toggleclass'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

Found 7 results

  1. 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
  2. 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
  3. 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.
  4. 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.
  5. TrulyNewbie

    Pinning

    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
  6. 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
  7. 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 }) } }
×