Meet Landing Page | Svelte + SCSS + GSAP - Animation Powerhouse
Design comparison
Solution retrospective
Hey guys!
I'm back with another lovely Frontend Mentor challenge. This is the last Newbiew challenge on my list and I decided to give it my best shot in building it.
If you're checking out the solution on a laptop / desktop screen, you'll get to see the scroll-based animation that I've implemented. I got the idea for the animations after seeing @ApplePieGiraffe's solution for this challenge. (obviously his solution is much better than mine :D) He's truly an incredible developer and his work has inspired me a lot. If you haven't checked out his work yet, I highly recommend you do.
I had a lot of fun building this project using Svelte and GSAP, even though it was quite difficult at times because it was my first time using GSAP on such a scale and also, it was my first using the ScrollTrigger plugin. You can imagine how many hours I've spent going through the documentation and watching tutorials ;)
The animations aren't yet available on the smaller screen sizes because the layout becomes quite messy. I'll need to see how to fix that. On top of that, I think the code for the GSAP animations can be improved, but since I'm still a beginner with this technology, I'm not quite sure how to approach it.
Any feedback about this or any other aspects of my project would be much appreciated.
Thanks for checking out my solution. See you in the next challenge! :)
Community feedback
- @grace-snowPosted almost 3 years ago
I see the mobile version even on my desktop. 1320px is way too late to change layout. It should change as soon as there is room for that layout.
I think there are big problems with these animations, I'm seeing a lot of white space. Completely white on load means it just looks broken. If you zoom or change orientation it seems to require a reload to make the animations work too.
Overall I think you should read up more about how and when to use animations to delight. Josh Comeau's blog would be a good read for you. He teaches how micro animations can be far more effective than animating all content like this. Cassie Evans website shows good examples of this too (using GSAP) https://www.cassie.codes/
Animating all content like this can have a negative impact on seo as well.
One last point - you're resizing html to 62.5% to make 1 rem equal 16px but you are not mitigating against the huge potential accessibility issues of doing this. I'm not going to go into it loads, but just really think about whether you need to do that. Is there any reason in the modern web why you need to change the established cross browser default and make rem into 10px? Do you need to calculate layouts by pixels at all in the modern web. Think about it.
1 - @Sloth247Posted almost 3 years ago
I like your animation, and would like to use GSAP to my future projects! You included my profile icon which is funny 😋
1
Please log in to post a comment
Log in with GitHub
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