Submitted about 2 years ago

Responsive Results Card with Svelte, SCSS, Tailwind, and Animations

sass/scss, svelte, tailwind-css, animation

croganm•40

@croganm

A solution to the Results summary component challenge

Preview Code

Solution retrospective

I'm pretty familiar with CSS and animations, so this was a fun little refresher :).

Honestly, the hardest part was trying to import the data via JSON! The whole reason I used Svelte-kit was to SSR the data, but I couldn't find a way to load it within the load function. I had to do it inside the Svelte component, which worked just fine. I could have ended up using Svelte alone for this project though.

It was pretty fun using the built in Svelte Tween to have the numbers increase over a set time and add a stagger effect as well.

If anyone has any questions or feedback, let me know!

Code

Please log in to post a comment

Community feedback

No feedback yet. Be the first to give feedback on croganm's solution.

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