Gavant / glint-template-types

MIT License
19 stars 20 forks source link

AnimatedContainer `motion` argument is incomplete #85

Open jeffdaley opened 11 months ago

jeffdaley commented 11 months ago

Hello and thank you all for the hard work 🙏

It seems the <AnimatedContainer>'s motion argument also accepts an extended Motion class. Here's my configuration:

import Component from "@glimmer/component";
import { Resize } from "ember-animated/motions/resize";
import { easeOutExpo } from "app/utils/ember-animated/easings"; // custom

class CustomResize extends Resize {
  // Resize extends Motion<Options>
  *animate() {
    this.opts.easing = easeOutExpo;
    this.opts.duration = 750;
    yield* super.animate();
  }
} 

export default class CustomComponent extends Component {
   customMotion = CustomResize;
}

<template>
  <AnimatedContainer @motion={{this.customMotion}}>
      ...
   </AnimatedContainer>
</template>

It might be a hack (?) but if not, it would be nice to see it covered in the Glint type.

Thanks for considering it!