michaelvillar / dynamics.js

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

Uncaught TypeError: Cannot read property 'length' of undefined #37

Closed fourbytes closed 7 years ago

fourbytes commented 7 years ago

Can't seem to get this to work properly, seem to be doing everything right from what I can see in the docs.

Uncaught TypeError: Cannot read property 'length' of undefined
    at t.interpolate (dynamics.min.js:1)
    at t.interpolate (dynamics.min.js:1)
    at q (dynamics.min.js:1)
    at m (dynamics.min.js:1)
    at P (dynamics.min.js:1)
var block = $('.feature-block');
var path = $('#feature-path');
block.data('dragging', false);
block.data('c', { x: 100, y: 10 });
block.data('start', { x: 0, y: 0 });

function update() {
    var dy = block.data('c').y - 10;
    var dampen = dy > 0 ? 2 : 4;

    block.css('transform', 'translate3d(0,' + dy / dampen + 'px,0)');
    path.attr('d', 'M0,100 L100,100 L100,10 ' + 'Q' + block.data('c').x + ',' + block.data('c').y + ' 0,10');
}
update();

block.on('mousedown', function(e) {
    e = e.changedTouches ? e.changedTouches[0] : e;
    var $this = $(this);
    $this.data('dragging', true);
    $this.data('start').x = e.pageX;
    $this.data('start').y = e.pageY;
});

$(document).on('mousemove', function(e) {
    e = e.changedTouches ? e.changedTouches[0] : e
    if (block.data('dragging') && ((e.pageY - block.position().top > -200 && e.pageY - block.position().top <= 0) || (e.pageY - block.position().top < 250 && e.pageY - block.position().top >= 0))) {
      block.data('c').x = (50 + (e.pageX - block.data('start').x)/block.width())
      // dampen vertical drag by a factor
      var dy = e.pageY - block.data('start').y
      var dampen = dy > 0 ? 20 : 20
      block.data('c').y = 10 + dy / dampen
      update();
    }
});

$(document).on('mouseup', function(e) {
    if (block.data('dragging')) {
      block.data('dragging', false);
      dynamics.animate(path, {
        x: 100,
        y: 100
      }, {
        type: dynamics.spring,
        duration: 700,
        friction: 280,
        change: update
      })
    }
});
michaelvillar commented 7 years ago

animate doesn't support jQuery objects. Try:

dynamics.animate(path.get(0), {
...