search

beekai-oss / react-simple-animate

🎯 React UI animation made easy
https://react-simple-animate.now.sh/
MIT License
1.82k stars 61 forks source link

Unable to get useAnimateGroup hook or AnimateGroup to apply the initial start styles. #69

Closed juliankigwana closed 4 years ago

juliankigwana commented 4 years ago

Firstly let me say this is a great little css animation component. Thank you. I have been looking for awhile for something small that is simple to use, and this is exactly what I was looking for. Unfortunately I couldn't get it to work properly.

Describe the bug In the example provided for useAnimateGroup in https://react-simple-animate.now.sh/hooks, it starts with { opacity: 1, transform: "translateY(0)" }. If you check the DOM, these styles have not actually been applied, they are just the default. If you change these values, ie { opacity: 0.5, transform: "translateY(0)" }, these values are not applied still.

This means in order to display an array of elements fading in, I need to first manually apply the style from the sequences array like this like this... which cant be right: style={{ ...sequences[index].start, ...styles[index]}}

Expected behavior The start element styles to be applied before play is set to true.

bluebill1049 commented 4 years ago

can you provide a codesandbox for this use case? i will take a look at it.

juliankigwana commented 4 years ago

can you provide a codesandbox for this use case? i will take a look at it.

Here I have added the additional sequences spread in the styles:

https://codesandbox.io/s/useanimategroup-e8t3p

If you remove that and just use style={styles[index]} it does not work.

bluebill1049 commented 4 years ago

I think as an alternative you can use AnimateGroup with AnimateKeyframes, then you can define the first frame.

bluebill1049 commented 4 years ago

should be resolved by the latest patch. let me know

juliankigwana commented 4 years ago

Thank you for fixing it so quickly.