This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Matthew Mang
Posted Jul 14 - Read on Facebook

Hey all,

I'm currently trying to modulate the blur of an image in the current page based on the scroll of a scroll element on top.

For some reason, pager.currentPage.blur works, but pager.currentPage.children.blur doesn't work. Does anyone know how to target the image inside the current page?

Blurring the current page itself produces an undesirable halo edge (see video), so I would like to only blur the image inside the current page instead. Any help would be appreciated. Thanks!

https://framer.cloud/lVSUZ

3 Comments

Bhaskar Ravi

Don't blur the page as you alluded to. It is working, but you're going to get that halo ring because you're blurring the entire group. Instead get the image that's currently showing (in an array of images) and then blur that individually. Should look like this:

images[pager.currentPage.index - 1].blur = Utils.modulate(scroll.scrollY, [0, 100], [0,30])

Matthew Mang

Perfect! Thanks :) Targeting the image array directly totally makes sense

Muhammad Athar

I still can't make sense of the Utils modulate stuff... Waiting for Tess Gadd to publish another cheat sheet on medium. ;/

Read the entire post on Facebook