Our reporter did not find any issues in this project! π
Submitted
Landing Page With Intro Animation | Svelte, GSAP
@ApplePieGiraffe
Design comparison
Reports
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
@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
@ApplePieGiraffe
Posted
@zuolizhu
Thanks, zuolizhu! π Happy coding, too! π
1
@zuolizhu
Posted
@ApplePieGiraffe I just updated my comment above about the scss supports in Svelte. Hope it helps π€ͺ!
1
@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
@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
@ApplePieGiraffe
Posted
@zuolizhu
Thanks for that info! I'll try that out! π
1
@aliabuhumra
Posted
How do you know the names of the colors in :root, is there a specific site?
1
@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
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
@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
@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
@ApplePieGiraffe
Posted
@mattstuddert
Thanks, again, Matt! π
0
@karenefereyan
Posted
I really wanna flex my creative muscles especially in animations. That load animation is so cute. How did you achieve it?
1
@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
@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
@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
@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
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
@ApplePieGiraffe
Posted
@tediko
Thanks, tediko! π And thanks for the tip, too! Happy coding! π
0
@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
@ApplePieGiraffe
Posted
@abhik-b
Thank you very much, abhik-b! Happy coding, too! π
1
Please log in to post a comment
Log in with GitHubJoin 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!