coolfarmer

Ok I think I did it good this time! If it's the best way to achieve this mouseover thing without glitch I'll use it like that! https://codepen.io/coolfarmer/pen/PoPBPeK Thank for your time!

I think it's worst than before with your 2 solutions. !important added some glitchs and mouseenter instead of :hover with css is not working. New codepen: https://codepen.io/coolfarmer/pen/XWmBmJx My goal is pretty simple, the mouseover should work only if the rectangle is at scale 1.0. Open my new codepen and you should see that the mouseover is working. Now play the animation, the rectangle will scale at 1.3 and the mouseover will stop woking (this is good, I don't want the mouseover at this step). Play again the animation, the rectangle will scale back to 1.0, and now the mouseover will not working anymore (this is incorrect). Others ideas? ?

Hello guys! I don't know why but my animation doesn't roll back at his initial state, and th result is that my mouseover doesn't work anymore. I'm pretty sure it's my understanding who is the faulty. I would appreciate any help. Thanks!

Damn that is some nice good practices, I'll use them, thank you!

Hum yeah, like I said it's pretty long to extract all the logic from my components (VueJS). I can assure you that my calculations are done one time only and the code on codepen is only for demo purpose. And I don't use addEventListener wit Vue, it's more like "@click" and "$emit" to play with event between childs and parent. Thanks for your time!

Yeah it's a bit long to extract the code from my component and transform them into css/html for codepen, but here we go: https://codepen.io/coolfarmer/pen/ExVEdOB And yeah..., the problem don't come from Gsap because it run pretty smoothly on all browser on codepen. Well, thanks again for all the tips avd have a nice day!

Ok I said nothing, the animation is a "little" laggy on Chrome/Brave (both are using Chronium) and PERFECTLY fluid on Firefox. Brave/Chrome restarted and both are still a little laggy, not perfect as firefox.

Thanks you for all these tips, I'll use them for sure! Maybe another question, do you have some tips for those "jumps" in the animation?

Ok I think I have the solution!! ? I only had to transfer the 2 css properties (visibility and transformOrigin) from set() to to() and now it work perfectly even if I spam the event. this.tl .to(details, 0.7, { visibility: "visible", transformOrigin: "50% 50%" scale: 2.8, x: this.positionElementToCenter(details).x, y: this.positionElementToCenter(details).y, ease: "Power2.easeInOut" });

Hi guys! I'm currently using GSAP to zoom a section of a SVG map. Every region on my map have 2 instances (using <use> from SVG). So when I click a region the second instance pass from a visibility:hidden to a visible state. And when I reverse the timeline it go back from visible to hidden. The problem is that after a few view zoom/unzoom, the visibility stay on a visible state... It can happen randomly between 2-7 zooms. I really don't understand that behavior. I think the bug happen fastly if I click quickly. I have a ton of security like a var "isTweening" with a "onReverseComplete" but the samething happen. Here is my timeline code (inside a Vue Component) if (!this.isTweening) { this.isTweening = true; if (this.tl != null) { console.log('Using existing TL'); return this.tl; } const details = this.$parent.$parent.$refs[this.$props.code + '-details'].$el; this.tl = gsap.timeline({onReverseComplete: this.onReverseComplete}); this.tl .set(details, { visibility: "visible", transformOrigin: "50% 50%" }) .to(details, 0.7, { scale: 2.8, x: this.positionElementToCenter(details).x, y: this.positionElementToCenter(details).y, ease: "Power2.easeInOut" }); this.tl.pause(); return this.tl; } This timeline is play() when I click on a region and reverse() when I click on the zoomed region. Any idea why GSAP can't reverse the property visibility 100% of time? After 3 hours on this problem, I need help haha. Sorry for my english it's not my main language. Thanks!

Your awesome thanks!

Yeah !!! Very very good news! You are the best ever team and GreenSock JS have a awesome future!! Otherwise, I use this topic for a small question about your future, I guess your team was develop others specials properties/plugins like "blur filter" for GreenSock JS ? Sorry for my bad english. Thanks!

Thanks

Hello guys!! I have one quesiton for you. Can we use multiple boxShadow in TweenMax on same class ? This code work : TweenMax.set(".progressBar", {boxShadow:"inset 0px 0px 6px 0px rgba(0, 0, 0, 0.85)"}); This code didn't work : TweenMax.set(".progressBar", {boxShadow:"inset 0px 0px 6px 0px rgba(0, 0, 0, 0.85), 0px 0px 12px 0px rgba(124, 34, 47, 1)"}); Thanks! ^^