Delaying an animation

[jonnygreen]

Liquid Fire has a delay attribute that can be set to delay the start of an animation. The equivalent functionality appears to be missing in ember-animated. Is that the case, or if not, is it possible to delay an animation?

[ef4]

I think this is best done by putting a yield timeout(ms) inside your transition function.

[jonnygreen]

Thanks Ed, that makes sense.

[willviles]

Just to note that in some cases, if you're animating in transitions with a yielded timeout above the transition declarations, the animation can quickly 'flash' its initial state.

import { wait } from 'ember-animated'
export default function * ({ insertedSprites, duration }) {
  yield wait(100)
  for (let sprite of insertedSprites) {
    sprite.startAtPixel({ y: sprite.element.getBoundingClientRect().top + 20 })
    opacity(sprite, { to: 1, duration })
    move(sprite, { easing: easeOut })
  }
}

Setting an initial opacity fixes this:

export default function * ({ insertedSprites, duration }) {
  for (let sprite of insertedSprites) {
    opacity(sprite, { to: 0 })
  }
  yield wait(100)
  for (let sprite of insertedSprites) {
    sprite.startAtPixel({ y: sprite.element.getBoundingClientRect().top + 20 })
    opacity(sprite, { to: 1, duration })
    move(sprite, { easing: easeOut })
  }
}

[samselikoff]

@willviles thanks! Opened an issue for it, want to try to start tracking these