Add more CSS variables.

[chumager]

Is your feature request related to a problem? Please describe. Hi, I was testing you CSS with some structures inside div columns, and because your "in" animations works with 100% translation, there are no lateral, or vertical movement.

Describe the solution you'd like A clear and concise description of what you want to happen. You already have several CSS variables defined, could you define some more to set for example the translate from value? In speedLight you have -100%, and I need a -100vw. It'll be just like your other definitions. Something like:

:root {
  --fromLightSpeedInLeft: -100%;
}
@keyframes lightSpeedInLeft {
  from {
    transform: translate3d(var(--fromLightSpeedInLeft), 0, 0) skewX(30deg);
    opacity: 0;
  }

  60% {
    transform: skewX(-20deg);
    opacity: 1;
  }

  80% {
    transform: skewX(5deg);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

and then

.card {
  --fromLightSpeedInLeft: -100vw; /*or any other value*/
  animation-name: lightSpeedInLeft;
  animation-duration: 1s;
  animation-timing-function: ease-out;
}

That way you can even change those values programmatically and use it according to your needs. Describe alternatives you've considered IMHO maintaining a personalized version of a repo it's not a good idea, so for now I just copy what I need and use it with CSS variables.

Additional context Without this change any animation with a container the same size of the tag to animate will not move because of the "relative to the container" approach.

[warengonzaga]

Hi there, thanks for the suggestion @chumager!

Actually, this is a great idea I can work on it this... however let's wait for @eltonmesquita decision.

[chumager]

Great...

Regards.

[warengonzaga]

Alright, it looks like @eltonmesquita agree to add this feature in version 5. Can you assign this to me @eltonmesquita? 🚀😁

[nidhijain15]

Can you please assign this issue to me ?

[KodingKhurram]

In this case, we can a lot of variables, that would give us a dynamic approach to define animation behavior, but the challenge is what variables to determine since it opens up a window where animation would go unstable, so having control over variables and their definition matters.

[dejanheroxd]

Hey there, I think you've got a great idea but think this enhancement would make it even better:

:root {
  --fromLightSpeedInLeft: -100%; 
  --fromLightSpeedInRight: 100%; 
}

@keyframes lightSpeedInLeft {
  from {
    transform: translate3d(var(--fromLightSpeedInLeft), 0, 0) skewX(30deg);
    opacity: 0;
  }
}

.card {
  --fromLightSpeedInLeft: -100vw; 
  animation-name: lightSpeedInLeft;
  animation-duration: 1s;
  animation-timing-function: ease-out;
}

With this enhancement, we can easily customize the "from" values of the animations using CSS variables.We can set different initial translations for various elements, so we can control the lateral or vertical movements according to our requirements.