Skip to content

ApplePieGiraffe/meet-landing-page

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

42 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Meet Landing Page

preview of meet landing page challenge

This is a challenge from Frontend Mentor. Coded by me! 😁

Welcome to the repository for this project. Feel free to look around and expore! 😀

Tools

Development

I decided to build this app using Svelte. Svelte is an awesome compiler where everything feels like it just makes sense. I already knew that I liked Svelte, but this experience made me realize that I love Svelte! 😍

Adding animations was a breeze with GSAP and ScrollTrigger. Both are great tools that make animating things fairly easy and very fun! I used smooth-scrollbar to soften the scrolling of the page and customize the appearance of the scroll bar. 😀

The only trouble I had was combining all of these tools and getting them to work together. If anyone happens to be interested in using Svelte, GSAP, ScrollTrigger, and smooth-scrollbar, here's a GSAP forums thread that I created when I was really stuck that might come in useful. 🙂

Notes

I think some things like the tablet/mobile animations and perhaps accessibility might need some tweaking. I'm always open to ideas and suggestions, so please do let me know if you have anything to say! 👍

Also, for some reason, if you resize the screen (especially with the responsive dev tools), sometimes the layout breaks a little (IDK why—something to do with ScrollTrigger perhaps?). You might need to refresh the page, then. 🙃

Besides that...

Scroll past the hero section and back again to toggle between the original avatars/the avatars of some of my favorite people on Frontend Mentor! 😆

And click on the giraffe for the attribution! 😉


Frontend Mentor Solution

Happy coding! 😄