frivolta

It was just a general question, as it seems to me that firefox is having hard times rendering animations compared to other browsers. So far I have tested the website in the example section and everything works fine in Safari/Chrome/IE... but when it comes to Firefox animations are not rendered as smooth as other browsers (all kind of animations not just gsap ones), is it a known issue? It happens only to me?

Hello, I was wondering, does anyone see lag when playing animations on Firefox? I made just a few animation so far as I am a "newbie gsap coder", what I have experienced is that those animations are smooth in chrome, safari and IE but they lag a lot in Firefox. At first I thought I was coding in the wrong way my scripts but then I saw that even the animations in the "Examples" page have the same problem (eg. https://www.reputationsquad.com/). What I see is that this doesn't seem a GSAP problem but is like Firefox is having hard times with all kind of animation methods. I tested it both on my macbook pro retina (late 2015) and on a mac mini, in both cases if I try to open a website like: http://beta.wind-and-words.com/ (examples page), the fan start working at max power! Like when you render an After Effects animation with all your cores. Do you have the same problem? Do you know any solution or workaround? Thanks guys!

Yes, thanks guys turned out it was codepen making it looks staggering plus I changed my code like this, and now it works great: TweenMax.to(".portfolioTitle", .8, { xPercent:-100, rotation:0.002, force3D:true, ease: Power2.easeInOut }); TweenMax.to(".portfolioImage", .8, { xPercent:-100, filter: "grayscale(0%)", rotation:0.002, force3D:true, ease: Power2.easeInOut }); TweenMax.to(".portfolioDescription", .8, { xPercent:-100, rotation:0.002, force3D:true, ease: Power2.easeInOut });

Hello, I am starting using GSAP but I haven't found a solution to my problem in the forum. What I am trying to do is to make a 3 boxes animation, each box has 100% height and 50% width, they are next to each other so the last box will be out of the stage. When I button is pressed they all make a 50% translation so the last box is now in the stage and the last one is outside. My problem is that when you click the button the animation works correctly but it is really choppy, laggy at the beginning. What am I doing wrong? can you help me? Here is my GSAP code: $(".js--animate").click(function() { var toAnimate = document.querySelector(".portfolioDescription"); TweenMax.to(toAnimate, 2, {x:"100%" }); var toAnimate2 = document.querySelector(".portfolioImage"); TweenMax.to(toAnimate2, 2, {x:"0%" }); var toAnimate3 = document.querySelector(".portfolioTitle"); TweenMax.to(toAnimate3, 2, {x:"-100%" }); }); Thanks http://codepen.io/frivolta/pen/MJXEYp