TimeLineMax left: 0 isn't working properly

[JaySockUser]

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) {
      currentSelected.removeClass('active');
      currentSelected.hide();

      toSelect.addClass('active');
      toSelect.show();

    }

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,

 

jean

 

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

[Rodrigo]

Hi,

 

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

tl
  .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');

[JaySockUser]

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.

[JaySockUser]

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

[Rodrigo]

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.