Jump to content


jquery gsap Plugin

Recommended Posts

Hi guys,

I am working on this app that uses jquery for functionality, however I have never really used it, especially not in conjunction with GSAP. I did get the animation to work thanks to your doc, however I am not clear as to how I would do a GSAP fromTo method using the jQuery syntax. 

Basically I am trying to use GSAP to animate some jquery modal transitions. To just test that the animation is working at all I used the below .animate method which is animating fine, but what I really want to do is a fromTo animation, where the modal is scaled up from width/height:0 to 1200px x 705px.

In my showModal function I have this:

var showModal = function () {
				}, 2000);

				$(options.selector.outer).css('display', 'flex');
				$(options.selector.inner).animate({width:"1200px", height:"705px", display:'flex'}, {duration:1000, complete:onShowComplete});

Thank you!


Link to comment
Share on other sites

Hey dada.


I don't understand what you mean by "use GSAP to animate some jquery modal transitions". jQuery is just a library kinda like GSAP. It affects the DOM, just like GSAP. So if you wanted to use GSAP instead of jQuery (jQuery is not really necessary these days), you could write that function like so:

var showModal = function () {
  gsap.delayedCall(2, function(){

  gsap.set(options.selector.outer, {display: 'flex'});
  gsap.fromTo(options.selector.inner, {width:1000, height:500, display:'flex'}, {width:1200, height:705duration:1, onComplete:onShowComplete});

I'm not sure what values you want to use though, as your code only has one set of values :) 

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.