CSS filter property resetting after GSAP animation

[FourteenEightEight]

Hi all - brand new to GSAP and loving it so far.

I have run into my first hurdle.

 

I have a simple 'from' animation on a single element:

 

    gsap.from(".element", {
        duration: 1.5,
        ease: "power2.out",
        y: 2000,
    });

 

this element also has a CSS property of:

 

.element{

filter: brightness(50%);

}

 

What is happening:

the CSS 'filter' property is perfectly visible from START to END of animation.

Once animation finishes, the CSS property is lost, and the brightness(50%) is gone....

 

any ideas?

Cheers!

 

 

 

*  I just discovered that if I right-click and open dev-tools OR  just move the browser window around a little,

the brightness(50%) returns to the element.... seems buggy

 

* seems to only happen specifically with the brightness() filter.....tested with blur() filter and issue does not uccur

 

 

 

[Trapti]

Can you create a demo of the issue you are facing. Or fork this I tried as per your instructions I don't see any problem  

See the Pen LYOJjRr by tripti1410 (@tripti1410) on CodePen

 

[mikel]

Hey @FourteenEightEight,

 

Welcome to the GreenSock Forum.

 

Hmm, a demo of the problem - as Trapti said - would be great.
In this case no issue.

 

See the Pen BeQNRe?editors=0110 by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

 

[FourteenEightEight]

thanks for the replys -

codepen below... 

however codepen is not replicating the issue - I have a feeling its browser related ( although it happens on both chrome and edge) 

 

..my fix (annoying) was to put a dark div element with opacity as an overlay

See the Pen NWwLmPQ by davey-slavik (@davey-slavik) on CodePen

Edited February 27, 2022 by FourteenEightEight
more info