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 [email protected]

Thanks for the lead but do you think that it is because of that ? — Daniel Klimek
– Daniel Klimek, Commented Mar 25, 2021 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
– Daniel Klimek, Commented Mar 25, 2021 at 13:02

Ryan Wolton · Accepted Answer · 2021-03-25 13:08:58Z

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, 2021 at 13:08

Ryan Wolton

716 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Ryan Wolton Over a year ago

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?

Daniel Klimek Over a year ago

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 ?

Ryan Wolton Over a year ago

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 react-spring.io/log it's explained that version 9 may have breaking changes, could see if it works with version 8?

Daniel Klimek Over a year ago

Yes, I'm using version 9. I will try version 8 and I will let you know.

Daniel Klimek Over a year ago

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.

|

Ajeet Shah · Accepted Answer · 2021-03-25 15:12:15Z

0

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>
  )
}

answered Mar 25, 2021 at 15:12

Ajeet Shah

19.9k10 gold badges66 silver badges107 bronze badges

3 Comments

Daniel Klimek Over a year ago

Thanks, but I will probably stick with the V8 as I'm more comfortable using component classes than component functions.

Ajeet Shah Over a year ago

Ok. Also, It is better to wait until V9 is officially release and stable. Until then, we should use V8.

Kpo Over a year ago

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

Collectives™ on Stack Overflow

Spring animation is not working in ReactJS

2 Answers 2

6 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related