getLabelAfter error after several times

[miketipp 0 Likes (Newbie)]

hi,

 

I worked with the example from Carl at:

http://www.snorkl.tv/2011/04/bullet-proof-timelinemax-transitions-part-3-reverse-out-or-forward-out/

 

so far so good

There is a mistake in the getLabelAfter query I guess.

 

After clicking some times there is a combination where Link 2 and another combination where link 1 is blocked.

My codepen is:

See the Pen hetFr by codepenmicha (@codepenmicha) on CodePen

 

I suggest that there is a mistake in this row

// //if ( myTimeline.getLabelAfter().indexOf("_in") != -1 )

function navClick(evt){

		targetSection = $(evt.target).attr('title');
		$('div#navcontainer div').removeClass('active');
		$(evt.target).addClass('active');
	//alert(targetSection);	
		if ( targetSection != currentSection ){
			// mit getLabelBefore trit der fehler von teil3 auf teil 2 NICHT mehr auf
			if ( myTimeline.getLabelAfter().indexOf("_in") != -1 ){
				//alert(getLabelAfter);
				myTimeline.tweenTo(myTimeline.getLabelAfter(), {onComplete:introduceTargetSection});
			} else {
				myTimeline.timeScale = 1;
				myTimeline.tweenTo(currentSection + '_in', {onComplete:introduceTargetSection});
			}
		}
		
		evt.preventDefault();
	}

I thank you for helping with this query of the section1_in label.

Is there anaother possibilty to check whether section1_in or section1_complete is palyed?

 

thank you very much for answering

Michael

[Rodrigo 2,662 Likes (Superhero)]

Hi Michael,

 

Thanks for providing the codepen it was very useful.

 

The only problem I ran into is when you are in teil1,then you click in teil3 and finally if you click in teil2 nothing happens.

 

The problem is that when you go from teil1 to teil3, when the animation ends the variable currentSection is "section2", so when you click teil2 the first conditional of the click event is true therefore nothing happens. You can check it by adding the following lines to your code:

function navClick(evt)
{
    targetSection = $(evt.target).attr('title');
    $('div#navcontainer div').removeClass('active');
    $(evt.target).addClass('active');
    //ADD THE FOLLOWING LINES
    console.log('target: ' + targetSection);
    console.log('current: ' + currentSection);

    if ( targetSection != currentSection )
    {
        // mit getLabelBefore trit der fehler von teil3 auf teil 2 NICHT mehr auf
	if ( myTimeline.getLabelAfter().indexOf("in") != -1 )
        {
	    //alert(getLabelAfter);
            myTimeline.tweenTo(myTimeline.getLabelAfter(), {onComplete:introduceTargetSection});
        }
        else
        {
	    myTimeline.timeScale = 1;
    	    myTimeline.tweenTo(currentSection + '_in', {onComplete:introduceTargetSection});
        }
    }
    evt.preventDefault();
}

My advice would be to create individual timelines for each link, then you can nest them and add the labels to your timeline, like that you could isolate better where the problem:

var myTimeline = new TimelineMax(),//main timeline
    teil1Timeline = new TimelineMax(),//first link timeline
    teil2Timeline = new TimelineMax(),//first link timeline
    teil3Timeline = new TimelineMax();//first link timeline

myTimeline
    .add("section1_in")
    .add(teil1Timeline )
    .add("section1_complete")
    .add()//call to remove elements
    .add("section2_in")

This could make more simple to find the issue.

 

Hope this helps,

Rodrigo.

[miketipp 0 Likes (Newbie)]

Hi Rodrigo,

 

thank you for your proposal to create seperate timelines.

It works like this:

 

See the Pen yIBzt by codepenmicha (@codepenmicha) on CodePen

 

thanks for your valuable help

Michael

[Carl 9,066 Likes (Superhero)]

Do you still have the same issue after using separate timelines?

[miketipp 0 Likes (Newbie)]

Hi Carl,

 

thanks for your interest. the example is taken from someone who translated your actionscript into javascript

 

no, there are no errors with seperate timelines, no matter which combination I click.

the only thing is if I click another item before the previous is finished then the previous disappear abrupt.

But I think this has only to do with bad timing not with wrong code.

What do you think?

 

Michael

[Rodrigo 2,662 Likes (Superhero)]

the only thing is if I click another item before the previous is finished then the previous disappear abrupt.

 

The solution could be create a boolean and add yet another conditional check to your first if, like this:

var isActive = false;

function navClick(evt)
{
    targetSection = $(evt.target).attr('title');
    $('div#navcontainer div').removeClass('active');
    $(evt.target).addClass('active');
    if ( targetSection != currentSection && !isActive)
    {
	if ( myTimeline.getLabelAfter().indexOf("_in") != -1 )
        {
	    myTimeline.tweenTo(myTimeline.getLabelAfter(), {onComplete:introduceTargetSection});
	}
        else
        {
	    myTimeline.timeScale = 1;
	    myTimeline.tweenTo(currentSection + '_in', {onComplete:introduceTargetSection});
	}
    }
	
    evt.preventDefault();
}

And since you're working with individual timelines you can add an onStart and onComplete callbacks to each in order to change the boolean:

var myTimeline = new TimelineMax(),
    item1Timeline = new TimelineMax({onStart:setTrue, onComplete:setFalse}),
    item2Timeline = new TimelineMax({onStart:setTrue, onComplete:setFalse}),
    item3Timeline = new TimelineMax({onStart:setTrue, onComplete:setFalse});

function setTrue()
{
    isActive = true;
}

function setFalse()
{
    isActive = false;
}

Hope this helps,

Rodrigo.