daviddelusenet

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: this.tl .set(this.modalBackground, { display: "block", className: "+=" + this.modalBackgroundModClass }) The classname line causes the following error in Firefox: TypeError: this.ownerSVGElement is null 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: this.tl .set(this.modalBackground, { display: "block", onComplete: function () { this.modalBackground.classList.add(this.modalBackgroundModClass); }.bind(this) }) But I would like to use the className way. Any idea on what is going wrong? Thanks in advance.

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!