Popular Content

Showing most liked content on 01/22/2018 in all areas

  1. 1 point
    Hi @Noturnoo I saw your question on Pixi's forum about smoothly following the mouse. The videos above explain how LERP and easing work, which is what Ivan wanted you to lookup. To get your animation working, you need to change the position of the circ and displacementSprite. And he posted the wrong math function. It should be Math.pow() instead of Math.exp(). app.ticker.add(function(delta) { const speed = 0.1; const dt = 1.0 - Math.pow(1.0 - speed, delta); const position = circ.position; const target = app.renderer.plugins.interaction.mouse.global; if (Math.abs(position.x - target.x) + Math.abs(position.y - target.y) < 1) { position.copy(target); } else { position.x += (target.x - position.x) * dt; position.y += (target.y - position.y) * dt; } displacementSprite.position.copy(position); }); For a smoother looking "bubble" effect, you could use a BulgePinch filter instead of a Displacement filter. http://pixijs.io/pixi-filters/tools/demo/ https://github.com/pixijs/pixi-filters And I noticed in your demos that you're using the "lastest" version of GSAP, but that is no longer updated. You need to replace "latest" with a version number. // Bad https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js // Good https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js https://cdnjs.com/libraries/gsap