Skip to content
Submitted almost 4 years ago

Fylo storage app with some animations

Marta•630
@martam90
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Fylo data storage component
  • HTML
  • CSS
2junior

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

  • The Burrito Doggie•1,260
    @BurritoDoggiePosted over 3 years ago

    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
    @martam90Posted over 3 years ago

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

    1
  • ApplePieGiraffe•30,545
    @ApplePieGiraffePosted almost 4 years ago

    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

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