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.