Meet Landing Page | Svelte + GSAP | Surprise!
Design comparison
Solution retrospective
Hello, everybody! 👋
I finally completed another challenge! 🎉 I know it's been a while, but I'm happy to submit another solution after taking a little break. 😆
This was a short, simple challenge that I created with Svelte. Svelte is such a joy to use and it worked out really well with GSAP (which I used to add the animations to the site). I also used ScrollTrigger and smooth-scrollbar to enhance the animation and scrolling experience just a bit! 😀
And for a tiny surprise—scroll past the hero section and back again to toggle the avatars of some of your favorite Frontend Mentors! 😆
Of course, feedback is welcome and appreciated! 😊 Do let me know of any issues you find (since I'm afraid I'm bound to have missed something somewhere)! 😅
Oh, yes, and click on the giraffe for the attribution. 😉
Happy coding! 😁
Community feedback
- @grizhlieCodesPosted over 3 years ago
Beautiful result!
Really interested seeing Svelte in Action with GSAP. I haven't actually used GSAP but this is rather convincing. Thanks for the forum-thread you mention in github, I'll appreciate it now ahead of time.
I was testing your site on my phone and MAN did the sound wake me up when I scrolled back to the top, had earphones in at max at the time 😂. I like these personalised touched you have. I need to invest some time into making my own personality.
I like how many people feel inspired by your work. Whilst I think we are all lucky to have Frontend Mentor I also think it is more lucky to have you. I weighed this comment in my head, it holds logically. Keep it up, hope your break wasn't due to any burnout!
Have you written any posts about how you approach your projects? I've been thinking of this sort of content helping newbies especially. Tempted to start YouTubing to just throw out really tailored content to helping people start and build projects quite.. systemically. But an article from you would help a lot of people I think. Or a video.
Keep the magic going 😁
Marked as helpful3@ApplePieGiraffePosted over 3 years ago@grizhlieCodes
Wow! 😀 Thanks so much for your comment, Rafal (it's comments like these that I find very inspiring)! ❤️
Trying to make an article or video does sound like a good idea—I just have to get myself around to actually giving it a shot one of these days! 😂 Thanks for the encouragement! 👍
Keep the magic going, too! 😆
(And sorry for accidentally blowing your ears! 😅)
1@grizhlieCodesPosted over 3 years ago@ApplePieGiraffe I hear you on the 'giving it a shot' part. Same boat.
But I realised how rewarding and hopefully useful this sort of thing is to people who may have these questions in their minds. The best resource I've seen so far, from is a YouTuber called CoderCoder. SHE IS AMAZING.
And as to the encouragement - I think like yourself i just give praise where it's due!
1 - @mickygingerPosted over 3 years ago
Just testing commenting after the updates @ApplePieGiraffe @mattstuddert
Marked as helpful1 - @mattstuddertPosted over 3 years ago
Great to see you posting a new solution, APG! It is a perfect challenge to play around with some GSAP animations, and every time I see one of your Svelte projects, it makes me want to dive into it to learn more!
Nice little Easter Egg when scrolling back to the top as well! 🐣
3@mattstuddertPosted over 3 years agoOh, and one thing I noticed on mobile is that the text below the feature image gallery overlaps the images. I checked in both Chrome and Safari on my phone, and it overlapped on both.
1@ApplePieGiraffePosted over 3 years ago@mattstuddert
Thanks, Matt (and also for catching that issue)! 😀
That bug is rather strange—I couldn't see it using the dev tools or my mobile device! But I'll look into it! 👍
EDIT: Yup, the layout of the feature section seems pretty broken iOS and quirky in Safari. More debugging to do! 😅
1@grizhlieCodesPosted over 3 years ago@mattstuddert Join the dark side Matt and embrace Svelte. The only thing you'll feel is the sick realisation you've lived and breathed without having known how fun and pleasurable coding is with Svelte 😎.
0 - @zaraag92Posted about 3 years ago
Hello.
It looks amazing and I'm in love with giraffe, so exciting.
2 - @emestabilloPosted over 3 years ago
I join @mbart13 here in saying TEACH ME 😄 Seriously though, I'm curious about your process and how you come up with these interactions, like resources and inspiration. Haven't been here in a while (yikes lol) but when you submit a challenge, I just have to see and find out what you have in store for us with animations. Viewing this on mobile Safari and I wonder why
gapisn't always working on those two buttons. I'm on v14.4. PS, for a split second I thought the actual FEM API was at play here with the mentor images lol. Thanks for the shoutout :-) Great work!2@ApplePieGiraffePosted over 3 years ago@emestabillo
Thanks, em! 😀 Yup, I think I should have probably used
margininstead of thegapproperty but I was so excited about it I forgot about how it isn't 100% supported yet. 😅I've always wanted to try making stuff with GSAP and something like ScrollTrigger (especially after getting inspired from browsing sites like Awwwards) and I thought this would be a good challenge to start with. 🙂 Then I sort of just stared at the design preview until I found a few ideas that I liked and went for them! 😆
2 - @Biggboss7Posted over 2 years ago
Very cool !!
1 - @Kamasah-DicksonPosted almost 3 years ago
I think our favourite frontendmentors should have been clickable for us to visit their Page
1@ApplePieGiraffePosted almost 3 years ago@Kamasah-Dickson
That's a nice idea! Thanks for suggesting it. 🙂
0@Kamasah-DicksonPosted almost 3 years ago@ApplePieGiraffe Am so Glad to hear that from you. Besides nice work there. :)
0 - @MarlonPassos-gitPosted about 3 years ago
hello APG, nice work, I always see your projects as a base when I develop my own summers.
When I was trying to do this same project I was in doubt and came here to take a look at how you printed it, and in this case it's the background color to blend with the footer image, why did you use it
background: linear-gradient(hsl(192, 37%, 48%, .85), hsl(192, 37%, 48%, .85)), url(/images/desktop/image-footer.jpg);I can't understand it well because I tried to put the color together with the image like this
background: hsl(192, 37%, 48%, .85), url(/images/desktop/image-footer.jpg);And it didn't work, because you use linear-gradient with the same color twice?
1@ApplePieGiraffePosted about 3 years ago@MarlonPassos-git
Hey, thanks, Marlon!
If I remember correctly, I used the
linear-gradientfunction to overlay the background image with a color because simply adding a color before theurlfunction doesn't work with thebackgroundproperty. I put the same color twice in thelinear-gradientfunction because I wanted all of the overlay to be the same color (although playing around with different colors can look very nice, in some cases). 😀Hope that helps and happy coding! 😄
0 - @folathecoderPosted over 3 years ago
Hi APG!
I want to be like you when I grow up! 😀 This is awesome and very sleek. Keep it up!2@ApplePieGiraffePosted over 3 years ago@folathecoder
Aww—thanks, Fola! Keep coding, as well! 😀
1 - @trafikiPosted over 3 years ago
Hi APG, this is a brilliant solution, how did you achieve the vertical line and circle thing preceding the "Built for modern use" and "Experience more together" sections? What is it called? I will really appreciate if you can point me to a tutorial that explains the concept or tell me what it's called so i can search online for a guide. Thank you
1@ApplePieGiraffePosted over 3 years ago@trafiki
Hey, trafiki! 👋
To create that animation, I used a
<div>for the vertical line and another<div>for the circle and a<span>for the text inside the circle. I animated the (1)scaleYof the vertical line (from 0 to 1, I think) to make it increase in height, (2) thescaleof the circle to make it increase it size, and theopacityof the text to make it fade in to view.Those properties were easy to animate thanks to GSAP. Their "Getting Started" page has a very nice video and article that will help you learn how to animate things using their library. If you want to create animations that appear on scroll, check out one of their plugins for GSAP, ScrollTrigger. 😉
Hope that helps. 🙂
0 - @RayaneBengaouiPosted over 3 years ago
Hello APG ! 👋
I'm a bit late on this one but as everyone already said this looks AMAZING and as always, the animation is so smooth 🤩.
I wasn't ready to see me on the scroll back haha, nice easter egg, thanks a lot ! 😊
Have a nice day ! 🌞
1@ApplePieGiraffePosted over 3 years ago@RayaneBengaoui
Haha, thanks, Rayane! 😀 I was glad to include you! 😆
Have a nice day, too! ☀️
0 - @BonreyPosted over 3 years ago
OMG, @APG! Your solution is simply out of this world! 🤩
I myself decided to create something with animations on scroll recently, but my attempts go in no comparison with your work! I should definitely check out the library you used, especially if it is compatible with React. 😉
Also, I think it's great you take your time before publishing something new! This way, you make sure to bring your creativity to the maximum level and struck all of us with your breathtaking sites!
P.S. Your custom scrollbar alone is already worth checking out!
1@ApplePieGiraffePosted over 3 years ago@Bonrey
Thanks, Bonrey! 👍
GSAP is definitely compatible with React (simply take a look at this guide from GreenSock) and just continue playing around with scroll-based animations (they are a lot of fun)! 😀
I can't really take credit for the custom scrollbar (it's just another helpful library I found) but I think it does look nice with the rest of the design! 😅
Looking forward to your next solution! 👍
1@BonreyPosted over 3 years ago@ApplePieGiraffe, gosh, I want to learn so much! 😅 Thank you! Your projects are such an inspiration to me ✨
1 - @En-JenPosted over 3 years ago
Wowww I'm blown away by your creativity 🤯 Like who would think to include avatars of FM members as an easter egg? It works so well and is so clever though! This really makes me want to play around with ScrollTrigger now! Thanks so much for sharing your beautiful solutions with the community 🙌 Absolutely amazing job, keep it up!!
1@ApplePieGiraffePosted over 3 years ago@En-Jen
Thanks so much for the kind words, En-Jen! 😊
0 - @tesla-ambassadorPosted over 3 years ago
@applepiegiraffe I just love the scroll effect and the way things are precisely aligned, great work on this bro.
1 - @brasspetalsPosted over 3 years ago
APG, this is wild! 🤩 I mean, you even separated the top images to create the staggered "zooming in" on scroll. Then all the different fade in animations for the feature section, and then the scroll up "surprise" (thank you, btw 😊) ! Is that a custom scrollbar I see as well? 👀 Bit more added flair to the attribution too!
The only teeny, tiny detail I could find is that the divider circles look like they should be the same color as the background in the design, and should have slightly lighter border colors.
Yeah, the features section images are (as of my typing this) not quite right on desktop in Safari, but seem good on mobile!
1@ApplePieGiraffePosted over 3 years ago@brasspetals
Thanks, Anna! 😊 I did make the border of the divider circles a slightly darker grey color so that they could be seen better, but I totally forgot to change the color of their background! 😅
1@brasspetalsPosted over 3 years ago@ApplePieGiraffe This self-proclaimed nitpick queen 👑 did her darndest to find something! 😉
1@ApplePieGiraffePosted over 3 years ago@brasspetals
😂
Well, at least I'll be certain that I really haven't missed anything after your review! 👍
1 - @tedikoPosted over 3 years ago
Hello, APG! 👋 I am running out of words for your wonderful projects. You came up with another great idea and everything works nice and smooth. One small tip I can suggest you is to make more descriptive alternative text for logo to let know SR users what behavior they can expect. Good luck with that, have fun coding! 💪
1@ApplePieGiraffePosted over 3 years ago@tediko
Thanks, tediko! 😀 Your solutions have been really awesome, lately, too! 🤩 Thanks for the tip and have fun coding, as well! 💪
1 - @grace-snowPosted over 3 years ago
Hey @AppliePieGiraffe can you add a keyboard down event listener to supplement the scroll? I'm only on keyboard today so can't get down the page
1@ApplePieGiraffePosted over 3 years ago@grace-snow
Sorry, Grace! 😅 You can actually use the arrow keys to scroll up/down the page, but problem is that the scroll container that everything's in needs to be in focus first (and it isn't, by default). I'll look into that and thanks for mentioning! 😉
1 - @mbart13Posted over 3 years ago
pictures appearing on scroll blew my mind, teach me! :D
raised_hands
1@ApplePieGiraffePosted over 3 years ago@mbart13
Haha! 😅 The scroll animations were actually pretty easy to make thanks to ScrollTrigger! Check out ScrollTrigger's intro video and look through the docs a bit (they've got plenty of examples to study, too) and you'll be having lots of fun with scroll animations in no time! 😄
2
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