Jump to content
GreenSock

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

Wait until the end of a mouseout Event before starting a new mouseover Event.

Recommended Posts

Hi,

 

I'm working on a new interface using SVG, GSAP and JQuery. I'd like a fluid interface with smooth interactions, and without staggered effects as you can see

See the Pen VYgPjQ by absolutGob (@absolutGob) on CodePen

 (when the mouse move too fast between the plygons).

 

I'd like something like this (each area back to its place before activating the new MouseEvent) but without the memory effect wich append a new Timeline each time the mouse is over a new area.

 

I tried a lot of things like tl : new Timeline ({onStart:removeMouseEvent, onComlpete:addMouseEvent}) but the result is never what i want exactly.

 

Is there a way to do that ? I hope I was clear enough, my english is pretty approximate.

 

Thanks for reading and thanks for your amazing API.

See the Pen QwYdNe by absolutGob (@absolutGob) on CodePen

Link to comment
Share on other sites

Hi absolutGob  :)

 

 

pls try something like this  :

$("#zoneUrbaine > g").children().each(function(index, element){
  var tl = new TimelineLite({paused:true});
  tl.to($(element).find(".st0"), 0.2, {fill:"#1c94c4"})
    .to($(element).find(".st1"), 0.2, {fill:"#FFFFFF"},0)
    //.to (..........)
  element.animation = tl;
});

$("#zoneUrbaine > g").children().hover(over, out);
function over(){ this.animation.play() };
function out(){ this.animation.reverse() };

and pls check out this too :

 

See the Pen emxWYb by MAW (@MAW) on CodePen

$("#zoneUrbaine > g").children().each(function(index, element){
  var tl = new TimelineLite({paused:true});
  tl.to($(element).find(".st0"), 0.2, {fill:"#7CFC00"})
    .to($(element).find(".st1"), 0.2, {fill:"black"},0)
    //.to (..........)
  element.animation = tl;
});

var activeTl ;

$("#zoneUrbaine > g").children().hover(over, out);

function over(){ 
  var anim = this.animation;
  if ( activeTl ){ 
    activeTl.reverse().eventCallback("onReverseComplete", function(){ activeTl = anim.play() }) 
} else { activeTl = anim.play() }
};

function out(){ 
 activeTl.reverse().eventCallback("onReverseComplete",null)
};
  • Like 4
Link to comment
Share on other sites

Gratz Diaco, it works exactly as I expected ! Thanks !!!

I just added a timescale to decrease timeline.reverse duration.

 

Just one thing, some polygons doesn't exactly return to the same place, i'm a little punctilious but do you have any explanation about that ?

 

See the Pen QwYdNe by absolutGob (@absolutGob) on CodePen

Link to comment
Share on other sites

Hmmm ... i don't see any problem ,  seems everything works correctly :)

Link to comment
Share on other sites

I also just tested and didn't see it animate to a different position either. I tried your example in latest Firefox and latest Chrome on Windows 7 (64-bit) PC

  • Like 1
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.
×