TimelineMax .How to add Complete Event in each motion

[ylylsheep]

I am come from china. my english is poor , so...

 

 

my code 

// JavaScript Document
tl=new TimelineMax( 
	{ 
		onComplete:function()
		{	
			TweenMax.to($("#divId"),.7,{delay:.7,opacity:0,ease:Linear.easeNone,onComplete:function()
				{
					//my event	
				}
			})			
		}
	})
tl.to($("#divId"),.5,{left:-200})
.to($("#divId"),1,{opacity:0})	
.to($("#divId"),2,{top:260})

I want to do it like this:

add “onComplete” event when each motion complete

tl=new TimelineMax( 
	{ 
		onComplete:function()
		{	
			TweenMax.to($("#divId"),.7,{delay:.7,opacity:0,ease:Linear.easeNone,onComplete:function()
				{
					//my event	
				}
			})			
		}
	})
tl.to($("#divId"),.5,{left:-200,onComplete:function(){/*do something*/}})
.to($("#divId"),1,{opacity:0,onComplete:function(){/*do something*/}})	
.to($("#divId"),2,{top:260})

.to($("#divId"),1,{opacity:0,onComplete:function(){/*do something*/}})    

 

 

 

 

 

 

//------------------------------------
i just did it like this for work,

TweenMax.to($("#divId"),1,
{
	onComplete:function()
	{
		TweenMax.to($("#divId"),1,
		{
			onComplete:function()
			{
				TweenMax.to($("#divId"),1,
				{
					onComplete:function()
					{
						
					}
				})
			}
		})
	}
})

[ylylsheep]

I found this, add it is working

addCallback ( callback:Function, position:*, params:Array, scope:* ) : TimelineMax
Inserts a callback at a particular position.

my code：

tl=new TimelineMax( )
tl.to($("#divId"),.5,{left:-200})
.to($("#divId"),1,{opacity:0})	
.to($("#divId"),2,{top:260})

tl.addCallback(function(){/*do something*/},.5)
tl.addCallback(function(){/*do something*/},1.5)

but I am still want to use like:    

 

.to($("#divId"),1,{opacity:0,onComplete:function(){/*do something*/}})  

 

because if i changed motion time,I must have to change callback time again。

[Carl]

[docs id=js.TweenLite.to()" linkText="TweenLite.to]

 

Welcome to the forums.

 

You can add an anonymous onComplete callback to each tween if you like. Maybe you have a syntax error in first example.

 

var tl = new TimelineLite();


tl.to("#redBox", 1, {
    x: 550,
    onComplete: function() {
      TweenMax.set("#redBox", {
        opacity: 0.5,
        scale: 0.5
      })
    }
  })
  .to("#blueBox", 1, {
    x: 550,
    onComplete: function() {
      TweenMax.set("#blueBox", {
        opacity: 0.5,
        scale: 0.5
      })
    }
  }, "-=0.5")

http://codepen.io/GreenSock/pen/VLVOXN?editors=001

Also, using addCallback you do not need to set the time with the position parameter, you can do this

var tl = new TimelineMax();


tl.to("#redBox", 1, {x: 550})
  .addCallback(function() {
    TweenMax.set("#redBox", {opacity: 0.5, scale: 0.5})
})


.to("#blueBox", 1, {x: 550})
  .addCallback(function() {
    TweenMax.set("#blueBox", {opacity: 0.5, scale: 0.5})
})

 

and each time you change duration of tweens, you do not have to move the callbacks

 

http://codepen.io/GreenSock/pen/KprLem?editors=101

[ylylsheep]

Welcome to the forums.

 

You can add an anonymous onComplete callback to each tween if you like. Maybe you have a syntax error in first example.

 

var tl = new TimelineLite();


tl.to("#redBox", 1, {
    x: 550,
    onComplete: function() {
      TweenMax.set("#redBox", {
        opacity: 0.5,
        scale: 0.5
      })
    }
  })
  .to("#blueBox", 1, {
    x: 550,
    onComplete: function() {
      TweenMax.set("#blueBox", {
        opacity: 0.5,
        scale: 0.5
      })
    }
  }, "-=0.5")

See the Pen VLVOXN?editors=001 by GreenSock (@GreenSock) on CodePen

Also, using addCallback you do not need to set the time with the position parameter, you can do this

var tl = new TimelineMax();


tl.to("#redBox", 1, {x: 550})
  .addCallback(function() {
    TweenMax.set("#redBox", {opacity: 0.5, scale: 0.5})
})


.to("#blueBox", 1, {x: 550})
  .addCallback(function() {
    TweenMax.set("#blueBox", {opacity: 0.5, scale: 0.5})
})

 

and each time you change duration of tweens, you do not have to move the callbacks

 

See the Pen KprLem?editors=101 by GreenSock (@GreenSock) on CodePen

 

 

Thank you very much!