[CSS filter property resetting after GSAP animation]

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

[CSS filter property resetting after GSAP animation]

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