Jump to content
Search Community

Conflict between JQuery's animate fn and GSAP

morgoe 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

I see that GSAP hijacks JQuery's animate function, but this is causing issues with existing code that I have. For example:

$(".object").live("click", function () {
    $(this).animate({
        opacity: 0
    }, function () {
        console.log($(this));
        $(this).slideUp();
    });
});

How it operated before GSAP:

Click on the object, it animates it's opacity down to 0 and then slides up once the opacity animation is done.

 

After GSAP:

It animates its opacity down to 0, but then fails to run the slideUp. I used a console.log of what $(this) is in the callback - before GSAP, its a JQuery object, but afterwards its some new GSAP object that can't itself be animated. I then get an error:

Uncaught TypeError: Cannot read property 'defaultView' of undefined

 

 

I don't want to go through all of my code and change things to fit GSAP - how can I either fix this, or stop GSAP hijacking JQuery's animate plugin?

Link to comment
Share on other sites

What version of jQuery are you using? It appears live() was deprecated in 1.7

 

It would really help if you could provide a sample that we can test so that we know exactly what files (and versions) you are using. CodePen works great for this as it allows us to edit the exact files you produce and most often fix them. More details on how to do that here:

http://forums.greensock.com/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

Also please note that GSAP ONLY hijacks animate() when you load the jquery.gsap.js file as mentioned here: http://www.greensock.com/jquery-gsap-plugin/#

 

If there is a particular animation that isn't cooperating with GSAP you can pass skipGSAP:true into the animate() method's config object (details on link above).

$(".myClass").animate({scrollTop:200, skipGSAP:true});
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...