Jump to content


TimeLineMax left: 0 isn't working properly

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

Hi !


Hope you are fine guys,


I have a problem with a timeline execution.


Here is my code :


this is in a click function :

      tl = new TimelineMax();
      tl.to(".office-map", 2, {marginRight: '1800px'}, "s");
      tl.to("#office-contact", 2, {left: '800px', onComplete: afterAnimation, onCompleteParams: [toSelect, currentSelected]}, "s");

      tl.to(".office-map", 2, {marginRight: 0}, 'b');
      tl.to("#office-contact", 2, {left: 0}, 'b');

And here the called function (afterAnimation) :

    function afterAnimation(toSelect, currentSelected) {



the first 2 lines of tl are made to move the objects of their position to the outside of the screen.


After the function trigged, I have two other tl line in order to have them back.

.office-map do properly the action (restoring margin in 2 seconds as asked) but #office-contact is coming back like a big block in 0.2s. We don't have a single transition.


When I right click "inspect element" I can see the modification on the moving left element, but not on the right one...


Do you have a clue about the problem ?


Thank you in advance,




ps: ofc on codepen it's working perfectly well but not in my code :

So, my problem with my code is to have a move back - of the blue div - correctly displayed.

See the Pen gpvvEN by anon (@anon) on CodePen

Link to comment
Share on other sites



Sorry to hear that you're having problems. Unfortunately and as you mention, the code in the sample you provided is working as expected so there's not much we can do to help you.


The advice that I could give you is that, since you're moving element's of a considerable size, perhaps you could use x instead of left/right. GSAP has a feature that detects transform properties such as x and uses a 3D translation to tween that property, making the animation hardware accelerated and then removes that matrix, so the element is added to a layer in the GPU and then that layer is removed which optimizes hardware resources. Also using just one property is better than using multiple ones. So in order to move something to the right of the screen you tween that element's x to a positive value (800) and in order to move the other to the left you tween the property to a negative value. Aso remember that timelines have short methods in order to simplify the code and all those methods return the timeline so you can chain them:

tl = new TimelineMax();

  .to(".toMoveLeft", 2, {x: -1800}, "s")
  .to("#toMoveRight", 2, {x: 800, onComplete: blabla, onCompleteParams: [arg1, arg2]}, "s")
  .to(".toMoveLeft", 2, {x: 0}, 'b')
  .to("#toMoveRight", 2, {x: 0}, 'b');
  • Like 2
Link to comment
Share on other sites

I will try, but working or not you just gave me a lot of ideas.


Thank you very much Rodrigo, I appreciate your comment and your explanation.


Edit :


After trying there is no differences.

But I noticed that in my code pen, I have live modifications on both element when I click and I don't have it on my website. Only the left-element is displaying live changes.


I have to understand and to work on it first.

Link to comment
Share on other sites

Update :


When I use id selector instead of classes, everything goes wrong. Do you have an idea why ? Is there a difference for GSAP about selection with ID or classes ?


If I use classes instead of id, the animation is displaying perfectly...

I would love to have more explanations :)

Link to comment
Share on other sites

Mhh, it seems that the issue is in either your JS or HTML.


Please update the codepen of your initial post and let us know (don't edit previous posts, we don't get notifications for edits just new posts on this thread) so we can get a better look.

  • 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.