[Mouseover doesn't work anymore after play/reverse my timeline]

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!

 

See the Pen PoPBPeK by coolfarmer (@coolfarmer) on CodePen

 

Thank for your time!

[Mouseover doesn't work anymore after play/reverse my timeline]

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:

See the Pen XWmBmJx by coolfarmer (@coolfarmer) on CodePen

 

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? 🙄

[Mouseover doesn't work anymore after play/reverse my timeline]

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!

See the Pen BaoPNKB by coolfarmer (@coolfarmer) on CodePen

[Sometime the reverse of my timeline doesn't reverse variables in set()]

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

[Sometime the reverse of my timeline doesn't reverse variables in set()]

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!

[Sometime the reverse of my timeline doesn't reverse variables in set()]

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:

See the Pen ExVEdOB by coolfarmer (@coolfarmer) on CodePen

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!

[Sometime the reverse of my timeline doesn't reverse variables in set()]

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.

[Sometime the reverse of my timeline doesn't reverse variables in set()]

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?

[Sometime the reverse of my timeline doesn't reverse variables in set()]

  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"
        });

[Sometime the reverse of my timeline doesn't reverse variables in set()]

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!

 

[Multiple BoxShadow]

Your awesome thanks!

[Multiple BoxShadow]

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!

[Multiple BoxShadow]

Thanks

[Multiple BoxShadow]

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! ^^