Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
lovezjk

jquery.gsap.js & overwriting

Go to solution Solved by lovezjk,

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

Hi !

 

I use gsap syntax most of my time.

But for this particular project, i decided to moove to jquery.gsap.js and animate(), for rapid prototyping.

At final performance step, i will create anonymous functions that synthetise effects created and choosed by the final user, in gsap syntax for gaining substancial speed on user interface and most of advanced parameters.

 

Anyway, i'm still at prototyping level, and i'm using hoverIntent lib for detecting user intention (mostly used for submenu and avoiding the "christmas tree effect" with animations).

 

In some cases i need better velocity and animation that are triggered instantly. Thus i rely on hover(function(){/* .animate() hover*/}, function(){/* .animate() out */})

$("a").hover(function(){
    $(this).animate({className:"+=hover"}, {duration:300, easing:ExpoOut});
}, function(){
    $(this).animate({className:"-=hover"}, {duration:300, easing:ExpoOut});
});

In css context, i just change color property to fade between colors.

 

I noticed that when i over/out/over/out/over/out/over/out/over/out/over/out animations are queued, this even if i add overwrite:"all".

 

Have an Idea ?

 

Thx

Link to comment
Share on other sites

This is happening because jQuery is adding those animations to a queue. Try adding stop to your animation.

$("a").hover(function(){
    $(this).stop().animate({className:"+=hover"}, {duration:300, easing:ExpoOut});
}, function(){
    $(this).stop().animate({className:"-=hover"}, {duration:300, easing:ExpoOut});
});
  • Like 4
Link to comment
Share on other sites

Yep - I think you could also set queue:false in your animate() call. I'm literally about to run out the door so I didn't have time to double-check that. 

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.
×