Animation triggers twice

[IsabellUrban]

Hi there,

I have build a swipe functionality (only for mobile) in our flashcard app. Further I have implemented two icons which appear when swiped (one for correct answer, one for wrong answer).
The icons and their animation lie in BubbleAnimation.js and the logic when the animation is triggered lies in the training/[id].js.

Actually everything works as intended. Only when the icons appear after the swipe it looks like they flicker a bit – meaning the animation seems to start two times.

I cannot figure out where the problem lies and why this happens. Maybe anyone has an idea and can provide a solution.

This is the deployment link.

And this is the repository link.

Thanks in advance! 🤧

[eneben]

Hello everyone 👋

unfortunately I don't have the solution, but I do have an approach - maybe this will help someone else to find the solution.

I think it has something to do with the render cycle. I wrote console.log("BubbleAnimation component rendered"); at the top of the BubbleAnimation. I noticed in the console that the component is rendered veeeery often. The BubbleAnimation component is returned in the Flashcard.js if the state isAnimating is true. So I had isAnimating logged out (in the [id].js). When isAnimating changes to true, the BubbleAnimation is rendered very often. However, isAnimating has already been logged out three times. 🤯 So the [id].js itself must also have been rendered several times (in this case three times). I also checked this with a corresponding console.log.

So as I said: Unfortunately, I don't have the solution yet, but I think it has something to do with the frequent rendering (both of the [id].js and within it of the BubbleAnimation-component.
Perhaps an animation isn't yet in a useEffect? ​​JavaScript-controlled animations are side effects and therefore need to be in a useEffect. 👆😅
I think the frequent rendering repetitions mean that the component is being rendered at every single step of the animation. 🤔 Perhaps someone can think further in this direction and find a solution?

By the way, I'm part of this capstone group, but I didn't work on this feature, so I'm not particularly familiar with this branch.

PS: Anyway, it’s great what you have already achieved, Isabell! 💪😁 I find your code really complicated and impressive. 😅

[onemanwenttomow]

I think Elisabeth is right, in that it seems to be due to the number of times the component is rendering.

I would consider 2 things to potentially fix this.

1. Sync your timeouts. At the moment you have some timeouts at 1100, and one in App.js at 200. These will then cause the components to rerender around 900ms apart (which might be causing the flash). Do we need the 200ms timer now that the swipe animation is working?

2. Maybe consider moving the isAnimating state and logic to the Flashcard component. That means you will have the state local, rather than ALL the cards in your list getting the isAnimating.

Hopefully these help! Great work so far.

[IsabellUrban]

Thank you Pete and Elisabeth, that solved the problem. I removed the handleFlashcardLevelTimeout in the _app.js. I also moved the animation logic back into the flashcard. Now everything is working as it should. 🎉