lexbi

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

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: http://codepen.io/lexbi/pen/aOMqKw

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.

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.

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?

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

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.

worked a treat thank you!

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

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