Start animation in react-spring when component is in view

Question

I am using react-spring for animation and all the animations start once the page is loaded. I want to control the start of the animation. The desired outcome is to let the components down in the screen start the animation once they are in view (i.e the user scrolled down). The code follows something like this :

const cols = [
/*Components here that will be animated ..*/
{component: <div><p>A<p></div> , key:1},
{component: <div><p>B<p></div> , key:2},
{component: <div><p>C<p></div> , key:3},

]

export default function foocomponent(){
  const [items, setItems] = React.useState(cols);
  const [appear, setAppear] = React.useState(false); // Should trigger when the component is in view

  const transitions = useTransition(items, (item) => item.key, {
    from: { opacity: 0, transform: 'translateY(70px) scale(0.5)', borderRadius: '0px' },
    enter: { opacity: 1, transform: 'translateY(0px) scale(1)', borderRadius: '20px', border: '1px solid #00b8d8' },
    // leave: { opacity: 1, },
    delay: 200,
    config: config.molasses,
  })


  React.useEffect(() => {
    if (items.length === 0) {
      setTimeout(() => {
        setItems(cols)
      }, 2000)
    }
  }, [cols]);

  return (
        <Container>
          <Row>
            {appear && transitions.map(({ item, props, key }) => (
              <Col className="feature-item">
                <animated.div key={key} style={props} >
                  {item.component}
                </animated.div>
              </Col>
            ))}
          </Row>
        </Container>
  );
}

I tried using appear && transitions.map(...) but unfortunately that doesn't work. Any idea how should I control the start of the animation based on a condition?

score 3 · Answer 1 · answered Sep 04 '21 at 05:16

I use https://github.com/civiccc/react-waypoint for this type of problems.

If you place this hidden component just before your animation. You can switch the appear state with it. Something like this:

<Waypoint
  onEnter={() => setAppear(true) }
/>

You can even specify an offset with it. To finetune the experience.

score 3 · Answer 2 · answered Dec 10 '21 at 06:15

If you wish to have various sections fade in, scroll in, whatever on enter, it's actually very simple to create a custom wrapper. Since this question is regarding React Spring, here's an example but you could also refactor this a little to use pure CSS.

// React
import { useState } from "react";

// Libs
import { Waypoint } from "react-waypoint";
import { useSpring, animated } from "react-spring";

const FadeIn = ({ children }) => {
  const [inView, setInview] = useState(false);

  const transition = useSpring({
    delay: 500,
    to: {
      y: !inView ? 24 : 0,
      opacity: !inView ? 0 : 1,
    },
  });
  return (
    <Waypoint onEnter={() => setInview(true)}>
      <animated.div style={transition}>
        {children}
      </animated.div>
    </Waypoint>
  );
};

export default FadeIn;

You can then wrap any component you want to fade in on view in this FadeIn component as such:

<FadeIn>
     <Clients />
</FadeIn>

Or write your own html:

<FadeIn>
   <div>
     <h1>I will fade in on enter</h1>
   </div>
</FadeIn>

Start animation in react-spring when component is in view

2 Answers2