Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[bug]: Translating values starting from 0 requires unit symbol #2303

Open
2 of 5 tasks
SamStAubynTS opened this issue Jul 11, 2024 · 0 comments
Open
2 of 5 tasks

[bug]: Translating values starting from 0 requires unit symbol #2303

SamStAubynTS opened this issue Jul 11, 2024 · 0 comments
Labels
template: bug This issue might be a bug

Comments

@SamStAubynTS
Copy link

Which react-spring target are you using?

  • @react-spring/web
  • @react-spring/three
  • @react-spring/native
  • @react-spring/konva
  • @react-spring/zdog

What version of react-spring are you using?

9.7.3

What's Wrong?

I have a really simple toggled animation of a menu that initially is set to transform: translateY(-100%), when the state is change it slides into view at transform: translateY(0), when the state is then changed again the animation is skipped and the menu just disappears. I found this was due to not having a % unit symbol on the end, others have also found this same issue

To Reproduce

import React from "react";
import { useSpring, animated } from '@react-spring/web';

export default function Menu({ isMenuActive, data }) {
    const springs = useSpring({
        transform: isMenuActive ? `translateY(0%)` : `translateY(-100%)`,
    });

    return (
        <>
            <animated.div style={springs} className="menu-container">
               <p>Menu Items</p>
               <p>Menu Items</p>
               <p>Menu Items</p>
            </animated.div>
        </>
    );
}

Use this basic react hook to animate in the menu component.

Expected Behaviour

When the animation value start at 0 it should infer either the pixel or percentage value so it translates smoothly as it does in normal CSS.

Link to repo

https://codesandbox.io/s/kind-black-sgr767?file=/src/App.js

@SamStAubynTS SamStAubynTS added the template: bug This issue might be a bug label Jul 11, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
template: bug This issue might be a bug
Projects
None yet
Development

No branches or pull requests

1 participant