How do I start the animation of a block when you scrolled through it in react-spring?

Question

How do I start the animation of a block when you scrolled through it in react-spring?

Answer 1

I like to use Waypoint for this application. It is a component, you can place it anywhere in your page. For example to the top, middle way or bottom. Usually I put it just before or after the component I want to control with it. It can trigger events when it enters the page or when it leaves the page. All you can do to control your react-spring animations from these events. For example:

  <Waypoint
    onEnter={() => setScale(true)}
    onLeave={() => setScale(false)}
  />

Here is a little example: https://codesandbox.io/s/website-logo-animation-with-react-spring-gcqhr