Skip to content
Submitted over 4 years ago

Landing Page With Intro Animation | Svelte, GSAP

ApplePieGiraffe•30,525
@ApplePieGiraffe
A solution to the Pod request access landing page challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

Code

Please log in to post a comment

Log in

Community feedback

  • Connor Z•5,115
    @zuolizhu

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

  • AliAbuhumra•230
    @aliabuhumra

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

  • Matt Studdert•13,611
    @mattstuddert

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

  • karenefereyan•375
    @karenefereyan

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

  • Szymon Rojek•4,540
    @SzymonRojek

    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

  • tediko•6,700
    @tediko

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

  • Abhik•4,820
    @abhik-b

    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 😇

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord