Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add more CSS variables. #1269

Open
chumager opened this issue Apr 22, 2021 · 6 comments
Open

Add more CSS variables. #1269

chumager opened this issue Apr 22, 2021 · 6 comments

Comments

@chumager
Copy link

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
Copy link
Member

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
Copy link
Author

Great...

Regards.

@warengonzaga
Copy link
Member

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

@nidhijain15
Copy link

Can you please assign this issue to me ?

@KodingKhurram
Copy link

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
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

6 participants