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

Landing Page With Intro Animation | Svelte, GSAP

P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Desktop design screenshot for the Pod request access landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison

SolutionDesign

Reports

Accessibility report (0)

Our reporter did not find any issues in this project! πŸŽ‰

ApplePieGiraffe’s questions for the community

Hey, everybody! πŸ‘‹

This was a fun little challenge! I used Svelte again and it makes things so much easierβ€”component-scoped styles are like the greatest invention since sliced bread! πŸ˜‚

I added an intro animation (for the tablet/desktop layout of the site) with GSAP and the little attribution popup. I also just went with the browser form validation for this one. πŸ˜€

Feedback welcome and appreciated, of course! 😊

Happy coding! 😁

Community feedback

Connor Zβ€’ 5,115

@zuolizhu

Posted

Hey APG! Yooooo dat loading screen 😯😯😯 is dope 🀩! It just brings your work to another level! And the way you managed the animations is so smart πŸ₯³!

I'm glad to hear you still like Svelte πŸ˜†, Svelte also supports component-scoped scss 😏, just few steps and it will just work, check out this article. (This is the scss setup I found before, if there is a simpler way to do, please let me know😝)

keep coding and happy coding πŸ™Œ!

3


P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Posted

@zuolizhu

Thanks, zuolizhu! πŸ˜† Happy coding, too! πŸ˜ƒ

1

Connor Zβ€’ 5,115

@zuolizhu

Posted

@ApplePieGiraffe I just updated my comment above about the scss supports in Svelte. Hope it helps πŸ€ͺ!

1

P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Posted

@zuolizhu

Thanks for the link to that article! 😊

I've actually found that article before and tried to follow it several times, but each time I do, VS Code tells me "Node Sass does not yet support your current runtime environment." I ran around StackOverflow trying to figure out what was going on and ended up installing a couple of different versions of Node.js and node-sass (both old and new) and running a bunch of npm commands to reinstall or rebuild node-sass, but nothing's seemed to work so far. 😒

I ended up just using plain ol' CSS but it's not that bad since Svelte's scoped styles often mean I don't even have to use classes and stuff half of the time. 😜

I might just try it again in a little while or perhaps find a different way of using Sass with Svelte. πŸ˜€

But thanks, still! πŸ‘

1

Connor Zβ€’ 5,115

@zuolizhu

Posted

@ApplePieGiraffe I think I have the same issue when I was working on my react project with node-sass version 5.0.

Node Sass version 5.0.0 is incompatible with ^4.0.0`.

And if you head over to npm node-sass, they said LibSass and Node Sass are deprecated. 😒

Instead of using node-sass, you can try sass (I knew the naming is confused 🀣), and the latest version just works for me. Or you can try [email protected] see if this version works.

Hope those helped 😁.

Happy coding😎!

1

P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Posted

@zuolizhu

Thanks for that info! I'll try that out! πŸ‘

1

AliAbuhumraβ€’ 230

@aliabuhumra

Posted

How do you know the names of the colors in :root, is there a specific site?

1


P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Posted

@AliABUHAMRA

Hey, Ali!

I believe I got those color names from the style guide included with the free starter files for the challenge. You can really name those colors anything you wantβ€”I just stuck with the names given in the style guide because I like them and it saves me time thinking of color names. πŸ˜„

1

AliAbuhumraβ€’ 230

@aliabuhumra

Posted

@ApplePieGiraffe My friend's last question is how do I arrange my files inside the build folder so that it is similar to the arrangement that you have because my files are random and I want to arrange them inside the build folder similar to your arrangement like two files, I hope you teach me the order of files

1

P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Posted

@AliABUHAMRA

If you'd like to order your files in a similar manner, simply study the existing file structure of a project you'd like to copy (in this case, this solution), and replicate that structure in your own project. πŸ˜‰

In my public folder, I have an HTML file (just one since I'm using Svelte) and a CSS file (for all of my global styles), and a folder containing all of the assets (mostly images) for the project. πŸ™‚

0

P
Matt Studdertβ€’ 13,591

@mattstuddert

Posted

Literally only just seen this. Absolutely loving the loading animation, APG! 😍 These extra touches are what take projects to the next level. You're building up an incredible portfolio of projects! πŸš€

2


P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Posted

@mattstuddert

Thanks, again, Matt! 😁

0

karenefereyanβ€’ 375

@karenefereyan

Posted

I really wanna flex my creative muscles especially in animations. That load animation is so cute. How did you achieve it?

1


P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Posted

@karenefereyan

Hey, there! πŸ‘‹

Like I mentioned in my reply to SzymonRojek, the animation in this project mostly consists of <div>s and a few other elements that I animated the properties of using GSAP. I suggest taking a look at GSAP's getting started page, since it's very helpful and easy to get into animating things in your own projects! Also, this video by Dev Ed helped give me some ideas for the animation and get started using GSAP. 😊 And you can always take a look at the code for this project to see exactly how it's done and get ideas, too! πŸ˜‰

Hope that helps. πŸ˜€

0

Szymon Rojekβ€’ 4,540

@SzymonRojek

Posted

Hi ApplePieGiraffe,

wow => what can I say! intro is amazing - how did you do it? Extra additional effect. I love it, very smooth. Perfect pixel!:D

Greetings :D

1


P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Posted

@SzymonRojek

Thanks, SzymonRojek! The intro animation mostly consists of a bunch of divs and some text of which I animated properties like the width and height and opacity with GSAP. Using Svelte made it easy to manage the animation because I could create the entire animation as a separate component and stuff. πŸ˜€

1

Szymon Rojekβ€’ 4,540

@SzymonRojek

Posted

@ApplePieGiraffe

OOO thank you so much. I will have look it definitely. Generally project looks professional. Have to read about Svelte.

Happy day! :D

1

tedikoβ€’ 6,170

@tediko

Posted

Hello, ApplePieGiraffe! πŸ‘‹

Great work! I can't wait to jump into some framework myself after watching some of your projects! But for now step by step πŸ˜…I would suggest to change outline-offset for focus state for your input. It starts looking broken when input invalid border comes to action.

Good luck with that, have fun coding! πŸ’ͺ

1


P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Posted

@tediko

Thanks, tediko! 😊 And thanks for the tip, too! Happy coding! 😁

0

Abhikβ€’ 4,840

@abhik-b

Posted

Hi ApplePieGiraffe , Your solution seems absolutely PERFECT πŸ‘πŸ‘.Your intro animation is just dope πŸ”₯. The more I see your solution , the more I am interested in learning Svelte.

Happy coding πŸ˜‡

1


P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Posted

@abhik-b

Thank you very much, abhik-b! Happy coding, too! 😊

1

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!