Delay when using Tweenlite.to?

[rotaercz]

I have a pretty simple bit of code:
 

TweenLite.to($(menuID), 1.5, { left: 100, onComplete: function(){
    alert('helloworld');
}});

There seems to be a delay before it moves to position 100 or perhaps I'm providing a value incorrectly? Is the second argument 1.5 the delay before it moves because it seems to be the delay based on values I've tried? If so, where do I set the duration of the tween?

 

EDIT: Also the onComplete callback seems to happen based on the 1.5 value? I'd like the callback to happen after the tweening is done but I'm not exactly sure what I'm doing wrong.

[Diaco]

Hi rotaercz 

 

i can't see that what you mean about delay !?.... there isn't any delay ;

 

pls check this out and check the browser console logs too : 

See the Pen yygxWP?editors=001 by MAW (@MAW) on CodePen

 

pls make a codepen demo if you still have any problem : Read This First: How to Create a CodePen Demo

[rotaercz]

If there are hundreds of divs in the div that I'm trying to move, could it slow it down?

[Diaco]

yep , count of divs certainly have effects on your tweens and depends on your device/browser performance too ,that's better to using svg or canvas for this count of elements .

[rotaercz]

Sorry, I'm not familiar. What's svg or canvas?

 

EDIT: That's interesting. I thought TweenLite wouldn't have a problem since there's no delay when moving the div holding hundreds of divs within it when using CSS transitions. That's why I'm wondering if I'm doing something wrong.

[GreenSock]

It's super difficult to provide accurate advice without some sort of example or codepen demo that we can look at. Can you whip together a simple codepen that shows the css transitions working well and TweenLite not? And you are using the latest version of TweenLite, right? 

 

I can't imagine a scenario where TweenLite would perform significantly worse than CSS transitions, so I wonder if you're doing something odd in your implementation (hence the demo request). If you haven't watched this, it discusses CSS animations and performance: http://greensock.com/css-performance/

 

Also keep in mind that the initial delay you're seeing may just be the page finishing loading/parsing. 

 

Oh, and I don't think SVG would perform any better, but canvas very well may, especially if you tap into WebGL (look into PixiJS for that - it works great with GSAP). Typically the biggest bottleneck BY FAR in these scenarios has to do with graphics rendering, not JS execution. 

[rotaercz]

I figured it out!

 

It's because the css had:

-webkit-transition: left 0.3s ease-out;
transition: left 0.3s ease-out;

In this scenario I got an odd side effect where the 1.5 duration in my code would become a delay for some reason. Maybe I found a bug? I think TweenLite should not be influenced in any way from the css transition code.

TweenLite.to($(menuID), 1.5, { left: 100, onComplete: function(){
    alert('helloworld');
}});

That said, how do you destroy TweenLite.to(); after it's done?

[jamiejefferson]

It's not a bug; GSAP can't just 'ignore' a CSS rule. Every frame of the animation GSAP updates the style for left, and then you have CSS telling the browser to apply that change over 0.3s. Removing the transition is the correct fix for this.

 

If you have not saved your own reference to the tween e.g.

var mytween = TweenLite.to(foo, 1, { bar: 0 });

then it will be automatically released for garbage collection at an appropriate time. If you have kept your own reference, you can kill it with mytween.kill();

[rotaercz]

I'm starting to really like GSAP. Really helpful community and it feels nice to be able to not use CSS for animations. I'd like to get a license but can't afford it at the moment. Is there any way I can earn a single developer license?

[Carl]

Hi rotaercz,

 

I will send you an email (within the next day or two) about an opportunity we might have for you.

[Oksana Romaniv]

Had the same weird behavior when animating scrollTo property. The duration param looked like the delay before scrolling to the correct section. If anyone stumbles upon this thread looking to resolve similar behavior with ScrollTo plugin, check your CSS for "scroll-behaviour" property. In my case I had "scroll-behaviour:smooth;" that ruined my tween animations.