Background blur on page scroll causes white edges

Design help Animations & Interactions
1

Hello,

When using “While page is scrolling” trigger to blur image it causes white edges which I know is coming from the background.

I’ve tried to set image width 110vw and section to overflow: hidden but it seems that this doesn’t work when using trigger to blur.

Anything else I could try?

Here is my public share link

2

Hi @Kasimir_Kuusela!

You could add a Color field to your Collection and use that field to select a color that works well behind each image. For example, choose a darker black/green for the fox image.

After you’ve added that field and selected a color, you can add a div inside of the hero section that’s absolutely positioned in the top left with a width and height of 100%. Then, use the Get BG Color from... option to pull the color you selected from the Collection.

image

Another option would be to put a duplicate of the photo behind the one that will blur. If your images are optimized, you should only take a slight hint on performance going that route.

I hope that helps. Let me know if I can help any further!

1 Like
3

Hi @blakelam,

Thanks for your reply! That’s very creative solution and will work but I’m sure there has to be better way than setting different background color to each post.

Strange is that if I use filter without interactions I can fix this by setting image size larger than viewport and then setting overflow: hidden but if I set blur to appear based on interaction this solution doesn’t work. #community:bugs ??

Thanks,
Kasimir