0

I'm using Velocity.js library to provide different animations on my page. I would like to use it also to reveal animations when I scroll (similar to WOW.js), so I'm using this code (with appear.js library to reveal animations on scroll):

$('[data-animation="velocity"]').each(function() {
  var animationName = $(this).attr('data-animation-name'),
    delay = parseInt($(this).attr('data-animation-delay'), 10),
    duration = parseInt($(this).attr('data-animation-duration'), 10);
  $(this).appear(function() {
    $(this).velocity(animationName, {
      visibility: 'visible',
      delay: delay,
      duration: duration
    });
  });
});

Thanks to that I can choose between different animations provided by Velocity.js library, set duration and delay.

Example

My question is: how about performance (for example on mobile or weaker PC's)? Isn't that overkill (I use Velocity.js for other things so I don't want to add another library like WOW.js and Animate.CSS)? I'm asking because WOW.js uses CSS for animations (by adding CSS class). On the other hand, Velocity.js uses JavaScript to change the values of CSS properties like opacity, transform etc. It's working good for me on my iMac even with many animated elements, but I didn't test it on other less performant devices.

max
  • 8,632
  • 3
  • 21
  • 55
  • You can check my answer here: http://stackoverflow.com/questions/40949262/angular-2-animation-vs-css-animation-when-to-use-what/40949387#40949387 It's not exactly the same (regarding the libraries) but it will give you what you are looking for. – Dekel Jan 16 '17 at 16:36
  • Thanks, what do you think about that? http://velocityjs.org/#mobileHA it seems like Velocity.js allows mobile devices to use GPU. – max Jan 16 '17 at 16:45
  • Check more here: https://github.com/julianshapiro/velocity/blob/d636d6234a1d3e6a4e512449fb07b7dc4047c15e/velocity.js#L4329 – Dekel Jan 16 '17 at 16:53
  • So I think I'm forced to use CSS animations. – max Jan 16 '17 at 17:01

0 Answers0