Submitted over 2 years ago

Bookmark Landing page (Fully Animated)

Khaled Farghly• 340

@KhaledMostafa990

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Bookmark landing page

HTML
CSS
JS

3intermediate

View challenge

Design comparison

SolutionDesign

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

pranav• 120

@PrAnAvViNaYaKjAdHaV

Posted over 2 years ago

bro if you can suggest any resources to learn animation like this, plz share it

Khaled Farghly• 340

@KhaledMostafa990

Posted 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

Khaled Farghly• 340

@KhaledMostafa990

Posted 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

Please log in to post a comment

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