Landing Page With Intro Animation | Svelte, GSAP

@zuolizhu

Thanks, zuolizhu! 😆 Happy coding, too! 😃

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

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

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

@zuolizhu

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

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

@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. 😄

@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

@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. 🙂

@mattstuddert

Thanks, again, Matt! 😁

@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. 😀

@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. 😀

@ApplePieGiraffe

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

Happy day! :D

@tediko

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

@abhik-b

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