[Firefox jitters/jumps at end of animation]

Hi, Sorry for the late reply, especially when you've been really good at getting back to me.

 

I'm on OSX 10.10.5 (Yosemite).

 

I'll get on to them about it, though I'm presuming they'll just ignore it due to them working on a new rendering engine (I found out this morning) called Servo: https://en.wikipedia.org/wiki/Servo_%28layout_engine%29

[Firefox jitters/jumps at end of animation]

Thanks for your suggestions, I think I've added all your suggestions to the codepen now, though unfortunately it's still an issue, it looks like this for me:

http://cl.ly/3R1U0M1f3q3Y

 

Here's the updated codepen for convenience:

[Firefox jitters/jumps at end of animation]

Hi Again,

 

Unfortunately in Firefox 39.0.3 on OSX it's still going on in your Codepen, it seems a little better, it's not jumping as much, but it still seems to almost rearrange itself at the end of the animation. Here's an example of what happens:

http://cl.ly/1M0X000C2k3V

 

Good to know about the force3d thanks for that explanation.

[Firefox jitters/jumps at end of animation]

Hey Jonathan,

 

Thanks for your response!

 

The effect I am trying to get is to not have it jump maybe 0.3s after the end of the transition. Basically I want firefox to behave like chrome does if you compare the following examples:

 

Here is an example in chrome:

http://cl.ly/2o2e0u2Z3W1O

 

Here is what happens in firefox:

http://cl.ly/3Q2Y3N2j3e2d

 

Firefox seems to change its state at the end of the transition.

 

Also regarding your other comments, my css on my actual project is more like what you've described, I've updated the codepen to reflect this a bit more accurately.

[Firefox jitters/jumps at end of animation]

Hey,
 
I've seen some topics on this before suggesting that a few things will work, but I haven't had any luck so far.

 
This is what I am witnessing: http://cl.ly/0A050R0z2Y47

If you can see, the element seems to change its state at the end of the transition and moves like 1 pixel down.
 
Potential CSS fixes have so far proven a failure (for firefox), including setting:

 

    perspective: 1000px;
    -webkit-perspective: 1000px;

    transform:translateZ(0);

    -webkit-transform:translateZ(0);

    backface-visibilitiy:hidden;

    -webkit-backface-visibility: hidden;

 

None of them seem to work.

 

I have also tried setting "force3D:true" to my GSAP JS, this does seem to work for chrome.

 

I have also tried rotating to & from values of 0.001 to 0.002

 

Is there anything else I can try?

See the Pen aOMqKw by lexbi (@lexbi) on CodePen

[Unable to restart a timeline using onComplete callback]

Oh apparently the callback needs to be in a function, derp.

[Unable to restart a timeline using onComplete callback]

Hey,

 

I'm getting this error in the console:

 

Uncaught TypeError: e[t].apply is not a function

 

Not doing anything too fancy:

var tl = new TimelineLite();

tl.add(TweenLite.to($(".dropdown_menu_wrapper.show_arrow i.fa"), 0.5, { y:10, ease:Expo.easeOut }));

tl.add(TweenLite.to($(".dropdown_menu_wrapper.show_arrow i.fa"), 0.5, { y:0, ease:Expo.easeOut, onComplete:tl.restart() }));

tl.play();

Any ideas on what this could be? I've tried using TimelineMax & TweenMax too, same issue.

See the Pen BNYMYe by lexbi (@lexbi) on CodePen

[Getting a couple of console errors when using onStart & onComplete]

worked a treat thank you!

[Getting a couple of console errors when using onStart & onComplete]

Great thanks for this!

 

Thanks for the heads up on the "display" options too.

 

I'll give this a go tomorrow, though for now it's home time

[Getting a couple of console errors when using onStart & onComplete]

Hi GreenSockers,

 

Can someone tell me where I'm going wrong here? I've added a codepen url to the post.

 

Basically I'm getting a couple of errors on click on the links in my example, I want to use display:none; & display:block; to show/hide because I want "active" elements to take the space of the ones that have been hidden.

 

It currently works exactly how I want, though I'm concerned about the errors I get in the console upon activating these elements:

 

Uncaught TypeError: this.vars[r].apply is not a function

Uncaught TypeError: this.vars.onStart.apply is not a function

 

Thanks,

Joe

See the Pen YXyaLa by lexbi (@lexbi) on CodePen