0

I have a React application. I am using React Spring for overall animations. I am not able to animate 2 things - The animation I am experimenting with is a simple opacity animation.

              import { useSpring, animated } from "react-spring";

              /***
              Some code
              ***/

              const styleProps = useSpring({
                 to: { opacity: 1 },
                 from: { opacity: 0 }
              });

1) Is conditional elements. Please refer code below -

              <section>
                {!flag ? (
                <animated.div style={styleProps}>
                  Some random text
                </animated.div>
              ) : (
                <animated.div style={styleProps}>
                  To appear with animation
                </animated.div>
              )
             }
             </section>

The issue is that the animated.div of react-spring does not animate the same. What is the right way? Is there a way to animate the same without react-spring?

2) I have a conditional bootstrap className attached based on a flag. I want to animate the same

            <animated.div style={styleProps} className={classnames({
                 "col-lg-6": !flag,
                 "col-lg-12": flag
            })}
            >
                Random Content
            </animated.div>

For this also, the issue is that it is not animating. What is the right way?

Bijoy valappil
  • 139
  • 2
  • 12

1 Answers1

5

Yo have a lot of question. I can answer part of it and maybe you will understand it better.

Your example of useSpring animation is triggered only once. And when you switch between components with the conditional render it will no longer animate.

But you can re-trigger the animation in useSpring, if you change the 'to' parameter conditionally (and leave the render to react-spring).

const styleProps1 = useSpring({
   to: { opacity: flag ? 1 : 0 },
   from: { opacity: 0 }
});

const styleProps2 = useSpring({
   to: { opacity: flag ? 0 : 1 },
   from: { opacity: 0 }
});

<section>
  <>
    <animated.div style={styleProps1}>
      Some random text
    </animated.div>

    <animated.div style={styleProps2}>
      To appear with animation
    </animated.div>
  </>
</section>

You have to use absolute positioning if you want the element to appear in the same place.

You can achieve similar effect with useTranstion also with absolute positioning. In this case the element dismounted at the end of animation. So if you have mouse click problems with the useSpring method you can try to switch to useTransition.

Maybe it also answer your second questiona as well. I am not familiar with bootstrap.

Peter Ambruzs
  • 7,763
  • 3
  • 30
  • 36
  • Thanks @Peter Ambruzs. The absolute position and useTransition worked. The conditional className is still a question mark. Based on a condition, I want similar transition on classnames – Bijoy valappil Nov 17 '19 at 18:49
  • I'm not sure what you want with the second question. I guess that you want to re-trigger the animation when the classname changes. Am I right? – Peter Ambruzs Nov 17 '19 at 19:49
  • Yes @Peter Ambruzs, Basically what col-lg-6 does is set width as 50% and col-lg-12 does is set width 100%. So, I want the width animation from 50 to 100% – Bijoy valappil Nov 19 '19 at 06:17
  • You could not animate based on classes with react-spring. You either move the width change to useSpring or add a CSS animation like here: https://www.w3schools.com/css/tryit.asp?filename=trycss3_transition1 – Peter Ambruzs Nov 19 '19 at 11:52