Can't use dynamic blur

[luismramirezr]

I can't make the dynamic works as expected.

When:

• {min: 0, max: 100} or {min:100, max:100}, the image is always blurred;
• {min: -100, max:100}, {min: 0, max:-100}, {min: -100, max:0}, the images doesn't blur;
• {min: 100, max:-100}: the images is blurred but as I scroll the blur is dynamically removed

React:

<Parallax strength={600} bgImage={banner}>
        <section className="banner" id="home">
          <div className="background filter" />
          <div className="container">
            <h3>TEXT</h3>
            <h1>TEXT</h1>
            <h2>TEXT</h2>
          </div>
        </section>
      </Parallax>

SASS:

section {
  min-height: 100vh;
  padding: 100px 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .background {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-size: cover;
    background-repeat: none;
    &.filter {
      &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background-color: #000;
        opacity: 0.25;
      }
    }
  }
  .container {
    width: 100%;
    max-width: 1440px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}

[rrutsche]

Hm, just setting it like blur={{ min: -1, max: 3 }} should work. I think your values are far too large.
And did you already have a look the the example on codesandbox? Maybe you can fork this project and try to reproduce your issue? When you forked it, just send me the codesandbox link so I can have a look.

[luismramirezr]

I did tried smaller values. Those large values were only for testing, as I couldn't notice the blur in the image. I will try what you said and let you know.

Thank you

[rrutsche]

I close this one. Feel free to reopen if you have any further problems.