@suruaino
Posted
This is so nice, You did a very great job.
Looking to hire developers?
What challenges did you encounter, and how did you overcome them?
Hello! 👋
That was another entertaining challenge in which I learned a lot of new things! Right from the start I decided it would be a great idea to use GSAP library to create a parallax effect for sections, rather than creating subpages. Each section has tabs through which user can display new content. New content is dynamically added in JavaScript so I needed find a way to prevent images from loading each time tab has changed. For this purpose I used the Intersection Observer API which helps me detect visibility of a section that appears in the user's viewport. When this happens the preloadImages()
function is called and creates new HTMLImageElement
instance with Image()
constructor to which I attach the src of each image from the section. In the "crew" and "technology" sections, the user can change tabs and content by moving the mouse/touch horizontally. Since the page has a lot of animations ScrollTrigger animations using GSAP are disabled for users who have set prefers-reduced-motion
. Learned how to share variables between JavaScript and Sass since I needed to use media query breakpoint variable value for matchMedia
but I didn't want to do it with copy and paste. I found a way to synchronize my css and js so that my CSS is the source of truth and share values with JavaScript. I used CSS Modules for this purpose. CSS Modules with ICSS specification introduces the :export
directive to act as a way to export defined values. Coupled with Sass variables, it allows you to export them.
🐞Bugs:
position: sticky
and GSAP, there are several bugs that I cannot eliminate at the moment. When a user uses the keyboard to navigate a page, the viewport often does not show the active element. The second mistake is responsiveness. On some small screens (in terms of height), sections are cropped and navigation does not lead to the appropriate section. If I find a way to eliminate these bugs and maintain the animations, I will update the project but for now I'm satisfied with how it looks and what I achieve creating this.💡Here's some new things I used or learned:
prefers-reduced-motion
is used to detect if a user has enabled a setting on their device to minimize the amount of non-essential motion. The setting is used to convey to the browser on the device that the user prefers an interface that removes, reduces, or replaces motion-based animations.🛠️Build with: (can be found also in my others projects)
❓Questions:
@suruaino
Posted
This is so nice, You did a very great job.
@Cyrus-Akwaboah-Emmanuel
Posted
This is amazing! The transitions are impressive.
@Pepekid
Posted
Awesome!! It's an excellent project!! 👌
@Mali-bee
Posted
My gosh, this is gorgeous🤩🥺!!! Well done👏🏾👏🏾👏🏾👏🏾
@Mazhar1857
Posted
The responsiveness of your application is not good. I have a 15-inch desktop, and your application is not fully visible; some parts get cropped. However, when I open it in inspection mode, it looks great.
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