useAnimate question, not a bug

[hthief]

Hi,

Simple question regarding the useAnimate hook. I was making a slider that is controlled by a prop and before I simply used that prop to revert the animation I was trying something like this:

const { play, style } = useAnimate({
        start: { transform: `translateY(${showContent ? '100%' : '0%'})`},
        end: { transform:`translateY(${showContent ? '0': '100%'})` },
    });
useEffect(() => {
        play(true);
    }, [show]);

My question is more of a curiosity, but why doesn't the first implementation work like expected? Is it a misunderstanding of how the useEffect hook works?

[bluebill1049]

What do u mean first implementation works?

[hthief]

@bluebill1049 no, it doesn't but I thought it would, since the prop is changed I figured the animate hook would give a different style object, but it returns the same in any case

[bluebill1049]

What’s this showContent doing there?

[hthief]

It's a bool control prop that I use to reverse the animation. Before I realised I could just do it with this instead:

const { play, style } = useAnimate({
        start: { transform: 'translateY(100%)' },
        end: { transform: 'translateY(0%)' },
    });

    useEffect(() => {
        play(showContent);
    }, [showContent]);

I was trying the approach on the OP, and was left wondering what could be wrong about it

[bluebill1049]

I think this is the right solution which you posted:

const { play, style } = useAnimate({
        start: { transform: 'translateY(100%)' },
        end: { transform: 'translateY(0%)' },
    });

    useEffect(() => {
        play(showContent);
    }, [showContent]);

i haven't test it, but look at this example, your animation probably would stay the same, because RSA wouldn't be able to change the style because play is not been called

const { play, style } = useAnimate({
        start: { transform: `translateY(${showContent ? '100%' : '0%'})`},
        end: { transform:`translateY(${showContent ? '0': '100%'})` },
    });
useEffect(() => {
        play(true);
    }, [show]);

[hthief]

oh! i see now what you meant about the previous question about showContent, show was the original prop name but I changed it when copying it to the comments here, and made an entirely different issue. The show content would never change and play would never get called, my bad.

😓I really should have linked an example repo from the start instead: https://codesandbox.io/embed/blazing-currying-qf9zz

in the example the first box is using the non-working impl, while the second uses the hooks.

sorry about the confusion 😬

[bluebill1049]

not at all 👍 sorry miss your message completely... I guess we can close this issue now? feel free to re-open if you have more questions.