Search the Community
Showing results for tags 'filter blur'.
Found 3 results
-
I'm creating a background effect from blur to clear when scrolling. starts with filter: blur(30px) when image enter viewport. and then more clear with filter: blur(0) after top of image reach top viewport using gsap fromTo and add utils for css filter. but i have no idea for now. can help please?
-
The blur animation on the peach coloured text is super glitchy when you visit the website for the first time only (Chrome browser). https://witnessestohistory.museeholocauste.ca/ You can recreate the issue by visiting in "Incognito mode", or clearing your cache. If you refresh your browser or visit another page, the same animation runs super smoothly. My current animation setting is : this.tl.staggerFromTo(this[splitKey], this.duration, { css: { opacity:0, scale:1.3, filter:"blur(10px)", z:0 } }, { css: { opacity:1, scale:1, filter:"blur(0px)", z:0 }, ease:this.easing}, this.stagger[splitKey]); I have tried all of the following : - this.tl.progress(1).progress(0); (before playing my timeline) - z:0.01 - backface-visibility: hidden - will-change: transform, filter - -webkit-font-smoothing: subpixel-antialiased - gsap.set(this[splitKey], { force3D:true }) - Adding a huge delay before the animation starts to prevent overlapping of effects / images loading - Adding page cache - Adding a "loader" with a blur animation out to prepare the GPU for the effect, since it seems to run smoothly the second time (didn't work) -
Hi. I trying to animate filter blur effect, but get a problem. At the end of animation i have a strange artifact by -1px offset to the left top corner and then move back. Please help to resolve a problem.
