Unwanted delay before starting JS animation

[jonhobbs]

Hi guys,

 

I'm a new user here and completely new to Greensock so please go easy on me

 

I have set up some simple code, which works...

$('BODY').on('click', '.card-arrow_right', function (event) {

    event.preventDefault();

    var card = $(this).closest('.card'),
        panels = card.find('.panels');

    TweenLite.to(panels, 0.2, {left:'-100%'});

});

Although it works and the panels div slides to the left, there is a few hundred millisecond delay before it starts moving. You click the button and it doesn't move immediately. If I try adding a class to the panels and using css transitions it is immediate and snappy.

Am I doing something wrong?
 

 

Edit: I have also tested the jQuery "closest" > "find" stuff and it takes less than 2ms, so that's not where the delay is coming from.

[Jonathan]

Hello jonhobbs, and Welcome to the GreenSock Forums!

 

There could be a number of things causing the delay...

• Are you using jQuery ready() event or window load event to make sure that your page is fully loaded and the DOM is ready before trying to animate anything?
• You could also adding an ID to your .card-arrow_right element so you can bind faster, when jQuery looks up your class .card-arrow_right. ID's have more specificity than classes on elements. So ID's will be faster to look up in the DOM.
• You could add an ID to your .card or it's parent so it is faster to find.
• Also you could try and bind to the document instead of the body tag, like so:

// wait until the DOM is ready
$(document).ready(function(){

   // wait until all images and links are loaded 
   $(window).on("load", function(){

       $(document).on('click', '.card-arrow_right', function (event) {

          event.preventDefault();

          var card = $("#card-parent").children('.card'),
              panels = card.find('.panels');

          TweenLite.to(panels, 0.2, {left:'-100%'});
       });

   });

});

Without seeing your HTML, JS, and CSS it will be hard to know what your code is doing in context.

 

Here is a nice video tut by GreenSock on How to create a codepen example demo.

 

Does that help?

[jonhobbs]

Hi Jonathan,

 

thanks very much for your reply. Unfortunately I don't think it is any of those things as I have tested all the selector stuff with javascript timers. Also, the same selector code is running when using the CSS transistions version which runs much faster (both of them have very smooth animation but the GSAP one has a delay before it starts).

It would be hard to put together a pen or a fiddle because there's lots of HTML/CSS to replicate and I'm not sure how I would distill that down into a minimal example. However, I am hosting the work I've done so far on azure if you want to see it in action....

http://bertest.azurewebsites.net/

...just hover over any card and click the right arrow.

[GreenSock]

I bet you have a css transition applied IN ADDITION TO the GSAP animation. That'd definitely explain the delay. Imagine what would happen if, for example, you have a 0.15s transition (which it looks like you may) which means that every time TweenLite changes the property CSS will say "don't show those results now...I'm going to transition to that new value over 0.15s", and that happens every time GSAP applies a new value during the course of the tween (60 times per second). 

 

So By the time GSAP finishes its tween (you set it to 0.2 seconds), the css transitions have only allowed it to move a tiny portion of the space, and then for the next 0.15 seconds after the tween is done, the css transition moves it to where GSAP told it to go. 

 

See the problem? 

 

Don't use CSS transitions with GSAP - it should be one or the other  

[Carl]

In addition... Using dev tools I inspect the image that I want to move and then click the button. 

I see the panel have its inline left style change immediately, so it appears the tween is starting when it should.

 

I would recommend you add an onStart callback too to verify that the tween is created and started as soon as the button is clicked.

 

Although I didn't think of Jack's idea, it would also explain why the easing is so strange (abrupt)

By default TweenLite uses a Power1 (Quad) easeOut that even with 0.2 duration should show some slow down at the end. Currently the image stops super fast with no apparent easing... again perhaps caused by a conflicting transition.

 

After further inspection it does seem like a transition is applied to .panels

 

 

 

[jonhobbs]

Thanks guys, that's worked perfectly.

 

I did the css version first and then decided to try out GSAP because I need more control over the animations (ultimately I need swipe ability too so that's next). The problem was that I forgot to remove the transition and didn't realise there would be a clash.

 

My animations are now silky smooth and I'm loving GSAP so far, especially the fact that I got a reply from the creator to my problem. Now that's service!