Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Fylo storage app with some animations

Marta 630

@martam90

Desktop design screenshot for the Fylo data storage component coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hi, I tried to use GSAP in order to animate gradient indicator and white box. However I am not so happy with the result. I also tried to make the more dynamic animation in CSS in a way how I want to it to look but I am stuck. Do you have any idea how to make it works? I appreciate any hint when it comes to GSAP or CSS animation. Here is the CSS code I tried to apply:

.storage__indicator { padding: 0 $spacing * 5; animation-name: storage; animation-duration: 1s; animation-timing-function: linear;

          @keyframes storage {
            0% {padding-right: 0em;}
            20% {padding-right: 1em;}
            50% {padding-right: 2em;}
            70% {padding-right: 3em;}
            100% {padding-right: 5em;}

};

Thank you in advance!

Community feedback

P

@BurritoDoggie

Posted

Hey Marta!

I really like the way different items apear on the site. It looks really cool! I think the "180 gb left" should come a little sooner. But anyways great work!

Keep Coding!

                           (@@)
                           \__/
2

Marta 630

@martam90

Posted

@BurritoDoggie Thanks, I will try to improve my solution :)

1
P
ApplePieGiraffe 30,545

@ApplePieGiraffe

Posted

Hey, Marta! 👋

Nice to see you complete another challenge! 😀 Good effort on this one! 👍

A few things I'd like to suggest are,

  • Adding some space to the right of the option icons in the box to the left and decreasing the border-top-right-radius a little (as in the original design).
  • Making sure the background image fills the entire screen and doesn't repeat and make a tiling pattern on certain screen sizes.
  • Aligning the right side of the little white popup and the triangle below it.

I don't think you need to use GSAP for the animations you want to add to your solution. If you want to move things around using CSS animations, I think one of the best properties to animate would be the transform property (since you can do all sorts of things with it like move, scale, and rotate elements and it's optimized for animations, anyway). 😉

Keep coding (and happy coding, too)! 😁

1

Please log in to post a comment

Log in with GitHub
Discord logo

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