Really simple animation laggy on start

[frivolta 1 Likes (Newbie)]

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

See the Pen MJXEYp by frivolta (@frivolta) on CodePen

[Jonathan 5,176 Likes (Superhero)]

Hello frivolta and welcome to the GreenSock Forum!

 

After some tests it looks like this is being caused by codepen loading assets. Every other page load i see codepen throwing an error on some of its combined js scripts.

 

If i just fork (copy) your pen and view it in full screen mode with no editing panels. The lag goes away:

 

See the Pen rjrWYY by jonathan (@jonathan) on CodePen

 

I was testing on Windows 10 on latest Firefox. I even tested and made your initial elements use translate3d() or matrix3d() in the CSS style-sheet or via GSAP set() method, but codepen would still show the lag intermittently.

 

Does that help?

[PointC 8,599 Likes (Superhero)]

Looks smooth to me.

 

Win 7: Chrome, FF, IE11

Win10: Chrome FF, Edge

 

[frivolta 1 Likes (Newbie)]

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
    });