Add fade in and out to "Copied to clipboard" notification

[maccyber]

When user clicks on the link icon in the share section of the results page at https://bigfive-test.com/result/58a70606a835c400c8b38e84

I want the notification text to smoothly fade in and out

Link to code: https://github.com/Alheimsins/bigfive-web/blob/master/components/SocialShare.js#L24

[vpicone]

I'll work on this :)

[vpicone]

@maccyber would you be opposed to bringing in a dependency on react-spring? It's a really popular animation library that would allow for more consistent animations throughout the project.

https://github.com/drcmda/react-spring

[maccyber]

Awesome @vpicone Sure, react-spring looks cool :-)

Use your artistic freedom, it may be a cooler animation than fading.

If you don't want to setup a mongodb-server create this file in the root-directory

.env

DB_CONNECTION=hacktoberfest:hacktoberfest1@ds153659.mlab.com:53659/bigfive
DB_COLLECTION=test
URL=http://localhost:3000

And run npm run dev

This db has the samle result in it (https://bigfive-test.com/result/58a70606a835c400c8b38e84)

[divslingerx]

Personally, I feel that adding a library for a simple animation may be overkill. This could be done with a flag and some simple css. If there is a plan to add more and more complicated animations in the future i would suggest adding a library at that point. How do you guy both feel about this?

[vpicone]

I totally agree, if this is just a one-off animation then a library is likely overkill. But if say you wanted another alert/modal, animate the chart or animate page transitions, react-spring is super helpful for those use-cases.