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.
