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 oute is to let the ponents 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 ..*/
{ponent: <div><p>A<p></div> , key:1},
{ponent: <div><p>B<p></div> , key:2},
{ponent: <div><p>C<p></div> , key:3},

]

export default function fooponent(){
  const [items, setItems] = React.useState(cols);
  const [appear, setAppear] = React.useState(false); // Should trigger when the ponent 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} >
                  {itemponent}
                </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?

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 oute is to let the ponents 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 ..*/
{ponent: <div><p>A<p></div> , key:1},
{ponent: <div><p>B<p></div> , key:2},
{ponent: <div><p>C<p></div> , key:3},

]

export default function fooponent(){
  const [items, setItems] = React.useState(cols);
  const [appear, setAppear] = React.useState(false); // Should trigger when the ponent 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.ponent}
                </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?

• javascript
• reactjs
• animation
• react-spring

3 Answers 3

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

If you place this hidden ponent 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.

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 ponent you want to fade in on view in this FadeIn ponent as such:

<FadeIn>
     <Clients />
</FadeIn>

Or write your own html:

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

You can use react-spring useInView

https://www.react-spring.dev/docs/utilities/use-in-view