How to animate composites

[jasoneveleth]

I must be missing something, but there doesn't seem to be a way to compute the {transform: 'translate(${x}, ${y})'}. The code below "works" (for just the x value), but when you change it so it also does the y value, it suddenly doesn't work:

props().x.to(x => `translate(${x}px, ${0}px)`)

becomes

props().x.to(x => props().y.to(y => `translate(${x}px, ${y}px)`))

now all of a sudden it breaks.

Since I can't put a composite type in the to and from without creating what seems like a never type in typscript, I can't figure out how to create the translate string from both the springvalues (x and y). It seems like we need a way to unwrap the .to() values or something -- but when I use a .get() it isn't reactive anymore.

My interpretation of the types is that the animated.div needs to see the StringInterpolation<Number, String> at the top level, to convert the value for the transform prop to a string correctly.

Another thing I thought about was using UseSprings, but I don't think having separate springs would have solved this problem since that's just another way to create 2 SpringValues, still with no clear way to combined them.

import { createSpring, animated, config } from "solid-spring";

export function Card(): JSX.Element {
  // Create the spring animation
  const props = createSpring(() => ({
    from: {x: 300, y: 100},  // Starting position
    x: 25,        // Target position
    y: 0,
    delay: 200,
    config: config.molasses,
    reset: true,
  }));
  
  return (
    <animated.div 
      class="card w-200 h-48 absolute bg-white rounded-lg shadow-sm flex will-change-transform" 
      style={{
        transform: props().x.to(x => `translate(${x}px, ${0}px)`),
      }}>
      Card
    </animated.div>
  );
}

// Main board component
export default function Board(): JSX.Element {
  return (
    <div class="board relative w-600 h-60 bg-gray-200 border-solid">
      <Card />
    </div>
  );
}

What is the idiomatic way to make this string out of two values?

Please let me know if you have any questions.

[jasoneveleth]

All of the examples use a single SpringValue and not a composite from what I can see.