Bug: overflowing card animation + solution about landing-page HOT 8 CLOSED

@dev-phantom I am currently learning React and most likely will not fix any of those issues.

Feel free to open an issue if you're planning to fix any or all of them. 😀

You can still open those issue, other developers would work on it

You can also try taking on one of the issue also it'll be a great way to learn react and typescript

from landing-page.

i guess one way to fix this is a adding animation-delay to the cards

from landing-page.

IMO removing the ease in and appear animation. At the point the user scrolls this far down the page, they don't need to see the animation, we can just show the cards.

from landing-page.

.take

from landing-page.

Thanks for taking this on! If you have not already, join the conversation in our Discord

from landing-page.

Few considerations + problems:

1. Animation sucks the performance out of the website and it should be removed whenever possible, removing the animation from cards is a wise choice.

2. I think the whole website animation can be improved by lowering the delay even more. This website seems to be inspired by the GitHub landing page but they have a low delay time if you take a closer look and it's often for a reason because people don't like to wait for the animation to finish. I like animation but only when it's not getting in the way of user experience.

3. We still need to add a little top & bottom margin because the container div is blocking the top and bottom box shadow. It has nothing to do with animation. @dev-phantom fixed that with padding which is a nice solution as well.

4. I also noticed other problems: if you take a look at text content and profile image they are too close when viewed on small screen devices. There is only one card that seems to have this problem and there is a need for a bottom margin or padding to fix the problem.

5. There is also a mistake in writing the Twitter user title name at the bottom instead of up and writing the Twitter handle at the top instead of the bottom, they both need to switch places. Some cards got this correct whereas others don't. This is most likely going to require a change in the saved content data itself.

That's it for now. I got more issues for later. 😃

from landing-page.

Few considerations + problems:

1. Animation sucks the performance out of the website and it should be removed whenever possible, removing the animation from cards is a wise choice.
2. I think the whole website animation can be improved by lowering the delay even more. This website seems to be inspired by the GitHub landing page but they have a low delay time if you take a closer look and it's often for a reason because people don't like to wait for the animation to finish. I like animation but only when it's not getting in the way of user experience.
3. We still need to add a little top & bottom margin because the container div is blocking the top and bottom box shadow. It has nothing to do with animation. @dev-phantom fixed that with padding which is a nice solution as well.

4. I also noticed other problems: if you take a look at text content and profile image they are too close when viewed on small screen devices. There is only one card that seems to have this problem and there is a need for a bottom margin or padding to fix the problem.
5. There is also a mistake in writing the Twitter user title name at the bottom instead of up and writing the Twitter handle at the top instead of the bottom, they both need to switch places. Some cards got this correct whereas others don't. This is most likely going to require a change in the saved content data itself.

That's it for now. I got more issues for later. 😃

Can you open these as a new issue as the issue initially mentioned above has been fixed

from landing-page.

@dev-phantom I am currently learning React and most likely will not fix any of those issues.

Feel free to open an issue if you're planning to fix any or all of them. 😀

from landing-page.