Add animated class to animated buttons

[shahednasser]

Most animated button's animation only happens on hover, we need to add an animated class that triggers the animation without hovering over the button. And when the animation class is added make sure that the animation is not also triggered on hover. In order to avoid repeated code in the buttons, please move the animation or transition to a mixin and call it where it is needed.

Also, some button's animation needs to be continuous, others don't. I have indicated below which is continuous and which isn't

This issue is going to be split between contributors. Each contributor can take up a button from the list below. Please comment before taking up a button, choosing which between you will be working on.

The following buttons need the animated class:

• Atom (continuous) Taken by @karleypetracca
• Aura (continuous) Taken by @TomWBush
• Bounce (continuous) Taken by @TomWBush
• Diagonal Background on Hover (not continuous) Taken by @TomWBush
• Expanding Border (not continuous) Taken by @TomWBush
• Fill Buttons All Types (not continuous) Taken by @TomWBush
• Flash (continuous) Taken by @TanmayJain17
• Hinge (not continuous) Taken by @kalimah-apps
• Invert (not continuous) Taken by @karishmapatel27
• Liquid (not continuous) Taken by @A3vk
• Neon (not continuous) Taken by @kyawkyawsoezhu
• Next (not continuous) Taken by @kyawkyawsoezhu
• Nudge (continuous) Taken by @modaserMoj
• Paper Curl (not continuous) taken by @TomWBush
• Previous (not continuous) taken by @TomWBush
• Pudding (not continuous) Taken by @AbdulMAbdi
• Pulse (not continuous) Taken by @AbdulMAbdi
• Rainbow (continuous) Taken by @A3vk
• Ripple (not continuous) Taken by @Abid1998
• Scale (not continuous) Taken by @Abid1998
• Shake (continuous) Taken By @kyawkyawsoezhu
• Shine (continuous) Taken by @kyawkyawsoezhu
• Skew (not continuous) Taken by @Hassan-Ib
• Snake Border (not continuous) Taken by @rad10wave
• Splash (continuous) Taken by @modaserMoj
• Spring (continuous) Taken by @modaserMoj
• Transparent on Hover (not continuous) taken by @ChristopherMarques
• Vibrate (continuous) Taken by @modaserMoj

[github-actions]

Hi, @shahednasser,
Thanks for opening an issue 💙 your issue will be seen by maintainers soon.
Contributors 🧑‍🤝‍🧑 like you make the open source community 🌍 such an amazing place to learn 📖 , inspire 👼, and create 🎨 .
We will investigate 👀 and get back to you as soon as possible 👍 .
Just make sure you have given us sufficient information ℹ️.
By that time enjoy this joke 👇 , hope you like it 😄

Why is 6 afraid of 7 in hexadecimal Canada?
Because 7 8 9 A?

Use this action on your projects.

[karleypetracca]

I will take the atom button. Thanks!

[shahednasser]

Great @karleypetracca you can go ahead

[karleypetracca]

One additional consideration on this @shahednasser : will there be a plan to put something like shouldHaveAnimatedType into the buttons-examples.js? I imagine it would default to false, unless the value is there in the examples list. That way it can be turned on for each button as each new button's .animated css class gets completed, and for those completed buttons, can show the class exists.

I'd be up for adding this functionality if you're comfortable with that. 😃

[shahednasser]

@karleypetracca I don't think it's necessary for the website at the moment, as it could make it laggy. We could maybe decide in the future to do that, but only play the animation when the button is on screen? This is just an idea but I'm not sure we will work on it at the moment, but thank you for the suggestion!

[Hrshk15]

I'll take the rainbow button.

[shahednasser]

Great @Hrshk15 thanks!

[adsingh14]

Indeed !

I've an idea to improve the UI/UX of animated buttons. I can add the toggle animated class functionality in such way that it won't affect the other contributors work. Will discuss this further on your acknowledgement.

[TomWBush]

How many of them can I take? I will take Aura and Bounce if I can take more than one. Thank you!

[shahednasser]

@adsingh14 great but toggle button is not on the list above so please choose one of the buttons from the list and let me know which

[shahednasser]

sure @TomWBush you can

[TomWBush]

I can take the next three, Diagonal Background on Hover, Expanding Border, Fill Buttons All Types.

One question I have is that Expanding Border does not seem to have a continuous animation on hover. Do you want me to make it continuous for the animated class?

[shahednasser]

Thanks @TomWBush . No I think that was a mistake, it's not supposed to be continuous. I'll edit that.

[adsingh14]

@shahednasser I wasn't talking about toggle button from the list. I was suggesting adding toggle functionality button for animated buttons.

[shahednasser]

@adsingh14 oh do you mean on the website adding a toggle functionality that adds or removes the animated class? That's a good idea. Can you open a new issue with it please with it?

[yuwangcs]

@shahednasser hello, can I take flash, hinge, invert?

[shahednasser]

Yes @yuwangcs you can

[karishmapatel27]

Hi @shahednasser
I'd like to contribute to this project, may I know which buttons are still available?

[princeo1]

Hi @shahednasser ,I want to contribute here ,can you let me know which one is available?

[shahednasser]

Hi @kalimah-apps I have assigned you to hinge

[shahednasser]

Hello @karishmapatel27 @princeo1 the ones that are not checked off and do not have next to them "taken by" are available. Please comment which ones you'd like to work on to be assigned to them

[karishmapatel27]

Hi @shahednasser, thank you for coming back to me. I would like to work on Invert please.

[shahednasser]

Great I have assigned you the button

[princeo1]

Thank you for replying @shahednasser I would like to work on rainbow

[shahednasser]

Great @princeo1 you're assigned

[arnaugomez]

Hi @shahednasser I'm new to the project and would like to contribute. Please feel free to assign me a task ✅

[shahednasser]

Hi @arnoldgee please choose a button from the list if you want to work on it!

[github-actions]

@shahednasser reporting a stale issue.

[TanmayJain17]

Hi @shahednasser I would also like to contribute here . Can I work on the Flash Button ?

[shahednasser]

Hello @TanmayJain17 yes you can I'll assign you

[A3vk]

Hello @shahednasser can I work on the Liquid and the Rainbow button?

[abidahmadq]

Hello @shahednasser can i take these
Rainbow (continuous)
Ripple (not continuous)
Scale (not continuous)
button ?

[shahednasser]

@A3vk I have assigned you Liquid and Rainbow
@Abid1998 I have assigned you Ripple and Scale.

Thank you

[rad10wave]

Hey @shahednasser can i take the Snake Border ?

[shahednasser]

Hello @rad10wave yes I'll assign you