jquery gsap Plugin

[dada78]

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 () {
				
				setTimeout(function(){
				  //alert("Boom!");
				}, 2000);


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

Thank you!
 

 

[ZachSaucier]

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(){
    //alert("Boom!");
  });

  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