React-spring: Animate parallax children onscroll

[tommy-evolution7]

I love this library it's awesome. I am blocked currently how to trigger animations on the parallax children on scroll? For example, onscroll to next parallax page, transform scale the children bigger?
I tried using a library called react-on-screen to detect if the component is in the viewport, then animate, but it does not work with parallax.

[drcmda]

It would be easy to add something that tracks scroll. This you could use as a way-point to trigger certain actions. Last time i tried i had a little trouble figuring out the correct math for calculating the offset, not my brightest skill tbh. You wanna try? You can simply copy parallax as is (src/addons/Parallax.js) and dump it inside your project.

Starting from line 62 do this:

  initialize() {
    const { onFrame, ...props } = this.props
    const parent = this.parent
    const targetScroll = Math.floor(props.offset) * parent.space
    const offset = parent.space * props.offset + targetScroll * props.speed
    const to = parseFloat(-(parent.current * props.speed) + offset)
    this.controller = new Controller({
      space: parent.space * props.factor,
      translate: to,
      onFrame: onFrame && (v => onFrame(v)),
    })
  }

Now that lets you do:

<ParallaxLayer onFrame={v => console.log(v)} ... >

v is the current translate, you have access to everything else, too in the initialize function (current scroll= parent.current, width/height of a page = parent.space, page factor = props.factor, speed, offset and so on. What you need is that it returns 0 the moment the element appears and otherwise gives you the offset which is either positive or negative.

When you find it, i'd be happy to merge a PR.