@sebas-tcotd
Posted
This is completely amazing! Great work! 🙌🏼
Do you think it would be feasible to implement the View Transitions API? I think it would be something very interesting :)
Looking to hire developers?
What challenges did you encounter, and how did you overcome them?
Hello! 👋
This project was nothing but fun! I found many challenges in this project, such as creating a two-page website, using external Leaflet library to display the map or trying GSAP library to make scroll animations (this project turned out to be a great place to do it!). By using the Leaflet and GSAP libraries, I had to learn and use JavaScript bundler. Originally I created the project using Webpack to bundle my JavaScript files. But while reading more about diffrent bundlers or tools I wanted to check what the working process with other ones looks like. I switched Webpack with Vite (you can check #1 PR in github). Surprisingly there weren't many problems when changing. The Vite is simple to configure, which is minimal.
Instead of adding a container to each section that limits our content to a certain width and positions it in the middle of the screen, leaving us the option for the parent element to still have the value of the entire width of the page if we wanted to add a background or photo, I used CSS layout grid breakouts, which gets rid of redundant unnecessary containers by defining the grid and its columns template for main grid-container.
ScrollTrigger animations using GSAP are disabled for users who have set prefers-reduced-motion
. Additionally, I created a fallback if javascript was not loaded so that the "initial settings" of the animation would not be loaded. Animations are disabled on mobile devices. A similar fallback has been added for the Leaflet #map
container. If javascript does not load, the container will not be displayed at all so as not to leave empty space on the page.
I added skip-to-content links, even though they weren't really needed in this case, I happened to see an article about them so I decided to use them.
💡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:
@sebas-tcotd
Posted
This is completely amazing! Great work! 🙌🏼
Do you think it would be feasible to implement the View Transitions API? I think it would be something very interesting :)
Is it possible to do that with vite? I don't know how to start.
@JhonatanHernandez96
Of course! Webpack is one of the most commonly used bundlers for web projects that's why I picked it but you can definitely use Vite module bundler as well! It is very hot tool lately. I'd start at reading Vite documentation or maybe watch some videos about it.
Edit: You've sparked my curiosity about the Vite so I decided to take a look at Vite and ultimately I switched Webpack for Vite. Take a look if you're intrested!
@tediko
Thank you, teacher. All your solutions are spectacular. I will learn a lot thanks to you
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