opentek icon indicating copy to clipboard operation
opentek copied to clipboard

Add Animations (AOS) on Homepage

Open AnirudhPanda opened this issue 4 years ago • 29 comments

Refer: https://michalsnik.github.io/aos/

Animations on scroll would look great on the homepage according to me! If you have any other suggestions on how to make the homepage look more eye-catchy comment on this ISSUE or Open a new issue here

Join our Discord if you want to discuss anything!

AnirudhPanda avatar Sep 13 '21 10:09 AnirudhPanda

AOS and Animate CSS combines can be a good option othewise there are many animation libraries available, need to search for some, i have some references

neeraj15022001 avatar Sep 13 '21 18:09 neeraj15022001

Do one thing let me combine all homepage related issues here i will solve in one go

neeraj15022001 avatar Sep 13 '21 18:09 neeraj15022001

#21 #57 #23

neeraj15022001 avatar Sep 13 '21 18:09 neeraj15022001

#21 #57 #23

Amazing!!!

Thank you for taking the issues @neeraj15022001 ⚡

AnirudhPanda avatar Sep 13 '21 18:09 AnirudhPanda

put me as asignee i will start these after previous issue

neeraj15022001 avatar Sep 16 '21 08:09 neeraj15022001

https://user-images.githubusercontent.com/55191873/133639893-7342a846-3db5-4b07-805c-f4f66dfb2a1f.mp4

Progress till now on these three issue :

  • Working on navbar there is some issue coming while changing icon
  • Illustration changed - will change if i came across some better
  • Fixed order of second illustration on smaller screen size ( now there is no need to hide it )
  • Made spacing in footer and added new underline effect on links

neeraj15022001 avatar Sep 16 '21 15:09 neeraj15022001

@AnirudhPanda check this video

neeraj15022001 avatar Sep 16 '21 15:09 neeraj15022001

  • in footer and added new underline effect on links

The progress Looks Great @neeraj15022001

Should we add AOS on the cards as well? Will it look good?

AnirudhPanda avatar Sep 16 '21 17:09 AnirudhPanda

  • in footer and added new underline effect on links

The progress Looks Great @neeraj15022001

Should we add AOS on the cards as well? Will it look good?

Will think on that

neeraj15022001 avatar Sep 16 '21 17:09 neeraj15022001

  • in footer and added new underline effect on links

The progress Looks Great @neeraj15022001 Should we add AOS on the cards as well? Will it look good?

Will think on that

Cool! Let me share this PR on Discord

AnirudhPanda avatar Sep 16 '21 17:09 AnirudhPanda

https://user-images.githubusercontent.com/55191873/133704347-6650a303-cd47-4ec7-be88-04fe702befcb.mov

Added Close Button to Navbar in reference to issue number #23

neeraj15022001 avatar Sep 17 '21 00:09 neeraj15022001

in reference to issue number #23 #21 changes are done Navbar : Added close button Footer : Fixed responsiveness and added underline effect with faster transitions

#57 Issue is almost done just searching new illustrations

neeraj15022001 avatar Sep 17 '21 00:09 neeraj15022001

in reference to issue number #23 #21 changes are done Navbar : Added close button Footer : Fixed responsiveness and added underline effect with faster transitions

#57 Issue is almost done just searching new illustrations

Great work!!

AnirudhPanda avatar Sep 17 '21 04:09 AnirudhPanda

About AOS i believe AOS involves lots of javascript processing as there is continuous event listener listening to scrolls so it will reduce website performance and on top of that it sometimes breaks existing code, so i believe we should not add that

neeraj15022001 avatar Sep 17 '21 05:09 neeraj15022001

Screenshot 2021-09-18 at 6 40 01 PM Illustration Changed on About Page Screenshot 2021-09-18 at 6 40 58 PM Illustration changed on home screen for about us section

neeraj15022001 avatar Sep 18 '21 13:09 neeraj15022001

Screenshot 2021-09-18 at 6 40 01 PM Illustration Changed on About Page Screenshot 2021-09-18 at 6 40 58 PM Illustration changed on home screen for about us section

the bottom one sizing has to be done! Keep it the same as the right part height

AnirudhPanda avatar Sep 18 '21 15:09 AnirudhPanda

Then it will look way to small that's why i even scaled it up, instead we can center the content of right part. What's your thought on that?

neeraj15022001 avatar Sep 19 '21 15:09 neeraj15022001

Then it will look way to small that's why i even scaled it up, instead we can center the content of right part. What's your thought on that?

Isn't the animation way too large? Yeah we can try that ig

AnirudhPanda avatar Sep 19 '21 15:09 AnirudhPanda

If i will reduce the size it will not have that much impact i mean it will look that tiny that purpose of adding image will get destroyed. Rest you can think and tell

neeraj15022001 avatar Sep 19 '21 16:09 neeraj15022001

i will make changes accordingly

neeraj15022001 avatar Sep 19 '21 16:09 neeraj15022001

Ok, I understand!

We can center that then and if we get better ideas we will modify that on a later stage

AnirudhPanda avatar Sep 19 '21 16:09 AnirudhPanda

Planning this!!

https://user-images.githubusercontent.com/66218496/133971277-cdd4e65c-a31e-4965-a466-2c67307658b5.mp4

AnirudhPanda avatar Sep 20 '21 07:09 AnirudhPanda

Great, this can replace current illustrations. What is source of these illustrations

neeraj15022001 avatar Sep 20 '21 10:09 neeraj15022001

Great, this can replace current illustrations. What is source of these illustrations

Canva

AnirudhPanda avatar Sep 21 '21 07:09 AnirudhPanda

hey @AnirudhPanda should i close this PR now and create seperate PR's ?

neeraj15022001 avatar Sep 29 '21 07:09 neeraj15022001

@AnirudhPanda shall i add AOS ?

neeraj15022001 avatar Sep 29 '21 12:09 neeraj15022001

@AnirudhPanda can you tell me status for this issue if we need to add AOS or not ?

neeraj15022001 avatar Sep 30 '21 22:09 neeraj15022001

Hey @AnirudhPanda I want to add AOS to some stuffs. Can you please assign me this issue?

Pulkit007 avatar Oct 13 '21 18:10 Pulkit007

Hi!, I wanted to work on this issue.

nawed2611 avatar Jan 22 '22 08:01 nawed2611

@AnirudhPanda please close this i case this is resolved

neeraj15022001 avatar Jul 06 '23 19:07 neeraj15022001