timelinName.restart()

[Nan Say]

Hi All,

 

I am using TimelineLite to play a punch of animation.

I have a timeline and wanted to call a function oncomplete something

 

eg. timelineName = new TimelineLite();

timelineName.pause();

timelineName.to($('#someID"), 1, {display: 'block', onComplete: start() });

 

function start() {

  timelineName.restart();

}

 

 

Its cause the error "Uncaught TypeError: Cannot read property 'restart' of undefined"

 

Do I miss something?

 

 

Thanks, 

[OSUblake]

Hi Nan Say,

 

onComplete is being called when you create your timeline and not when the animation is actually completed. You need to add a reference to your function without the parentheses. 

 

var tl = new TimelineLite();
tl.to(".box", 2, { x: 500, onComplete: start });

function start() {
  tl.restart();
}

See the Pen jExzJg by osublake (@osublake) on CodePen

[Diaco]

Hi Nan Say 

 

try this :

var timelineName = new TimelineLite();
timelineName.to("#someID", 1, {........... , onComplete:start });

function start() {
  timelineName.restart();
}

or another shortest way : 

var timelineName = new TimelineLite({ onComplete: function(){ this.restart() } });
timelineName.to("#someID", 1, {............});

edit : Ooops ... OSUblake already answered