Design comparison
Solution retrospective
I just finish Bookmark Landing Page with animating the full content. Using Webpack for module bundling, in spite of the page not being much big, using Webpack is still much more efficient. Using grid system in 85% of the page to get more comfortable with. I tried to get the page pixel perfect as I can hope it be correct, any feedback or recommendations for better code structure || performance are very appreciated. Thanks.
Community feedback
- @PrAnAvViNaYaKjAdHaVPosted over 2 years ago
bro if you can suggest any resources to learn animation like this, plz share it
0@KhaledMostafa990Posted over 2 years ago@PrAnAvViNaYaKjAdHaV
it's absolutely pretty simple to make such animations when it comes to the CSS implementation, it's just transition with opacity so the basics of CSS will do that, Then I listen to the current viewport by "interSectionOvserver" window method to add the animation classes and remove per the user viewport on the page. this video will help you to get started easily with the "interSetctionOvserver". https://www.youtube.com/watch?v=_5Bu3JY-ZHc&t=1119s
1@KhaledMostafa990Posted over 2 years ago@PrAnAvViNaYaKjAdHaV And feel free to explore the page code to understand how these animations actually work from just 2 file at : /src/js/animOnScroll /src/js/onPageLoad
1
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord