Jump to content
Search Community

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

absolutGob test
Moderator Tag

Go to solution Solved by Diaco,

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'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

  • Solution

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 ?

 

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