question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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.

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
bluebill1049commented, Jan 16, 2020

should be resolved by the latest patch. let me know

0reactions
juliankigwanacommented, Jan 21, 2020

Thank you for fixing it so quickly.

Read more comments on GitHub >

github_iconTop Results From Across the Web

beekai-oss/react-simple-animate - GitHub
React UI animation made easy. Contribute to beekai-oss/react-simple-animate development by creating an account on GitHub.
Read more >
Hooks - useAnimate and useAnimateKeyframes with react ...
This hook share the same functionality and props as <AnimateGroup /> . CodeSandbox. UseAnimateGroup. bluebill1049.
Read more >
GitHub - beekai-oss/react-simple-animate: React UI animation made ...
Features · Animation from style A to B · CSS keyframes animation · Chain up animation sequences · Tiny size without other dependency ......
Read more >
CMake: config file is not installed along targets file - Pytorch ...
CMake: config file is not installed along targets file. ... Unable to get useAnimateGroup hook or AnimateGroup to apply the initial start styles....
Read more >
React UI animation made easy - BestofReactjs
There are 2 fixes in this PR: ... Unable to get useAnimateGroup hook or AnimateGroup to apply the initial start styles.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found