Landing Page With Intro Animation | Svelte, GSAP

Community feedback

• 

  Connor Z•5,115

  @zuolizhuPosted about 4 years ago

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

  4

  ---

  

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted about 4 years ago

  @zuolizhu

  Thanks, zuolizhu! 😆 Happy coding, too! 😃

  1

  

  Connor Z•5,115

  @zuolizhuPosted about 4 years ago

  @ApplePieGiraffe I just updated my comment above about the scss supports in Svelte. Hope it helps 🤪!

  1

  

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted about 4 years ago

  @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

  @zuolizhuPosted about 4 years ago

  @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

  

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted about 4 years ago

  @zuolizhu

  Thanks for that info! I'll try that out! 👍

  1

  

  MatthewSheldon•190

  @PatrickNgabiranoPosted over 1 year ago

  @ApplePieGiraffe: Hi APG! nice to hear from you. I liked the intro of the animation. It's cool and smart. I am going to try it out and see.

  0
• 

  AliAbuhumra•230

  @aliabuhumraPosted over 3 years ago

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

  1

  ---

  

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted over 3 years ago

  @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

  @aliabuhumraPosted over 3 years ago

  @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

  

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted over 3 years ago

  @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
• 

  T

  Matt Studdert•13,611

  @mattstuddertPosted almost 4 years ago

  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

  ---

  

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted almost 4 years ago

  @mattstuddert

  Thanks, again, Matt! 😁

  0
• 

  karenefereyan•375

  @karenefereyanPosted over 3 years ago

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

  1

  ---

  

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted over 3 years ago

  @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

  @SzymonRojekPosted almost 4 years ago

  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

  ---

  

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted almost 4 years ago

  @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

  @SzymonRojekPosted almost 4 years ago

  @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
• 

  P

  tediko•6,680

  @tedikoPosted about 4 years ago

  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

  ---

  

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted about 4 years ago

  @tediko

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

  0
• 

  Abhik•4,840

  @abhik-bPosted about 4 years ago

  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

  ---

  

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted about 4 years ago

  @abhik-b

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

  1