Trigger animation in one component based on action in another [was: Properly triggering a toggled animation using a passed property]

[odewahn]

Hi, everyone. thanks for this great library -- it's a pleasure to use. I was hoping someone could explain an issue I'm having getting an animation to properly trigger.

I've got a two column layout: on the left-hand side there's a list of items, and on the right hand side a corresponding box. The effect I'm trying to go for is that when a user enters or leaves an item in the nav, the corresponding box will smoothly scale by 10%, like this:

The state is represented like this:

  const [boxes, setBoxes] = useState([
    { id: 'box1', label: '1/8', expanded: false },
    { id: 'box2', label: '2/8', expanded: false },
    { id: 'box3', label: '3/8', expanded: false },
    { id: 'box4', label: '4/8', expanded: false },
    { id: 'box5', label: '5/8', expanded: false },
    { id: 'box6', label: '6/8', expanded: false },
    { id: 'box7', label: '7/8', expanded: false },
    { id: 'box8', label: '8/8', expanded: false },
  ]);

The nav list uses onMouseEnter and onMouseLeaves to toggle the expansion on the box:

         {boxes.map((s, idx) => {
            return (
              <li
                key={'nav-link' + idx}
                className={s.expanded ? css.selected : null}
                onMouseEnter={() => {
                  let newBoxes = [...boxes];
                  newBoxes[idx].expanded = true;
                  setBoxes(newBoxes);
                }}
                onMouseLeave={() => {
                  let newBoxes = [...boxes];
                  newBoxes[idx].expanded = false;
                  setBoxes(newBoxes);
                }}
              >
                {s.label}
              </li>
            );
          })}

Then the boxes are rendered like this:

   {boxes.map((s, idx) => (
          <Box key={'box-' + s.id} data={s} />
        ))}

Finally (whew -- this is long, but thank you for bearing with me), the animated div is represented like this:

const Box = (props) => {
    const spring = useSpring({
      transform: props.data.expanded ? `scale(1.1)` : `scale(1)`,
      boxShadow: `0px 3px 8px 0px rgba(0, 0, 0, 0.30)`,
      config: {
        tension: 400, // How much tension is on the spring
        mass: 2, // The mass of the spring
        velocity: 5, // The initial speed of the movement
        duration: 3000,
      },
    });
    return (
      <animated.div style={spring} className={css.box1} {...props}>
        <span className={props.data.expanded ? css.selected : null}>{props.data.label}</span>
      </animated.div>
    );
  };

The issue I'm having is that while code works and the boxes change sizes, there is no actual animated transition. When I was trying this using the toggle with local state, there was that fun, satisfying bounce from the spring animation, but in this iteration, when I'm using a prop, there's just plain old change of state with no animations in between.

I was hoping someone could point out what I'm missing? Any help or suggestions appreciated!

Andrew

ps -- here's the full code for reference:

const Main = (props) => {
  const [boxes, setBoxes] = useState([
    { id: 'box1', label: '1/8', expanded: false },
    { id: 'box2', label: '2/8', expanded: false },
    { id: 'box3', label: '3/8', expanded: false },
    { id: 'box4', label: '4/8', expanded: false },
    { id: 'box5', label: '5/8', expanded: false },
    { id: 'box6', label: '6/8', expanded: false },
    { id: 'box7', label: '7/8', expanded: false },
    { id: 'box8', label: '8/8', expanded: false },
  ]);

  const Box = (props) => {
    const spring = useSpring({
      transform: props.data.expanded ? `scale(1.1)` : `scale(1)`,
      boxShadow: `0px 3px 8px 0px rgba(0, 0, 0, 0.30)`,
      config: {
        tension: 400, // How much tension is on the spring
        mass: 2, // The mass of the spring
        velocity: 5, // The initial speed of the movement
        duration: 3000,
      },
    });
    return (
      <animated.div style={spring} className={css.box1} {...props}>
        <span className={props.data.expanded ? css.selected : null}>{props.data.label}</span>
      </animated.div>
    );
  };

  return (
    <div className={css.bounding}>
      <div className={css.nav}>
        <ul>
          {boxes.map((s, idx) => {
            return (
              <li
                key={'nav-link' + idx}
                className={s.expanded ? css.selected : null}
                onMouseEnter={() => {
                  let newBoxes = [...boxes];
                  newBoxes[idx].expanded = true;
                  setBoxes(newBoxes);
                }}
                onMouseLeave={() => {
                  let newBoxes = [...boxes];
                  newBoxes[idx].expanded = false;
                  setBoxes(newBoxes);
                }}
              >
                {s.label}
              </li>
            );
          })}
        </ul>
      </div>
      <div className={css.content}>
        {boxes.map((s, idx) => (
          <Box key={'box-' + s.id} data={s} />
        ))}
      </div>
    </div>
  );
};

export default Main;

[odewahn]

After a bit more tweaking, I was able to make this work and thought I'd post the solution for future reference. Basically, the solution is to make the item you want to animate a custom component, as described in https://www.react-spring.io/docs/hooks/basics.

import React, { useState, useEffect } from 'react';
import { useSpring, animated } from 'react-spring';

import css from './spring.css';

const Box = (props) => {
  const spring = useSpring({
    transform: props.data.expanded ? `scale(1.1)` : `scale(1)`,
    opacity: props.data.expanded ? 1 : 0.5,
    boxShadow: `0px 3px 8px 0px rgba(0, 0, 0, 0.30)`,
    config: {
      tension: 600, // How much tension is on the spring
      mass: 2, // The mass of the spring
      velocity: 5, // The initial speed of the movement
    },
  });
  return (
    <animated.div style={spring} className={css.box1} {...props}>
      <span className={props.data.expanded ? css.selected : null}>{props.data.label}</span>
    </animated.div>
  );
};

const AnimatedBox = animated(Box); // Define the custom component

const Main = (props) => {
  const [boxes, setBoxes] = useState([
    { id: 'box1', label: '1/8', expanded: false },
    { id: 'box2', label: '2/8', expanded: false },
    { id: 'box3', label: '3/8', expanded: false },
    { id: 'box4', label: '4/8', expanded: false },
    { id: 'box5', label: '5/8', expanded: false },
    { id: 'box6', label: '6/8', expanded: false },
    { id: 'box7', label: '7/8', expanded: false },
    { id: 'box8', label: '8/8', expanded: false },
  ]);

  return (
    <div className={css.bounding}>
      <div className={css.nav}>
        <ul>
          {boxes.map((s, idx) => {
            return (
              <li
                key={'nav-link' + idx}
                className={s.expanded ? css.selected : null}
                onMouseEnter={() => {
                  let newBoxes = [...boxes];
                  newBoxes[idx].expanded = true;
                  setBoxes(newBoxes);
                }}
                onMouseLeave={() => {
                  let newBoxes = [...boxes];
                  newBoxes[idx].expanded = false;
                  setBoxes(newBoxes);
                }}
              >
                {s.label}
              </li>
            );
          })}
        </ul>
      </div>
      <div className={css.content}>
        {boxes.map((s, idx) => (
          <AnimatedBox key={'box-' + s.id} data={s} />
        ))}
      </div>
    </div>
  );
};

export default Main;