Spring animation is not working in ReactJS

Question

The below Spring animation is not working in ReactJS.

I have a Component class written like this:

import React from "react";
import { Component } from 'react'
import { Spring } from 'react-spring'

export default class Menu extends Component {
    constructor(props) {
        super(props);

        this.state = { isMouseOver: false };
        this.handleMouseEnter = this.handleMouseEnter.bind(this);
        this.handleMouseLeave = this.handleMouseLeave.bind(this);
    }

    handleMouseEnter(e) {
        this.setState({ isMouseOver: true });
    }

    handleMouseLeave() {
        this.setState({ isMouseOver: false });
    }

    LogoText(props) {
        const isMouseOver = props.isMouseOver;
        const handleMouseEnter = props.handleMouseEnter;
        const handleMouseLeave = props.handleMouseLeave;

        if (isMouseOver) {
            return (
                <Spring
                    from={{ opacity: 0 }}
                    to={{ opacity: 1 }}
                >
                    {
                        (props) => (
                            <div style={props}>
                                hover<!--this renders fine-->
                                <div className='upperDivLogoText' onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
                                    <span><a href='#' style={{ color: '#d8f3dc' }} >dWare.sk</a></span>
                                    <a href='#' style={{ color: '#95d5b2' }}>dWare.sk</a>
                                </div>
                            </div>
                        )
                    }
                </Spring>
            )
        } else {
            return (
                <div className='upperDivLogoText' onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
                    <span><a href='#' style={{ color: '#d8f3dc' }} >dWare.sk</a></span>
                    <a href='#' style={{ color: '#95d5b2' }}>dWare.sk</a>
                </div>
            )
        }
    }

    render() {
        return (
            <div className='upperDiv'>
                <this.LogoText
                    isMouseOver={this.state.isMouseOver}
                    handleMouseEnter={this.handleMouseEnter}
                    handleMouseLeave={this.handleMouseLeave}
                />
                <div className='lowerDiv'>
                    <ul className='lowerDivMenu'>
                        <li><a href='#'>O MNE</a></li>
                        <li><a href='#'>MOJE PORTFÓLIO</a></li>
                        <li><a href='#'>KONTAKT</a></li>
                    </ul>
                </div>
            </div>
        )
    }
}

But if I hover over upperDivLogoText it just doesn't do anything. Any suggestions on how to fix this?

SOLUTION: It is because of Spring version 9. For anyone having such a problem just uninstall latest spring and do npm i react-spring@8.0.20

Thanks for the lead but do you think that it is because of that ? — Daniel Klimek, Mar 25 '21 at 12:50
I did. I created a new Component LogoText and unfortunately it just behaves the same. Also I did `{console.log(props.opacity)}` inside the arrow function and here is the output:`SpringValue {id: 1, key: "opacity", _priority: 0, _children: Set(0), animation: Animation, …}` — Daniel Klimek, Mar 25 '21 at 13:02

score 1 · Answer 1 · answered Mar 25 '21 at 13:08

1

It could be that onMouseLeave is being triggered on the first div just after onMouseEnter because it is unmounted, hence causing it to appear as if nothing is happening?

Wouldn't you just want onMouseEnter on the first one and onMouseLeave only on the second rather than both on each?

answered Mar 25 '21 at 13:08

Ryan Wolton

71
6

Failing that, what version of react-spring are you using? Looks like you need to import Spring from 'react-spring/renderprops', there's mention in the docks of V9 which unifies the api under one module but it isn't released yet? – Ryan Wolton Mar 25 '21 at 13:17
You're right, it is unnecessary to be there but the hover text is appearing/dissappearing accordingly to the mouse enter/left therefor the event works right, but I removed it as it is useless. But the problem still persists. Also when I try to import spring/renderprops it gets me an error that no file like that exists. is there an npm install command for that ? – Daniel Klimek Mar 25 '21 at 13:17
Could be because you're using version 9 which doesnt have the /renderprops anymore, check your package.json for the version? If you look here https://www.react-spring.io/log it's explained that version 9 may have breaking changes, could see if it works with version 8? – Ryan Wolton Mar 25 '21 at 14:03
Yes, I'm using version 9. I will try version 8 and I will let you know. – Daniel Klimek Mar 25 '21 at 14:12
1

Yes it was because of that version. With version 8 it works just perfect. Can't belive that I lost almost 3 hours figuring out why it's not working and it was because of the broken version 9. Thank you very much. Really appreciate your help. – Daniel Klimek Mar 25 '21 at 14:18
No problem :) we've all been there, don't sweat it, keep going! – Ryan Wolton Mar 25 '21 at 14:20

score 0 · Accepted Answer · answered Mar 25 '21 at 15:12

As on March-2021, and as mentioned in comments under this answer, react-spring V9 isn't yet released and may have breaking changed. Hence, It would be safe to use V8.

But, in V9, the animation is working using useSpring hook and animated.div:

Example:

import { useSpring, animated } from 'react-spring' // Using hooks in V9

function LogoText({ isMouseOver, handleMouseEnter, handleMouseLeave }) {

  const style = useSpring({
    opacity: isMouseOver ? 1 : 0,
    from: { opacity: 0 },
  })

  if (!isMouseOver) {
    return (
      <div
        className="upperDivLogoText" onMouseEnter={handleMouseEnter}
      >
        <span>
          <a href="#" style={{ color: '#d8f3dc' }}>
            dWare.sk
          </a>
        </span>
        <a href="#" style={{ color: '#95d5b2' }}>
          dWare.sk
        </a>
      </div>
    )
  }

  return (
    <animated.div style={style}>
      <div
        className="upperDivLogoText" onMouseLeave={handleMouseLeave}
      >
        <span>
          <a href="#" style={{ color: '#d8f3dc' }}>
            dWare.sk
          </a>
        </span>
        <a href="#" style={{ color: '#95d5b2' }}>
          dWare.sk
        </a>
      </div>
    </animated.div>
  )
}

Thanks, but I will probably stick with the V8 as I'm more comfortable using component classes than component functions. — Daniel Klimek, Mar 25 '21 at 17:53
Ok. Also, It is better to wait until V9 is officially release and stable. Until then, we should use V8. — Ajeet Shah, Mar 25 '21 at 17:55
Wait so you're telling me that I can't use react-spring with custom component anymore? renderprops is all that I could use because I can't use animated on my components since it's limited to div — Kpo, Nov 09 '21 at 14:51

Spring animation is not working in ReactJS

2 Answers2