Submitted almost 2 years ago

Mobile-first solution with SCSS && GSAP / ScrollTrigger animations

#accessibility#bem#gsap#parcel#sass/scss

Karol Binkowski• 1,640

@GrzywN

Preview site View code

This is a solution for...

Clipboard landing page

HTML
CSS

2junior

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hey!

I'm really happy with the result :)

I turned my spaghetti JavaScript code into cleaner and more maintainable OOP import/export module based code. Animations are made using GSAP and ScrollTrigger plugin. If you know SOLID principles or some design patterns and you think I could have done something better - let me know, since it's my first OOP JS project after all. I'll probably code the next one in TypeScript.

The solution isn't pixel perfect, but it's not that bad. I spent some time working on it, but I thought it wasn't worth it, especially improving "partners" section was hard. (I didn't want to make a modifier class for every image and then compare it to the design, since this section is broken in Figma).

Feel free to test out things and check out my code. I might have missed something, like I always do. Any helpful feedback is appreciated!

Community feedback

CyrusKabir• 1,885

@CyrusKabir

Posted almost 2 years ago

Hello, you did a clean and good work on this challenge but your landing page have a horizontal scroll on mobile and I test it with both dev tools and my mobile and still I don't know how to fix it

Marked as helpful

Karol Binkowski• 1,640

@GrzywN

Posted almost 2 years ago

@CyrusKabir Alright I've just put really simple solution and it worked:

body, header, main, footer {
overflow-x: hidden;
max-width: 100vw;
}

CyrusKabir• 1,885

@CyrusKabir

Posted almost 2 years ago

@GrzywN Yes this snippet work but main issue still exist. when we have overflow on any direction it's better to find that element which cause overflow and remove it or fix it you can read this article for debugging overflow issue on site : debugging overflow

Karol Binkowski• 1,640

@GrzywN

Posted almost 2 years ago

@CyrusKabir yeah ik

Anna Leigh• 5,135

@brasspetals

Posted almost 2 years ago

Hi, Karol! 👋 Great job on this challenge! The GSAP animations fun, and I can confirm that the prefers-reduced-motion query does work. Your HTML semantics are solid, and overall it responds great. 👍

The only thing I noticed is that the logos from 400 - 900px get very stretched and pixelated. I suggest removing flex: 1 from .partners__logo and then adding justify-content: center to .partners. You could then play around with your existing gap property on .partners to get the spacing how you want. At the very least this will prevent the logos from getting HUGE on large mobile and tablet screens.

Again, nice job on this one!

Marked as helpful

Karol Binkowski• 1,640

@GrzywN

Posted almost 2 years ago

@brasspetals Hi, thanks a lot! I couldn't find a right way to make partners section for medium sized screens. I'll try to improve it, at least a little bit. 👍

Edit: Wow, I did what you've suggested and it's clean. I don't believe that I didn't come up with this simple idea 😅 Once again, thanks a lot! 😁

Fluffy Kas• 7,735

@FluffyKas

Posted almost 2 years ago

Hiyo, everything here looks really very neat! I tried to look for a prefers-reduced-motion query but couldn't find it. Is there any? I might just be completely blind tbh! >.<

Karol Binkowski• 1,640

@GrzywN

Posted almost 2 years ago

@FluffyKas It's in the Animations.mjs file, line 11. tbh I don't even know, if it even works 😅

Fluffy Kas• 7,735

@FluffyKas

Posted almost 2 years ago

@GrzywN Ahaha, thanks for specifying the line, never would've found it >.<

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