[Weird behavior when navigating to a label]

Hello Rodrigo.

 

Thank you very much for your reply.

 

I understand this issue is about changing vars.css properties on the fly, and whether TimelineLite allows it or not. For what I see in the documentation, that's the purpose of TweenMax's updateTo method.

 

In my example above, when I did not navigate through the main timeline

tween = new TimelineLite();

tween.add(getNavigationTween())
	.add('show')
	.add(getAnimateIn(), 'show')
	.add('hide', '+=5')
	.add(getAnimateOut(), 'hide');

function getAnimateOut () {
    tl = new TimelineLite({onStart: onHideFunctions, onStartParams: ["{self}"], onComplete: next});
    // ... here I add some childs
}

onHideFunctions = function (tl) {
	var children = tl.getChildren();

	$.each(children, function (index, child) {
		if (child.vars.marginLeft)
			child.vars.marginLeft = 675.5;
		if (child.vars.css && child.vars.css.marginLeft)
			child.vars.css.marginLeft = 675.5;
console.log('============');
console.log(child.vars.css);
console.log(child.vars.marginLeft);
        }

I noticed that child.vars.marginLeft was defined, and the property effectively got changed on the element, while when I used 

tween.play('hide')

child.vars.css.marginLeft was defined, and although this property got changed, the same did not happen on the element.

 

And the reason seems to be simple, when I did not use tween.play('hide'), the onStart method was called before the tween initialized, while when I used tween.play('hide'), the onStart method got called after the tween initialized.

 

That's why in the first scenario, I was able to change the property, while not in the second scenario.

 

So I added a 0.1s gap like this:

tween.add(getNavigationTween())
	.add('show')
	.add(getAnimateIn(), 'show')
	.add('hide', '+=4.9')
	.add(getAnimateOut(), 'hide+=.1');

and now my code works.

 

I understand that the updateTo method is the preferred way to go, but I'm just trying to keep things small, that's why i will try to use TimelineLite only.

 

Let me know if I'm wrong in some of my assumptions, I'm new to GSAP, but I really love this platform.

 

Thank you for your time.

 

Best regards,

Sergio.

[Weird behavior when navigating to a label]

Hello, thanks in advance for replying.

 

I am trying to change a Timeline.vars.css property on the fly (changing it on the onStart event).

When I change it without navigating through the timeline (using play or seek) it works.

The problem is when I use play('hide'). Although the onStart event gets called, I'm not being able to change the vars.css property.

 

Here are samples of my code:

function getAnimateOut () {
    tl = new TimelineLite({onStart: onHideFunctions, onStartParams: ["{self}"], onComplete: next});
    // ... here I add some childs
}

onHideFunctions = function (tl) {
	var children = tl.getChildren();

	$.each(children, function (index, child) {
		if (child.vars.marginLeft)
			child.vars.marginLeft = 675.5;
		if (child.vars.css && child.vars.css.marginLeft)
			child.vars.css.marginLeft = 675.5;
console.log('============');
console.log(child.vars.css);
console.log(child.vars.marginLeft);
        }

From my point of view, what's happening is that css properties are inside child.vars.css when I do not use play('hide'), while css properties get into child.vars (i.e. child.vars.marginLeft) when I do use play('hide').

 

This is the console output for the console.logs:

============ (normal behavior, css property effectively gets changed)
undefined
675.5
============ (this is after I do play('hide'). Althought marginLeft property gets changed, it's not what happens on the element
Object {clearProps: "all", marginLeft: 675.5}
undefined
============ 

It's also worth mentioning that this tween is nested inside another:

tween = new TimelineLite();

tween.add(getNavigationTween())
	.add('show')
	.add(getAnimateIn(), 'show')
	.add('hide', '+=5')
	.add(getAnimateOut(), 'hide');

Seems like a strange behavior to me.

 

Please let me know if I'm doing something wrong.

 

Thank you.