Fylo storage app with some animations

Solution by

Design Comparison



  • 0Accessibility

  • 0HTML

View Report

Marta's questions for the community

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!

Slack logo

Join our Slack community

Join over 40,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!