Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

helpse

Members
  • Posts

    2
  • Joined

  • Last visited

helpse's Achievements

0

Reputation

  1. 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.
  2. 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.
×