Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
rotaercz

Delay when using Tweenlite.to?

Recommended Posts

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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 .

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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();
  • Like 1
Link to comment
Share on other sites

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? :)

Link to comment
Share on other sites

Hi rotaercz,

 

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

  • Like 1
Link to comment
Share on other sites

  • 4 years later...

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.

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×