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!
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])
Perfect! Thanks :) Targeting the image array directly totally makes sense
I still can't make sense of the Utils modulate stuff... Waiting for Tess Gadd to publish another cheat sheet on medium. ;/