https://kotlinlang.org logo
#compose-web
Title
# compose-web
d

David Herman

01/19/2023, 1:53 AM
Can someone who understands css animations, or the compose CSSAnimation data class, confirm that they didn't mess up the API? (More details in 🧵 )
My current understanding for CSS animations if that you associate an anim name (defined with the
@keyframes
keyword) with some animation properties (e.g. duration, iteration-count, delay). e.g.
animation-name: test; animation-duration: 2.5s; animation-iteration-count: infinite
You can also specify multiple animations with their associated properties, all at the same time. See also: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations#setting_multiple_animation_property_values
Copy code
animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;
So an array of values, but 1 set per animation name
Then, you have the code in Compose for Web: https://github.com/JetBrains/compose-jb/blob/e2aba37e625def21b9aa136592a38a3e33b46[…]in/kotlin/org/jetbrains/compose/web/css/properties/animation.kt
Copy code
data class CSSAnimation(
    val keyframesName: String,
    var duration: List<CSSSizeValue<out CSSUnitTime>>? = null,
    var timingFunction: List<AnimationTimingFunction>? = null,
    var delay: List<CSSSizeValue<out CSSUnitTime>>? = null,
    var iterationCount: List<Int?>? = null,
    var direction: List<AnimationDirection>? = null,
    var fillMode: List<AnimationFillMode>? = null,
    var playState: List<AnimationPlayState>? = null
) : CSSStyleValue {
Here, it's associating a single name to lists of values.
I'm looking at the syntax for the animation style: https://developer.mozilla.org/en-US/docs/Web/CSS/animation#formal_syntax and I think it agrees -- one animation name paired with one instance of each property per name.
Copy code
animation = 
  <single-animation>#  

<single-animation> = 
  <time>                              ||
  <easing-function>                   ||
  <time>                              ||
  <single-animation-iteration-count>  ||
  <single-animation-direction>        ||
  <single-animation-fill-mode>        ||
  <single-animation-play-state>       ||
  [ none | <keyframes-name> ]
But happy to be told I'm understanding things wrong... I guess I'm expecting either this:
Copy code
CSSAnimation(
  val keyframesNames: List<String>,
  val duration: List<CSSSizeValue<CSSTimeUnit>>,
  ...
)
or better, this:
Copy code
CSSAnimation(
  val keyframesName: String,
  val duration: CSSSizeValue<CSSTimeUnit>,
However, if this is a bug in the API, it seems like an important one to fix?
i

ian.shaun.thomas

01/19/2023, 2:05 AM
I'm a bit confused what you're asking for. Are you asking for how to implement keyframe animations in the compose CSS or noting that it compiles the CSS improperly?
If you are plainly looking for a sample of using keyframes, I wrote a bug last week that shows how to use them. https://github.com/JetBrains/compose-jb/issues/2631#issue-1531316976
d

David Herman

01/19/2023, 2:06 AM
I updated my comment above to be clearer about what I was expecting
I'll look at your bug, but my point is I think the API is just wrong?
What does it even mean to specify iteractionCount = listOf(1, 2) with a single animation target?
In the code you linked above, even though you're not doing this, why is it allowed?
Copy code
animation(rotationKeyframes) {
  duration(5.s, 7.s) // <---- Two durations?!
  timingFunction(AnimationTimingFunction.Linear)
}
IMO if the API was correct, your code should be written like:
Copy code
animation(rotationKeyframes) {
  duration = 5.s
  timingFunction = AnimationTimingFunction.Linear
}
(unless, as I said before, if I'm missing something)
i

ian.shaun.thomas

01/19/2023, 2:12 AM
I believe it would apply the specific duration to each animation set. You can see an example here of duration taking a list of durations for example https://developer.mozilla.org/en-US/docs/Web/CSS/animation-duration#syntax
and in the short hand you can write it as shown here https://developer.mozilla.org/en-US/docs/Web/CSS/animation#syntax
Copy code
/* two animations */
animation: 3s linear slidein, 3s ease-out 5s slideout;
d

David Herman

01/19/2023, 2:13 AM
The examples you linked are for targeting multiple animations
but the
CSSAnimation
API targets a single animation as it is currently written
i

ian.shaun.thomas

01/19/2023, 2:16 AM
ah I see, it doesnt let you provide multiple keyframes
d

David Herman

01/19/2023, 2:16 AM
Right
But I don't think it even should
I think it makes sense to have one class for specifying one of everything (no lists), and then
animation
can take a
vararg
of that thing
@Oleksandr Karpovich [JB] FYI since you may be looking at animation code based on the fact you were assigned Ian's bug 🙂
@Oleksandr Karpovich [JB] I ended up creating my own fork of the CSSAnimation class in Kobweb (my library that sits on top of C4W): https://github.com/varabyte/kobweb/blob/main/frontend/web-compose-ext/src/jsMain/kotlin/com/varabyte/kobweb/compose/css/Animation.kt Parameters are now single values instead of lists, and I introduced a value class for
AnimationIterationCount
, so I could write
iterationCount = AnimationIterationCount.Infinite
instead of passing in null. JB can feel free to reference my version if they ever revisit their own.
52 Views