[delay after tween]

Mhh, not sure how or why that happens, perhaps it's related with the timing mechanism, anyway I'm not the right one to answer that.

 

The solution is quite simple, just add a restart() call for the yellow box tween:

function callback(tween)
  {
    //hide the yellow box
    TweenLite.set(tween.target, {visibility:"hidden"});

    tl.remove(tween);
    //set the delay to add the tween to the timeline after 2 seconds
    TweenLite.delayedCall(2, function()
      {
        // make the box visible and position it correctly
        TweenLite.set(yellowBox, {visibility:"visible", left:0});

        // add the tween in the timeline's current time
        tl.add(yellowTween, tl.time());
        yellowTween.restart();
      });
  }

Rodrigo.

It is still happening, from what Im seeing it only happens when I switch tabs on my browser (I use chrome). 

[delay after tween]

Success, thanks!!!

 

Overtime it comes to a halt though, not sure how to bypass that..

 

link: 

See the Pen yAtip by anon (@anon) on CodePen

 

EDIT: Overtime it comes to a halt though, not sure how to bypass that, added link

[delay after tween]

Success, thanks!!!

 

Overtime it comes to a halt though, not sure how to bypass that..

 

link: 

See the Pen yAtip by anon (@anon) on CodePen

 

EDIT: Overtime it comes to a halt though, not sure how to bypass that, added link

[delay after tween]

For this example: 

See the Pen yAtip by anon (@anon) on CodePen

The code below controls the yellowBox which obviously is not working correctly, any recommendations?

thanks

  tl.add(TweenMax.to(yellowBox, time,
{
  left:  "25px", top: "0px",
  ease:"Linear.easeNone",
  onComplete:callback, onCompleteParams:["{self}"]
}),1);


  function callback(tween) {
    //hide the yellow box
    TweenLite.set(tween.target, {visibility:"hidden"});
    //set the delay to repeat the tween after 2 seconds
    TweenLite.delayedCall(2, function()
      {
        TweenLite.set(tween.target, {visibility:"visible"});
        tween.restart();
      });
  }

 

[delay after tween]

Rodrigo, been playing around with your recommendation and here is what I get: 

See the Pen yAtip by anon (@anon) on CodePen

 

thanks!

[delay after tween]

is this what you guys meant: 

See the Pen yAtip by anon (@anon) on CodePen

 

If so, it doesnt not work since the function doesnt get called until it repeats, I need the hidden effect to happen just like with the onComplete.

[delay after tween]

Don't mention it, no problem at all.

 

Happy Tweening!!

for this example: 

See the Pen yAtip by anon (@anon) on CodePen

 

when tweening yellowBox I have an onComplete function; it doesnt get executed. On my code I place and console.log and nothing, whats going on??

thanks!

[delay after tween]

found repeatDelay: to work..sorry for this

[delay after tween]

for this example: 

See the Pen yAtip by anon (@anon) on CodePen

 

I need it to delay after yellow tween, cant find the method for delay after tween.

thanks all

[continue tweening while other tweens]

Hi Court,

 

In this case you'll have to switch all your tweens to TweenMax instances, and instead of repeating the parent timeline you'll have to repeat the nested instances, like this:

function group() {
  var tl = new TimelineLite();
  var time = 2.5;
  var redBox = DocById("redBox");
  var blueBox = DocById("blueBox");
  var yellowBox = DocById("yellowBox");


  tl.add(TweenMax.to(redBox, time, {left:  "50px", top: "0px", ease:"Linear.easeNone", repeat:-1 }),0);
  tl.add(TweenMax.to(blueBox, time, {left:  "50px", top: "0px", ease:"Linear.easeNone", repeat:-1 }),0);
  
  tl.add(TweenMax.to(yellowBox, time, {left:  "25px", top: "0px", ease:"Linear.easeNone", repeat:-1 }),1);
}

Another possibility is to create two timelines, a parent one one that contains the red and blue squares' animations and an individual tween instances for the yellow one:

function group() {
  var parentTl = new TimelineLite(),
      time = 2.5,
      redBox = DocById("redBox"),
      blueBox = DocById("blueBox"),
      nestedTl = new TimelineMax({repeat:-1}),
      yellowBox = DocById("yellowBox"),
      yellowTween = TweenMax.to(yellowBox, time, {left:  "25px", top: "0px", ease:"Linear.easeNone", repeat:-1 });

nestedTl
  .to(redBox, time, {left:  "50px", top: "0px", ease:"Linear.easeNone", repeat:-1 },0)
  .to(blueBox, time, {left:  "50px", top: "0px", ease:"Linear.easeNone", repeat:-1 },0);

//add the timeline and the tween as an array
//by default when adding an array to a timeline
//all the array's elements are added to the end of the timeline
//in this case at zero seconds.
parentTl.add([nestedTl, yellowTween]);
}

Rodrigo.

Do you have to declare the tl as new TimelineLite(); or can I still use new TimelineMax

 

ty

EDIT: was able to get it to work, just had some syntax issue, thanks!

[continue tweening while other tweens]

In this example: 

See the Pen yAtip by anon (@anon) on CodePen

I need the red and blue to continue repeating without having to wait for the yellow to end, any recommendations?

thanks all

[tween at same time]

Hi Court,

 

Sure, but there are some things you missed.

 

TimelineLite does not have the repeat method, for that you should use TimelineMax. Also you forgot to wrap the repeat var between curly brackets. The vars passed to the constructor is an object, so it has be in that particular syntax.

 

Finally the add() method has a position parameter, which allows you to set the time or label you want that particular tween to be played. This could be absolute or relative, please take a look at the API reference to find out more.

 

Your code should be like this:

function group() {
  var tl = new TimelineMax({repeat:-1});
  var time = 2.5;
  var redBox = DocById("redBox");
  var blueBox = DocById("blueBox");

  //after the tween a zero value is added indicating that this particular
  //tween should start at the time 0
  tl.add(TweenLite.to(redBox, time, {left:  "50px", top: "0px", ease:"Linear.easeNone" }),0);
  tl.add(TweenLite.to(blueBox, time, {left:  "50px", top: "0px", ease:"Linear.easeNone" }),0);
}

function DocById(id) {
  return document.getElementById(id);
}

group();

Rodrigo.

Success, thanks!

[tween at same time]

Example: 

See the Pen yAtip by anon (@anon) on CodePen

 

I need them to tween at the same time, is this possible?

ty all

[different timers not synced]

See the Pen owqGn by anon (@anon) on CodePen

 

Sorry to be such a pain in the ass, was not able to get it to work. Its pretty short and straight forward, not sure how to debug on codePen. If you can check it out and see if you can get it working, Ill let you know what is going wrong on my project

thanks..

[different timers not synced]

function tweenFunction(options){
    TweenLite.to(element, timer, {left: left, top: top, ease:"Linear.easeNone", delay: delay,
        onComplete: function(){
            animateLeft = options.animateLeft || false;
            callLeft = options.callLeft || false;
            if(animateLeft) {options.callLeft()}
        },
     }); 
}


function leftGroup() {
var timer = 2.5;
var adjustedTime = 1.25;


    tweenFunction({element: assetA, leftVal: "38px", topVal: "121px", timer: timer, animateLeft: true, callLeft: LeftAssets});
  
    function LeftAssets() {
        tweenFunction({element: hydrogenB, leftVal: "116px", topVal: "39px", timer: timer}); //timer: adjustedTime 
        tweenFunction({element: hydrogenA, leftVal: "116px", topVal: "39px", timer: adjustedTime });
    }

 

I simplified what I am doing to make it simpler to post here (I might of missed something on the syntax, but my code runs just fine).

 

Basically I have a function that takes in objects that moves stuff aroud (I call these assets). In the LeftAssets function assetB and assetC must run off different timers (timer, adjustedTime). My problem is that when I set the different timers the tween that uses adjustedTime runs a couple of times and then settles in the tween position; the other one continues tweening normally. Not sure what is even causing this problem. 

Hope I made sense..

thanks all