Search the Community
Showing results for tags 'isactive()'.
Found 4 results
-
Hello. I'm facing some issues with the GSAP isActive() function using React. I made an aside navigation/menu panel. When clicking on a button the navigation panel is deployed and its content follows (<ul/>, <li/>, etc.). For animating the navigation panel and its content I'm using a timeline in auseEffecthook like shown below. I want to use isActive() because I would like to prevent the user from spamming the toggle button. If the navigation toggle button is spammed by rapid clicks, the animation behave weirdly and the navigation content isn't displayed properly. So I checked the doc here: https://greensock.com/docs/v2/TweenMax/isActive() I tried to reproduce and it doesn't work. So I console logged tl.isActive() and it returns false all long the timeline run. I don't get it. Did I misunderstood something? I mean when the timeline is running it is supposed to return true, right? Can someone provides some help? Thanks. useEffect(() => { const tl = gsap.timeline(); const navRow1 = navRowRef.current; const navRow2 = navRow1.nextSibling; const navRow3 = navRow2.nextSibling; if (toggled === true) { tl.to(navigationRef.current, .9, { width: '100%', ease: 'power3.out' }).fromTo([navRow1.children[0], navRow2.children[0], navRow3.children[0]], { opacity: 0, x: -16 }, { opacity: 1, x: 0, ease: 'power3.out', duration: .6 }, "-=.45").fromTo([navRow1.children[1], navRow2.children[1], navRow3.children[1]], { opacity: 0, x: -22 }, { opacity: 1, x: 0, ease: 'power3.out', duration: .6 }, "-=.15").from(socialRef.current, .9, { opacity: 0, ease: 'power3.out' }, "-=.6"); console.log(tl.isActive()); } else { tl.to(innerNavRef.current, .45, { opacity: 0, ease: 'power3.out' }).to(navigationRef.current, .45, { width: '0%', ease: 'power3.out' }); } }, [toggled]);
-
I've create a function which scrolls to the next anchor detecting the scroll direction (See below) const CONTAINER_STRING = '#main-container>main', CONTAINER = document.querySelector( CONTAINER_STRING ) let currentChild = 0 gsap.registerPlugin( ScrollToPlugin ) CONTAINER.addEventListener( 'wheel', ( { deltaY } ) => { if ( currentChild < CONTAINER.childElementCount - 1 && deltaY > 0 ) currentChild++ if ( currentChild > 0 && deltaY < 0 ) --currentChild gsap.to( CONTAINER, .5, { scrollTo: '#' + document.querySelector( `${CONTAINER_STRING}>:nth-child(${currentChild + 1})` ).id } ) }, { passive: true } ) My problem is i can't detect if gsap is currently tweening in my page. I've tried some tricks like extract the tween into a variable, but nothing works... ? So how can i detect an interpolation in my page or detect if this specific tween is active ?
-
Hello there, How do i check isActive() across ALL timelines so that i can prevent further animations running until all is NOT active. I have forked pen "check isActive()" to help illustrate my case as seen below but do not know how to proceed. I am: - using an object organise my timelines. - trying to prevent multiple animations occurring simultaneously from user input selection. I have also looked at this gsap post which looks like the user solved a similar issue but was not documented. Many thanks Joostan
-
Hello fellow GreenSock users! I'm new to GSAP and I'm using the TweenMax.to method to change the "top" css property of several elements whenever a click occurs on a navigation element... Problem is I need for that to not happen if the animation of the previous click is still in progress... I see that in the documentation for GSAP there is the public method "isActive", but I'm using TweenMax... not sure if I should even attempt at using those methods off of the TweenMax object or not - I'm guessing it wouldn't work. SO... is there a way to determine if a TweenMax animation is active or inactive? What are the differences between animations applied via TweenMax, TweenLite, and Timeline? BEST regards, gsapluvah!
