Skip to content
Submitted about 3 years ago

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

accessibility, bem, gsap, parcel, sass/scss
Karol Binkowski•1,620
@GrzywN
A solution to the Clipboard landing page challenge
Preview (opens in new tab)Code (opens in new tab)

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!

Code

Please log in to post a comment

Log in

Community feedback

  • CyrusKabir•1,885
    @CyrusKabir

    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
  • Anna Leigh•5,135
    @brasspetals

    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
  • Fluffy Kas•7,675
    @FluffyKas

    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! >.<

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