How to run a function in the middle of a timeline?

[xoxoxoxo]

I'm animating a div in a timeline, however i'd like to perform some action in the middle of it. I tried `onComplete` but looks like that only works when timeline ends.

Ideally, I'd like to add perfromAction on the second timeline when the div's x value reaches to 100%

 

tl

.to(div, 1, { x: 0 })

.to(div, 1, { x: '100%'  })

.to(title, 1, { height: 0,  opacity: 0,  y: -50 }, '<=0.5');

[akapowl]

 

Hey @nullhook

 

you can actually throw an onComplete on every tween you like in that timeline, e.g.:

 

tl

.to(div, 1, { x: 0 })

.to(div, 1, { x: '100%', onComplete: function() {
  
 doYourMagicHere();
  
} })

.to(title, 1, { height: 0,  opacity: 0,  y: -50 }, '<=0.5')

;

 

[xoxoxoxo]

I should've known!

Thanks!

[ZachSaucier]

See all the callback options available by using the docs