Jump to content


TweenMax with Jquery and bootstrap

Go to solution Solved by Diaco,

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

		$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

Link to comment
Share on other sites

Hi JaySockUser  :)


pls make a reduced Codepen Demo available for your questions : How to Create a CodePen Demo


- i can't understand what you mean by jquery execution , but you can use GSAP eventCallbacks , like onStart and onComplete ...etc


pls check this out : http://greensock.com/docs/#/HTML5/GSAP/TweenMax/eventCallback/


- and for your second question , if i understood correctly , you can get target elem position via something like target.getBoundingClientRect().left ; and pas as tween property/destination .

  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • Solution

Ok , so you just want to tween from left side to right side , you don't need getBoundingClientRect or another calculate ,


try this : 

TweenMax.to("#tomove", 2, {left:"100%",xPercent:-100})

and pls check this Blog post about GSAP responsive solutions  : http://greensock.com/gsap-1-13-1

  • Like 3
Link to comment
Share on other sites

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 !

Link to comment
Share on other sites

don't forget to set width for your #tomove , for example set width to 100px and check again the xPercent tween :)

Link to comment
Share on other sites

Hi JaySockUser


Glad Diaco was able to provide such excellent support (as always)


You know, sometimes your website is not very easy to handle.



If there is a specific problem with the site please let us know. We will do our best to address it.

Link to comment
Share on other sites

Hey Carl,


Perhaps it's an idea to have a submenu discussion group item 'Suggestions and Ideas' under 'Support'? For me too it took some time to find the right spots. I was a bit overwhelmed.


Some suggestions I have already:

1. A page (perhaps subcategory under 'Examples & Showcases) with links to code snippet collections ordered by e.g. tweening type. 

2. Standard (backward) reference links in codepens to issues discussed in this forum. I am afraid that lots of fine solutions for problems given in this forum will get out of sight as time passes by. Nobody likes redundant discussion threads.

3. An area on the website with w3school kind of introductions. I know that that's a LOT of work...

Link to comment
Share on other sites

Thanks for the suggestions. Got some good ones from JaySock via pm.


As far as "suggestions and ideas" go, most people just use the contact form (in footer) or this forum. 

Perhaps a forum would make it easier for others to see past suggestions and our responses.


The original concept of examples and showcases was to be able to have a searchable place for cool little demos.

We have nearly a dozen collections (you need to click on the collections tab unfortunately) on CodePen which probably serve a similar purpose, are searchable, and don't require any extra work (creating thumbnails, inserting to cms, etc).


Sometimes when we create a decent demo to help people in the forums we put them in our "forums collection" with or without back links.

http://codepen.io/collection/HpaAv/ the thing is that most of the pens created to answer forums questions are done quickly and kind of scrappy.


The bottom line is we do our best to get people up to speed with the core tools and we have hundreds of examples and some great ones from the community, archiving them all properly is just a major undertaking. It is a good idea though to clean some up and make them more accessible. Can't argue with that.



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