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

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.

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.

Ahhh ! Thank you very much ! (by the way, the "xPercent" doesn't work with my code, the ul is stuck). And thank you very much for the link, something I didn't see. You know, sometimes your website is not very easy to handle. At least there is an awesome forum. Thank you again for answering Diaco !

Hi Diaco ! Thank you very much for answering ! Yes you are right, there is my CodePen Demo ! As you can see, your eventCallback suggestion works very well, thanl you ! But my problem is that, the div tomove is still attached to the previous bootstrap col-lg-6, links are not click-able anymore and the span works as if the ul was still here. I know a way to do it with JS / JQ, but it is a bit long. (clone to elem and delete it). If I use this way, I will lose my animation That's why I am wandering if it is possible with tweenmax. I will look at "getBoundingClientRect" by the way.

Hi everyone, I hope you are well ! I am experiencing some troubles with a simple animation. I don't want to explain in detail because my questins are simple : $(".answers-active").on("click", ".faq", function(event) { $this = $(this); event.preventDefault(); $itemActive = $("li.faq.active"); TweenMax.to("div#tomove", 2, {left: "870px", marginRight: "50px", width: "495px", backgroundColor: "rgba(125, 111, 40, 0.5)" }); $toDisplay = $this.find("section.answer"); $("div.col-lg-6 > section#placetoanswer").replaceWith($toDisplay); }); Is it possible to stop jquery execution during the TwinMax animation ? Second question, is there a way to indicate a DOM selector as animation destination ? Because, using a "left" propertie make it inaccurate if I want to keep a responsive design. It would be awesome to keep bootstrap properties... Thanking you in advance

Hi Carl, thank you for answering. You are right, it is a bit stupid to come with such a big question. My bad, I wanted to have some return from greensock users experiences, not about "how to make it" but more "how to render" to be honest. cheers

Hi everyone ! Hope you are fine. My question will follow in a few line, but let me introduce my problem with an image : Well, I want to creat a sequence of images. Image 1 has to take image 2 place, image 2 -> image 3, image 3 -> image 4 and image 4 has to take image 1 place. And here is the problem : 4 container that have to be resize. I have no ideas about how to do it. Because it be an infinite sequence with maybe 5s delay between each. Have I to show the risizing and object moving ? But how to make a good transition then. Do I make a shadow on whole images and when the shadow is gone show new establishment ? The only idea I have right now is to pre dev the whole comportment with a time line : img1 -> resize height img2 -> resize width img1 -> move to img2 img4 -> move to img1 and resize img3 -> move to img 4 img2 -> move to img 3 etc And doing it for all possible positions with a repeat (-1). Do you guys have some ideas about ? I thank you in advance.