Perspective Styles Dynamic CSS Props/Variables

Ignition
,
1

If I have a style class like this in the stylesheet:

.psc-flow-arrow-down {
  animation: flow-arrow-down-animation 1s infinite;
}

@keyframes flow-arrow-down-animation {
  
  0% {
    transform: translateY(0px);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  100% {
    transform: translateY(75px);
    opacity: 0;
  }
}

Are there any options for using this class on a component and dynamically changing props like the translateY?

2

Dynamic in what way? Like changing the 75px to, say, 85px? In CSS, you can create a variable and then use it in the translateX/Y function, but I'm not sure how you'll write to it from the session.

What you could do, depending on how many different options you have to translateX/Y, is to just define the style class based on the different translate amounts... This is obviously suboptimal, but the first that came to mind, say, if you had 5 - 10 different options.

Something like

.psc-flow-arrow-down-1 {
  animation: flow-arrow-down-animation-1 1s infinite;
}

@keyframes flow-arrow-down-animation-1 {
  0% {
    transform: translateY(0px);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  100% {
    transform: translateY(75px);
    opacity: 0;
  }
}

.psc-flow-arrow-down-2 {
  animation: flow-arrow-down-animation-2 1s infinite;
}

@keyframes flow-arrow-down-animation-2 {
  0% {
    transform: translateY(0px);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  100% {
    transform: translateY(105px);
    opacity: 0;
  }
}

This feels almost wrong to do this, but I don't know how else you can dictate the animation from the session without having to do a write to the filesystem to update the CSS variable or something complicated like that. It would be easier to do in native development.

[I'm operating under the assumption that you'll want to be able to dictate the animation from the session]

3

You can create the animation properties directly on the object and use bindings to manipulate it.

Otherwise I don’t know of any way (outside of JS) to manipulate the styles dynamically, at runtime.

4

How do you mimic keyframes with component props though? Maybe I'm overthinking this, but didn't know how to do that.

5

You don't, but here what you could do:

define your variable in classes. Something like:

.psc-size1 {
	--size: 75px;
}

.psc-size2 {
	--size: 85px;
}

.psc-size3 {
	--size: 95px;
}

then use this variable in your animation:

.psc-some_class {
	animation: some_anim 1s infinite;
}

@keyframes some_anim {
	to {
		transform: translateY(var(--size));
	}
}

now you can give the sizeX class you want to your component, along with the animation class.

2 Likes
6

image
image300×168 10.2 KB

This is the way, aslong you are not going to abuse it and change the classes every second on the fly on the same component

1 Like
7

Well, I guess I wasn't exactly clear, as I made an assumption that this is for an SVG.

If that is the case then you can do this in the props with an embedded SVG:
flowarrow

If it isn't an SVG, then @pascal.fragnoud's approach is what I would use.

1 Like
8

Depending on the need you could also use percentages and just put it on a wrapper container or something that you can resize to whatever size you want (be it 75px or 100 px or whatever)
You might have to handle overflow too tho

@keyframes flow-arrow-down-animation {
  
  0% {
    transform: translateY(0%);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  100% {
    transform: translateY(100%);
    opacity: 0;
  }
}
2 Likes