Animation isn't smooth cause some big loop must execute behind it/

[Choody]

Hi!

 

I don't sure that my topic title is good enought to understand my problem. So i have 12 circle (draw with KineticJS), and when i choose one of the circle i execute TweenLite

TweenLite.to(this, 3, {kinetic:{opacity:0, scaleX:100, scaleY:100}, onComplete:addEvent, onCompleteParams:[this]});

And then behind this animation for one circle. I just hide other 11 circle and draw new 20 circle with some graviti loop, maybe it's little heavy. Cause of that heavy loop my animation have somethink like freez, I mean the bubble smoothy grow, grow, grow then little freezz (0.5 s) and after freez animation is smooth. Maybe it is method to do animation without this freez?

 

My sample code:

bubbleGroup.on('click', function(){


for(var i = 0; i < categoryBubbleTab.length; i++)
{
categoryBubbleTab[i].setScale(0);
}
//My animation with freez below
TweenLite.to(this, 3, {kinetic:{opacity:0, scaleX:100, scaleY:100}, onComplete:addEvent, onCompleteParams:[this]});


$.ajax({
url: 'getData.php',
data: {function: 'object', text: this.get('Text')[0].getText()},
type: 'post',
success: function(output) {
//Graviti code with n^2 loop 
//Some code
}
});
});

[Carl]

Hi and welcome to the forums.

 

Very difficult to understand the problem without seeing an example. Does the animation freeze happen when the ajax() call is removed? Not really sure how that relates to your animation.

 

Please provide a codepen or jsfiddle example.

 

Thanks