michaelvillar / dynamics.js

Javascript library to create physics-based animations
http://dynamicsjs.com
7.57k stars 414 forks source link

change callback doesn't expose the animation progress #26

Closed kilianc closed 8 years ago

kilianc commented 8 years ago
dynamics.animate(picture, {
  opacity: 0
}, {
  type: dynamics.spring,
  duration: 1500,
  frequency: 94,
  friction: 480,
  change: (progress) => {
    dynamics.css(picture, { filter: `blur(${progress * 20}px)` })
  }
})
michaelvillar commented 8 years ago

This is more of a feature request I guess?

I'm not exactly sure if we should have it, the goal is to animate the properties directly :) I guess you don't need this anymore either? https://github.com/michaelvillar/dynamics.js/issues/27

kilianc commented 8 years ago

Yeah feature request, is this the wrong place for this sort of things?

the goal is to animate the properties directly

I agree but sometimes you want to keep two things in sync. I don't have a strong use case right now since #27 is solved. You can probably close this.

What's the change callback main use case ?

michaelvillar commented 8 years ago

One thing you can do is to animate an object and use change to do something else based on the properties.

var o = {
  scroll: 1,
}

dynamics.animate(o, {
  scroll: 1000,
}, {
  change: function() {
    document.body.scrollTop = o.scroll;
  }
});

For example.

michaelvillar commented 8 years ago

I'm still not sure either, maybe progress should be passed.

kilianc commented 8 years ago

I would just pass it, I did it in my fork it's a 3 line change with all tests still passing, but again I don't have a strong use case anymore.

I would be nice as fallback for things that you can't do or make it future proof.

michaelvillar commented 8 years ago

Added in 1.1.0 :) https://github.com/michaelvillar/dynamics.js/releases/tag/1.1.0