[FEATURE] Link effect

[eddiejaoude]

Description

It would be great if links in the profile could have an animation added

• from Tailwind we have 4 animations that could be added to the link https://tailwindcss.com/docs/animation

• these options should be added to a dropdown on the link add/edit page
• there should be an option for none (no animation) also

note: this will need to be done after PR https://github.com/EddieHubCommunity/LinkFree/pull/6998 (or branched from and merge to)

Screenshots

No response

Additional information

No response

[github-actions[bot]]

The issue has been unlocked and is now ready for dev. If you would like to work on this issue, you can comment to have it assigned to you. You can learn more in our contributing guide https://github.com/EddieHubCommunity/LinkFree/blob/main/CONTRIBUTING.md

[HassanTanveer]

Hey, can I give this a try?

[amandamartin-dev]

Hey, can I give this a try?

Thank you, I have assigned you.

[kunalshokeen051]

Hi, can i work on this.

[SaraJaoude]

Hi, can i work on this.

@kunalshokeen051 as I have mentioned to you today already before requesting issues to be assigned to you, please check the Assignees box at the top of the page - this issue has been assigned to someone else.

Here is a link to our Contributing Guide which you may want to take a look at so that you can see the guidelines for contributing to this project..

We appreciate your enthusiasm but in future please do not ask to be assigned to various issues in the expectation that one of these will be assigned to you. I am sure you will appreciate this creates extra work for maintainers as well as notifications and noise.

[SaraJaoude]

@HassanTanveer I have unassigned this from you as there has been no activity for two weeks

[vishalsingh2972]

@SaraJaoude could you assign this to me I would like to give it a try!

[SaraJaoude]

@SaraJaoude could you assign this to me I would like to give it a try!

@vishalsingh2972 I have assigned this to you

[SaraJaoude]

SaraJaoude could you assign this to me I would like to give it a try!

vishalsingh2972 I have assigned this to you

@vishalsingh2972 as there has been no activity since this was assigned to you two weeks ago, I have unassigned this from you to give others a chance to move this forward.

[Dobariya-Nishant]

I believe considering using transition instead of animation might enhance the overall user experience in our links in the profile. Currently, in this issue we are trying to implement animations in links, and while they do add a touch of interactivity, I believe using tailwind transitions could significantly improve the user experience without compromising on visual appeal.

=> Here are some compelling reasons to consider using transition instead of animations.

(1) Subtle and Polished: Tailwind transitions can offer a more elegant and polished feel to the links. They provide smooth visual feedback without being intrusive or distracting, allowing users to focus on the content rather than the interface.

(2) Streamlined Interaction: Animations can sometimes make it challenging for users to accurately click on the desired link due to their dynamic nature. Transitions, on the other hand, maintain the link's position, ensuring a consistent and precise user interaction.

(3) Performance Optimization: Transitions are generally lighter in terms of performance compared to animations. They don't impose a significant load on the page, resulting in faster load times and smoother interactions, even on less powerful devices or slower internet connections.

(4) Consistency in UI: By standardizing our approach to link interactions, we can achieve a cohesive and seamless user experience across the platform. Transitions help maintain visual consistency without overwhelming the users with different types of animations.

here link of video that shows demo of animations and transitions. video link

I look forward to your valuable feedback and support in making our LinkFree profile an even better space for collaboration and problem-solving.

[eddiejaoude]

I think the first effect will be the most work as it will set the foundation for future effects.

Sure, I would be interested to see an example + code, the video example stated it can only be applied to images

[Dobariya-Nishant]

yes, I make an example + code Draft PR and video too.

[eddiejaoude]

ok thank you 👍 @Dobariya-Nishant would you like this assigned to you?

[Dobariya-Nishant]

yes please.

[Dobariya-Nishant]

https://github.com/EddieHubCommunity/LinkFree/assets/139515239/17ca4985-f2fb-4bf9-b54e-c409626047fb

added the video of 4 types of transition options and also No Animation Option too. when first time add new Link.

https://github.com/EddieHubCommunity/LinkFree/assets/139515239/c00a044d-9840-4428-b6ac-047ab0591a4f

in this video transitions can be edited from pencil button, but we have to change the position of pencil button.

https://github.com/EddieHubCommunity/LinkFree/assets/139515239/227fc8d3-e3ea-403d-be84-d8c2f621610d

this is the final result from user Profile.

I think it needs some more improvement I need some review from this videos and draft PR. and also, we can use animation if this won't work as expected.

[eddiejaoude]

I like the way you demo it with video examples. But the issue was not for these animations on hover, but when they are listed, to make them standout from the list - for example pulse effect

[Dobariya-Nishant]

I have some questions (1) pulse and ping effect will work for full link but how we add spin and bounce effect? (2) we have to add this animation for full link like added in video or we animate icons in link like shown in tailwind documentation? (3) main goal is to highlight the selected links by user and this effect is always shown without any hover?

[eddiejaoude]

I don't think animate spinner would make sense here, but maybe the other animations to the icon would look good, can you please try and see what you think

[Dobariya-Nishant]

yes that's good idea i try it and give demo of it.

[eddiejaoude]

thank you 👍

[SaraJaoude]

yes that's good idea i try it and give demo of it.

@Dobariya-Nishant how are you getting on?

[Dobariya-Nishant]

currently working on this feature and give demo in 2 days.

[Dobariya-Nishant]

here is demo of pulse, ping and jump animation that applied on links.

https://github.com/EddieHubCommunity/LinkFree/assets/139515239/7623656a-c7e9-4960-8634-06865dde20bf

links on profile page

https://github.com/EddieHubCommunity/LinkFree/assets/139515239/921a0ce9-8249-493a-a203-aae37bff2128

and the last but not least my little experiment added custom CSS animation around link in light mode it's not that good but in dark mode looks great.

https://github.com/EddieHubCommunity/LinkFree/assets/139515239/7ae69e03-496b-4c7a-9c75-ca81ccee22f9

links on profile page

https://github.com/EddieHubCommunity/LinkFree/assets/139515239/b9581f01-7cac-429b-99a7-efcabf0d9535

I think in light mode we won't added any color so it's just showing background directly.

I look forward to your valuable feedback.

[eddiejaoude]

Wow looks interesting 👍 Please create a pull request so we can have a play also

[Dobariya-Nishant]

here added draft pull request please review it.