useAnimate question, not a bug

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?

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

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]);