CODEWITHSUNDEEP
javascriptvelocity.js
Tim
Tim

Reputation: 471

Why are elements animated by VelocityJS only changing opacity?

I was setting up a basic demo of VelocityJS and I noticed that only the opacity of the elements were changing, despite copying the samples from the VelocityJS documentation.

I was debugging it and noticed that if I used an older version, the transitions work as intended.

Using the most updated version (only opacity changes): https://jsfiddle.net/rkek9u9w/

<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/2.0.2/velocity.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/2.0.2/velocity.ui.min.js"></script>

<div style="display: flex; height: 200px; overflow: hidden;">
  <div style="width: 100px; height: 100px; background-color: green; margin: 5px;">Test</div>
  <div style="width: 100px; height: 100px; background-color: green; margin: 5px;">Test</div>
  <div style="width: 100px; height: 100px; background-color: green; margin: 5px;">Test</div>
</div>

<script>
  $(function() {

    $("div")
      .velocity("transition.bounceDownOut", {
        stagger: 500,
        backwards: true,
        duration: 1500
      })
  });

</script>

<style>
div {
  text-align: center;
  color: #fff;
}
</style>

Using an older version of JSFiddle: https://jsfiddle.net/zmxndac7/

<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.0/velocity.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2/velocity.ui.min.js"></script>

<div style="display: flex; height: 200px; overflow: hidden;">
  <div style="width: 100px; height: 100px; background-color: green; margin: 5px;">Test</div>
  <div style="width: 100px; height: 100px; background-color: green; margin: 5px;">Test</div>
  <div style="width: 100px; height: 100px; background-color: green; margin: 5px;">Test</div>
</div>
<script>
  $(function() {

    $("div")
      .velocity("transition.bounceDownOut", {
        stagger: 500,
        backwards: true,
        duration: 1500
      })

  });

</script>

<style>
div {
  text-align: center;
  color: #fff;
}
</style>

Any help would be much appreciated.

Upvotes: 0

Views: 60

Answers (1)

Rycochet
Rycochet

Reputation: 2938

You're using the V1 documentation against the V2 Velocity - those transitions no longer exist (there are new ones, named the same as the animate.css animations though - so plain "bounceDownOut" works). If it's not in the Velocity Wiki on Github then it's either not tested, or it's due to come out (why the transitions etc have all changed, it's now sequences that are a lot closer to CSS animations).

The next public beta build of Velocity will remove the old transitions entirely, so those examples will report an error instead of partially working.

Please remember that a major version number change is generally a breaking change in the API: in this case the UI-Pack is changing completely, as well as adding a lot of new abilities and features. It's advisable to check the Velocity Github page for the V2_CHANGES.md file.

Upvotes: 1

Related Questions