Callback using .add is returning undefined

[Forxs]

I have this function:

 

function changeInfo(element){
	new TimelineMax();
	tl = new TimelineMax();

	tl.to('.info-row .content', 0.3, {opacity: 0}, 0)
	  .add(insertContent(element))
	  .to('.info-row .content', 0.3, {opacity: 1}, 0.6)

	//insertContent(element);
}

 

Which is fading out some content, run a function to insert the new content, and then fade in the new content.

 

The browser is returning "Uncaught Cannot add undefined into the timeline; it is not a tween, timeline, function, or string."

 

If I comment out the timeline and just run insertContent(element); it works fine (all be it without the animation obviously). 

 

Any idea what I can do to fix this?

 

Cheers,

[Shaun Gorneau]

Hi @Forxs, of what does the function insertContent() comprise?

[PointC]

You'll need to use call() instead of add().

 

https://greensock.com/docs/TimelineMax/call()

 

Happy tweening.

 

[Forxs]

So 'element' is just a jQuery DOM object. insertContent just pulls some information from that element and injects it into another element:

 

function insertContent(element){
	var infoContent = '<div class="image">';
	infoContent += element.find('.headshot_alternate').html();
	infoContent += '</div>';
	infoContent += '<div class="name">'+element.find('.info .name').html()+'</div>';
	infoContent += '<div class="position">'+element.find('.info .position').html()+'</div>';
	infoContent += '<div class="bio">'+element.find('.info .bio').html()+'</div>';

	$('.info-row .content').html('');
	$('.info-row .content').html(infoContent);
}

 

So the variable infoContent is just building the new content for the container. Then it injects it into '.info-row .content'.

[Forxs]

If I use call() the browser returns the error "Cannot tween a null target."

[OSUblake]

As @PointC said, you need to use .call(). 

 

Parentheses after a function will execute it immediately.

.add(insertContent(element))

 

Your function isn't returning anything, so that is essentially the same thing as this.

.add(undefined)

 

This will wait to call the function.

.call(insertContent, [element])

 

 

 

 

[Forxs]

1 minute ago, OSUblake said:

As @PointC said, you need to use .call(). 

 

Parentheses after a function will execute it immediately.

.add(insertContent(element))

 

This will wait to call the function.

.call(insertContent, [element])

 

 

This sorted it, thank you!