Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Meet Landing Page | Svelte + GSAP | Surprise!

#svelte#gsap
P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Desktop design screenshot for the Meet landing page coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison

SolutionDesign

Reports

Accessibility report (1)
error

This button element does not have a name available to an accessibility API. Valid names are: title undefined, element content, aria-label undefined, aria-labelledby undefined.

<button class="attribution-btn svelte-1mfqa14"><img class="giraffe" src="/asse...</button>

ApplePieGiraffe’s questions for the community

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

P
Rafalβ€’ 1,395

@grizhlieCodes

Posted

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 helpful

3


P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Posted

@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

P
Rafalβ€’ 1,395

@grizhlieCodes

Posted

@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

Mike Haydenβ€’ 1,005

@mickyginger

Posted

Just testing commenting after the updates @ApplePieGiraffe @mattstuddert

Marked as helpful

1

P
Matt Studdertβ€’ 13,591

@mattstuddert

Posted

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


P
Matt Studdertβ€’ 13,591

@mattstuddert

Posted

Oh, 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

P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Posted

@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

P
Rafalβ€’ 1,395

@grizhlieCodes

Posted

@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

ZaraAgβ€’ 145

@zaraag92

Posted

Hello.

It looks amazing and I'm in love with giraffe, so exciting.

2


P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Posted

@ZaraAg92

Thanks, Zara! 😊

0

P
Emmilie Estabilloβ€’ 5,420

@emestabillo

Posted

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 gap isn'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


P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Posted

@emestabillo

Thanks, em! πŸ˜€ Yup, I think I should have probably used margin instead of the gap property 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

P
Michael Tzeβ€’ 340

@Biggboss7

Posted

Very cool !!

1


P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Posted

@Biggboss7

Thank you! 😊

0

Kamasah-Dicksonβ€’ 5,670

@Kamasah-Dickson

Posted

I think our favourite frontendmentors should have been clickable for us to visit their Page

1


P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Posted

@Kamasah-Dickson

That's a nice idea! Thanks for suggesting it. πŸ™‚

0

Kamasah-Dicksonβ€’ 5,670

@Kamasah-Dickson

Posted

@ApplePieGiraffe Am so Glad to hear that from you. Besides nice work there. :)

0

P
Marlon Passosβ€’ 940

@MarlonPassos-git

Posted

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


P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Posted

@MarlonPassos-git

Hey, thanks, Marlon!

If I remember correctly, I used the linear-gradient function to overlay the background image with a color because simply adding a color before the url function doesn't work with the background property. I put the same color twice in the linear-gradient function 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

Folarin Akinloyeβ€’ 1,240

@folathecoder

Posted

Hi APG! I want to be like you when I grow up! πŸ˜€ This is awesome and very sleek. Keep it up!

2


P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Posted

@folathecoder

Awwβ€”thanks, Fola! Keep coding, as well! πŸ˜€

1

Akerele Tundeβ€’ 165

@trafiki

Posted

@folathecoder HI brother! πŸ˜ƒ

0

Akerele Tundeβ€’ 165

@trafiki

Posted

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


P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Posted

@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) scaleY of the vertical line (from 0 to 1, I think) to make it increase in height, (2) the scale of the circle to make it increase it size, and the opacity of 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

Akerele Tundeβ€’ 165

@trafiki

Posted

@ApplePieGiraffe Thank you!

0

Rayaneβ€’ 1,935

@RayaneBengaoui

Posted

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


P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Posted

@RayaneBengaoui

Haha, thanks, Rayane! πŸ˜€ I was glad to include you! πŸ˜†

Have a nice day, too! β˜€οΈ

0

Bonreyβ€’ 1,130

@Bonrey

Posted

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


P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Posted

@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

Bonreyβ€’ 1,130

@Bonrey

Posted

@ApplePieGiraffe, gosh, I want to learn so much! πŸ˜… Thank you! Your projects are such an inspiration to me ✨

1

P
Jenβ€’ 1,230

@En-Jen

Posted

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


P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Posted

@En-Jen

Thanks so much for the kind words, En-Jen! 😊

0

Tesla_Ambassadorβ€’ 2,900

@tesla-ambassador

Posted

@applepiegiraffe I just love the scroll effect and the way things are precisely aligned, great work on this bro.

1


P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Posted

@tesla-ambassador

Thanks, dude! 😁

1

P
Anna Leighβ€’ 5,135

@brasspetals

Posted

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


P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Posted

@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

P
Anna Leighβ€’ 5,135

@brasspetals

Posted

@ApplePieGiraffe This self-proclaimed nitpick queen πŸ‘‘ did her darndest to find something! πŸ˜‰

1

P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Posted

@brasspetals

πŸ˜‚

Well, at least I'll be certain that I really haven't missed anything after your review! πŸ‘

1

tedikoβ€’ 6,170

@tediko

Posted

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


P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Posted

@tediko

Thanks, tediko! πŸ˜€ Your solutions have been really awesome, lately, too! 🀩 Thanks for the tip and have fun coding, as well! πŸ’ͺ

1

P
Graceβ€’ 23,610

@grace-snow

Posted

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


P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Posted

@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

Michalβ€’ 685

@mbart13

Posted

pictures appearing on scroll blew my mind, teach me! :D

raised_hands

1


P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Posted

@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
Slack logo

Join our Slack community

Join over 180,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!