Search the Community
Showing results for tags 'variable timeline'.
Found 4 results
-
Hi there, I'm trying to create a timeline that switches out a headline through an animation. In the case of the codepens below, I just want it to run through hello, how are you, so long. The problem is that I'm running into issues setting variables. Here is my first attempt to do this. It involved calling a function after the loop is completed. Here is my second, which involves doing a series of actions within the loop itself. Would welcome any help on this one. Thank you in advance.
-
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 ?
-
Hi there, I'm trying to create a timeline that switches out a headline through an animation. In the case of the codepens below, I just want it to run through hello, how are you, so long. The problem is that I'm running into issues setting variables. Here is my first attempt to do this. It involved calling a function after the loop is completed. Here is my second, which involves doing a series of actions within the loop itself. Would welcome any help on this one. Thank you in advance.
-
var state = true; var tl = new TimelineLite(); tl.to(element, 1, {width:"50%"}) .to(element, 1, {backgroundColor:"#FF0000"}, "-=0.5") .set(state = false) //something like for example .to(element, 1, {width:"50%", onComplete:state = false}); //or as
