Parallax - change scale/direction/rotation

[Oriole-Alex]

Hi,

I'm trying to work out how to change an objects attributes as the user scrolls. E.g have text slide off at a diagonal or have an image shrink as it slides out of view. Apologies if I'm missing something obviously but I can't see any info on this in the docs - they only seem to cover vertical or horizontal scrolling and sticking.

Also on the point of horizontally leaving the page, how can i make something leave exactly horizontally and not end up having it be a diagonal movement thanks to the page also going up at the same time?

thanks
Alex

[mohitxskull]

Can someone answer this question??

thanks
mohit

[eeshankeni]

This functionality would be really useful

[kindoflew]

hi! this seems somewhat related to #1878, but since others jumped in here, I can repeat some of it, but with more stuff.

we don't have an API for a feature like this out of the box (yet), so the only way to do it currently would require some set up on your side.

So basically you have to:

• grab the ref of the outer scroll container
• set up a scroll listener in a useEffect
• figure out the values you need. probably helpful: scrollTop, total percent scrolled, the current page, "scrollTop" of the current page, percentage of current page scrolled
• use those values (and the knowledge of which ParallaxLayers are in which page -- Math.floor(offset)) to do stuff to your elements

An example set-up, to make a div in the first page rotate when you scroll:

const ExampleApp = () => {
  const parallax = useRef(null)
  const [rotate, setRotate] = useState(0)
  const PAGES = 3

  useEffect(() => {
    const handleScroll = (e) => {
      const height = parallax.current.space
      const scrollablePages = PAGES - 1 // because you can't scroll past the last page 
      const scrollHeight = height * scrollablePages

      const scrollTop = e.target.scrollTop
      const percentScrolled = scrollTop / scrollHeight
      const currentPage = Math.floor(percentScrolled * scrollablePages)
      const currentPageScrollTop = scrollTop - (height * (currentPage))
      const currentPagePercent = currentPageScrollTop / height

      // because the ParallaxLayer below has an `offset` of `0`
      if (currentPage === 0) {
        setRotate(currentPagePercent)
      }
    }

    const container = parallax.current.container.current
    container.addEventListener('scroll', handleScroll)

    return () => {
      container.removeEventListener('scroll', handleScroll)
    }
  }, [])

  return (
    <Parallax ref={parallax} pages={PAGES}>
      <ParallaxLayer>
        <div
          style={{ transform: `rotate(${rotate * 360}deg)` }}
        />
      </ParallaxLayer>
    </Parallax>
  )
}

This is, admittedly, ugly. It relies on inner state that isn't completely documented and requires boilerplate. I have an idea for a feature to make this easier, but I've been sort of busy and haven't had time to organize my thoughts for an RFC.

As for the second question -- you would do something similar to the above, except you'd probably want a ParallaxLayer with sticky set (so it doesn't move vertically) and then you'd transform: translate it instead of rotate.