Meet Landing Page | Svelte + GSAP | Surprise!

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 😁

Just testing commenting after the updates @ApplePieGiraffe @mattstuddert

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! 🐣

Hello.

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

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!

Very cool !!

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

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?

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

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

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 ! 🌞

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!

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!!

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

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!

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! 💪

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

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

raised_hands