Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Really simple animation laggy on start

Go to solution Solved by Jonathan,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts


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


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

Link to comment
Share on other sites

  • Solution

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? :)

  • Like 2
Link to comment
Share on other sites

Looks smooth to me.


Win 7: Chrome, FF, IE11

Win10: Chrome FF, Edge



Link to comment
Share on other sites


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, {
        ease: Power2.easeInOut
    TweenMax.to(".portfolioImage", .8, {
        filter: "grayscale(0%)",
        ease: Power2.easeInOut
    TweenMax.to(".portfolioDescription", .8, {
                ease: Power2.easeInOut
  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.