Hi all,
Currently I'm using GSAP to animate a button. There are two timelines, one for the mouseenter animation and one for the mouseleave animation.
When you hover over the button the following timeline gets restarted:
this.enterExploreTL = new TimelineMax();
this.enterExploreTL.pause();
this.enterExploreTL
.to(this.border, 1, {
rotation: 360,
transformOrigin: '0 50% 0',
ease: Quad.easeInOut
})
.to(this.border, 0.4, {
fill: '#000',
ease: Quad.easeInOut
}, '-=0.6');
Mouseenter just triggers the following code:
this.enterExploreTL.restart();
So what happens here is that I animate a border to change its fill and transform it. This animation takes one second to complete.
If you mouseleave the button you restart the following timeline:
this.leaveExploreTL = new TimelineMax();
this.leaveExploreTL.pause();
this.leaveExploreTL
.to(this.border, 0.4, {
fill: this.fill,
ease: Quad.easeInOut
});
This timeline just returns the border fill to its original color. Now for my problem: When you trigger the leaveExploreTL 0.4 seconds or more before the enterExploreTL is finished the fill which I set in leaveExploreTL is being overwritten by the enterExploreTL animation.
So I thought: "let's check if the enterExploreTL is active when I want to start the leaveExploreTL. If so, just kill the part which sets the fill.". I did that like so:
if (this.enterExploreTL.isActive()) {
this.enterExploreTL
.kill({fill: true});
}
this.leaveExploreTL.restart();
If the kill code gets executed the fill animation part doesn't work anymore when I restart the enterExploreTL again. So my question is: how can I make the leaveExploreTL overwrite the enterExploreTL fill animations?
Thanks in advance!