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 :
http://codepen.io/anon/pen/gpvvEN
So, my problem with my code is to have a move back - of the blue div - correctly displayed.