Trying to use Motion-Framer to animate my componen...

# javascript

[Nikola Milovic]

Trying to use Motion-Framer to animate my components, the API looks like this

<motion.div 
   animate= {{x: [50, 0], opacity: [0,1]}} // X will go from 50% to 0%  and opacity from 0% to 100%

I tried to translate the animate property with dynamics

val animate = js("{}")
animate.x = listOf(50, 0)
animate.opacity = listOf(0, 1)

When it gets converted to JS, the lists are ArrayLists instead of what I'd expect to be a List and even adding .toList results in the same transformation.

For some reason this doesn't work, and I have to use

animate.x = js("[50,0]")
animate.opacity = js("[0,1]")

For it to work as expected , which doesn't allow me to pass parameters as js() only accepts string literals
1.5.31 Kotlin

[Big Chungus]

listOf() uses kotlin implementation of list. If you want to get JS arrays, use arrayOf()

[Big Chungus]

Here's a refresher on KT -> JS type mappings https://kotlinlang.org/docs/js-to-kotlin-interop.html#kotlin-types-in-javascript

[Nikola Milovic]

This seems to have done the trick, thanks! Got confused as the Console was specifying the type List for the js("[50,0]")

[hfhbd]

I don't understand why kotlin.List converts to the useful and common Swift.Array in Objective-C, but on JS to a custom Kotlin class. Only on JS you have to use kotlin.Array...

[Big Chungus]

Not entirely true. kotlin.Array maps to primitive arrays on JVM as well. I've always did my best to stay away from apple stuff so can't comment on why swift interop deviates from this convention for kotlin.List . What does kotlin.Array translates to when compiled to obj-c? Does obj-c have a distinction between arrays and lists?

[hfhbd]

Yeah, okay, I forgot primitive arrays on JVM 😄

[hfhbd]

Kotlin IntArray to objective c results into a KotlinIntArray 😄
Not really, objective-c has NSArray and NSMutableArray.

[Big Chungus]

Just like JS. In that case I'd expect kotlin.List to not map to NSArray and have that reserved for kotlin.Array only. Consistency is key.

[Big Chungus]

For it to work as expected , which doesn't allow me to pass parameters as js() only accepts string literals

For completeness, this can be hacked as well

fun main() {
  var myVar = "Hello there!"
  js("console.log(myVar)")
  tmp = "General Kenobi"
  js("console.log(myVar)")
}