jQuery GSAP

[aStone 0 Likes (Newbie)]

Hello,

 

I was using jQuery.animate but I found the file size is too large so I want to use jquery.gsap.min.js instead. 

 

The animation was working with jQuery but when I change to jQueryGSAP, it doesn't work. 

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.5/jquery.gsap.min.js"></script>

 

All i did was changed the link. 

The instruction for GreenSock is saying I can use same syntax etc... 

 

Could you please let me know what I should do?! 

[Dipscom 2,815 Likes (Superhero)]

Hi ,

 

Do you have a reduced case example where you can show us what you are doing? A CodePen is always a great option.

 

[aStone 0 Likes (Newbie)]

Hello Dipscom,

 

I am try to create expandable banner ad with video element. 

https://jsfiddle.net/efak0d3r/2/

 

I added External resources on the left column. 

CSSplugin, easepack, timelinelite, jquery.gsap. 

 

When I use, normal 'jquery.min.js', it works fine. 

https://jsfiddle.net/efak0d3r/1/ (this link is the one working!)

 

I'm just wondering what I should do. 

 

Thanks for your help in advance.

[Dipscom 2,815 Likes (Superhero)]

I see. Thanks for the demo, it really helped clear things out.

 

I am not used to JSFiddle so, you will need to help me with that.

 

On checking the console for errors (Right-click > inspect element) I can see some errors. The one that seems to be pertinent to your issue is that jQuery is not defined - in another words, it is not being loaded.

 

Here's where you can help me: does JSFiddle loads jQuery by default? If not, that's where you problem is. You'll need to load jQuery in order to use the jQuery plugin from GSAP.

 

You see, the GSAP jQuery plugin does not replace jQuery, it simply takes over the jQuery.animate() method. More info.

 

I understand that you are working on a banner unit which, makes jQuery overkill. As a workaround, you might want to check this website: youmightnotneedjquery it will show you how you can achieve all you might need without having to load jQuery in your banner.

 

And here's the bonus material: I recreated the functionality that you are after with Vanilla JS just because it's simple and would show you that you really don't need jQuery after all.

 

See the Pen QErrmV?editors=0010 by dipscom (@dipscom) on CodePen

 

Last comment:

Don't use: 

display: none;

When you are toggling visibility of elements. There's a whole host of things that happen when you do, I'm not going to go over in detail right now but the long and short of it is that when you have display:none is equivalent as the element not existing at all and so, it makes it quite hard to target it with JS later.

[aStone 0 Likes (Newbie)]

Hi Dipscom,

 

Thank you so much for sending me this so quickly!!! also great advice! 

I really need to learn how to use GSAP and javascript.