Jump to content
Search Community

jQuery GSAP

aStone test
Moderator Tag

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

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. 

 
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?! 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

  • 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.
×
×
  • Create New...