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