Jump to content


Trouble using/TimelineLite + TweenMax w/event handler

Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi, there—
I'm hoping someone can help suss out what I'm doing wrong.
I have a page that has 2 blocks of content with a couple of <li> elements to toggle between the two, like tabs. I'm using TimelineLite to show the first block, and—when toggling to the other block—TweenMax to hide the first block's elements and TimelineLite to transition in the second block's.
What happens is page loads, first block appears. Toggle to 2nd block. 1st block is hidden, 2nd block appears. When I toggle back, 2nd block is hidden, 1st block appears BUT proceeds to disappear; it doesn't stay visible.
The parent, #section0 is set visibility: hidden in the css and I'm using TimelineLite and TweenMax to do the hiding/revealing of the children only.
For simplicity sake, I'll show only TimelineLite's first element being tweened. 

var tl0 = new TimelineLite();
tl0.to($('#section0 h2'), 1.2, {autoAlpha: 1, ease:Power2.easeOut});

//then my click handler:
$('#subNav').on('click', 'li:not(.selected)', function() {
	$('#subNav li').removeClass('selected');
	var idx = $('#subNav li.selected').index();
	switch(idx) {
		case 0:
			//hide block 2, then show block 1
			TweenMax.to($('#section1 h2'), 0, {autoAlpha: 0, overwrite:'all'});
			var tlA = new TimelineLite();
			tlA.to($('#section0 h2'), 1.2, {autoAlpha: 1, ease:Power2.easeOut});
			//Block 1 then disappears.
		case 1:
			//hide block 1, then show block 2
			TweenMax.to($('#section0 h2'), 0, {autoAlpha: 0, overwrite:'all'});
			var tlB = new TimelineLite();
			tlB.to($('#section1 h2'), 1.2, {autoAlpha: 1, ease:Power2.easeOut});

Thank you in advance! —Victor


Link to comment
Share on other sites

I eventually managed to work around this. Although the elements tweened properly the first time, the second time around required that the direct parent's visibilty be adjusted. My elements tweened in TimelineLite were the children of a container but not the direct descendants. i.e. I had #section0 > .someContainer > h2


I added 

TweenMax.to($('#section0 .someContainer'), 0, {autoAlpha: 0, overwrite:'all'});


to the beginning of my toggle back to the first tab and it worked. It seems that when the child elements completed their tween the parent's visibility:hidden kicked in. And during the tween, the child properties must have temporarily overridden the parent's, giving me that result of fading to visible then disappearing. 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.