daviddelusenet
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by daviddelusenet
-
-
Thanks for your response Jonathan. The animations I'm doing aren't just reversed versions of each other. One animation is taking 1 second and the other is taking 0.4 second.
The duration difference is causing the problem. When I trigger the enter animation (which is 1 second) and after 0.2 seconds I trigged the leave animation (by leaving the button) the leave animation gets triggered and finished before the enter animation.This causes the enter animation the overwrite the leave animation styling. I tried to solve it like this:
if (this.enterExploreTL.isActive()) { this.enterExploreTL .kill({fill: true}); } this.leaveExploreTL.restart();
This works one time. If the kill-code gets triggered and I restart the enterExploreTL again the fill won't be animated anymore. How can I kill the fill animation but make it work on a restart?
-
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!
Set className throws error in Firefox
in GSAP
Posted
Hi all,
Currently I'm testing a website on which I use some GSAP animations. One of this animations causes a error in Firefox (v51 run a Macbook Pro retina).
This is the code that causes the error:
The classname line causes the following error in Firefox:
This code does work on all other devices and browsers on which I've tested on. I also can make it work by adding the class like this:
But I would like to use the className way. Any idea on what is going wrong?
Thanks in advance.