[TimeLineMax left: 0 isn't working properly]

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

[TimeLineMax left: 0 isn't working properly]

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.

[TimeLineMax left: 0 isn't working properly]

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

[TweenMax with Jquery and bootstrap]

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 !

[TweenMax with Jquery and bootstrap]

Hi Diaco !

 

Thank you very much for answering !

 

Yes you are right, there is

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

!

 

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.

[TweenMax with Jquery and bootstrap]

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

[Animate header, need help and ideas]

Hi Carl,

 

thank you for answering.

 

You are right, it is a bit stupid to come with such a big question.

 

 

 

helping people understand key features of the GreenSock tools.

 

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

[Animate header, need help and ideas]

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.