Search code examples
javascriptsequencesvelocity.js

velocity.js sequences transitions

I want to use the velocity.js sequences, with transition.slideUpDown.

If I use it in this way, it works. $($element).velocity("transition.slideUpDown", 500);

But if I want to use it with sequences I can not get it to work.

elements: $Element,
  properties: {
    translateX: -100 // this works
    //does not work
    transition: {
      slideUpDown: 500
    }
  },
  options: {
    duration: 1000
    loop: 5
  }

Has anyone an idea?

Thanks

Solution

  • You're mixing API's here. The "transition.slide*" is a UI Pack effect, where as the properties object needs contain CSS properties.

    You could do the following example.

    Inside the fiddle above there's a sequence with the translation call and then the transition effect call.

    Note, however, that the loop option will not work there.