Patagonia.com's Expanding Div?

[supersonicart]

New to all of this and curious what I would need to do to recreate http://patagonia.com/home 's expanding div (The "Work Hard. Stay Cool." section)? Any help would be greatly appreciated.

[joshuaellis]

There are two parts to this animation, the div "growing" and the text moving up. Both of them should listen to the same event which is a scroll event, probably the window. With the div I would probably use a clip-path to have an initial clip & then retract it on scroll. With the text it'll have a typical y offset that once again changes based on the scroll position.

I unfortunately don't have a codesandbox that will demonstrate these behaviours, but hopefully this will get you in the right direction.

Either of them I would use useSpring!

[supersonicart]

@joshuaellis I don't have codesandbox, but this is what I have

  const bordersize = useSpring({
    from: {
      border: "60px solid white"
    },
    to: {
      border: "0px"
    }
  });

  return (
    <div className="h-screen bg-red-500">
      <a.div
        style={bordersize}
        className="h-screen"
      ></a.div>
    </div>
  );
};

[supersonicart]

@joshuaellis I have been using the examples on the page to try and figure this out (Though I'm using tailwind in my project). I realize this one is using flip, but it works... sort of (My version above gets the border going with Tailwind, it just doesn't animate).

I just have no idea how to incorporate onScroll, etc., with it.

function ScrollBorder() {
  const [flip, set] = useState(false)
  const props = useSpring({
    to: { border: "0px solid white" },
    from: { border: "30px solid black" },
    reverse: flip,
    delay: 200,
    config: config.molasses,
  })

  return <animated.div style={{...props}}>hello</animated.div>
}

[supersonicart]

Have watched about 100 youtube videos at this point about JS scroll listeners and intersection observers, but still not sure how to connect the two... Might need to take a full JS course. Sigh. Feel like it should be easier than this to do!

[joshuaellis]

To listen to window events and respond you might do something like this:

function ScrollBorder() {
  const [flip, set] = useState(false)
  const [props, api] = useSpring(() => ({
    to: { border: "0px solid white" },
    from: { border: "30px solid black" },
    reverse: flip,
    delay: 200,
    config: config.molasses,
  }), [flip])

  useEffect(() => {
    const handleScroll = () => {
      api.start({ /* something */})
    }
    window.addEventListener('scroll', handleScroll)

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

  return <animated.div style={{...props}}>hello</animated.div>
}

This uses the imperative API to respond to events – https://react-spring.io/common/imperatives-and-refs#imperative-api

[supersonicart]

@joshuaellis Thank you so much for the example. I just don't understand enough to make it work from that. I thought it might be simpler when I started trying to recreate the Patagonia page animation. Sigh. Thanks for all your help.