Easing to Y position set on mousemove?

[jesper.landberg 40 Likes (Newbie)]

Simple example:

 

$(window).mousemove(function(e){

  var mousePos = e.pageY

  TweenMax.to(elem, 0.35, { y: -mousePos, ease: Power2.easeOut });
});

is there any better way of doing this rather then having an easing every single time the mousePos is updated? Would be nice to have an easeInOut (easeIn when I start moving and easeOut when I stop.

[Jonathan 5,176 Likes (Superhero)]

Hello jesper.landberg,

 

Have you tried to use easeInOut: Eases in and then out

ease: Power2.easeInOut

http://greensock.com/docs/#/HTML5/GSAP/Easing/Power2/easeInOut/

 

Also checkout our Easing Visualizer:

 

http://greensock.com/docs/#/HTML5/Easing/Power2/

 

If that doesn't help can you please provide more information and can you provide a codepen so we can see your code in context.

 

 

Thanks!

 

[OSUblake 9,990 Likes (Superhero)]

Like this?

 

See the Pen 65cdc21ce5c49da45709ff9d09d0a754 by osublake (@osublake) on CodePen

 

 

Using the modifiers plugin

 

See the Pen ZOvvOX by osublake (@osublake) on CodePen

 

 

 

See the Pen vKdGAy by osublake (@osublake) on CodePen

 

 

 

See the Pen mEpado by osublake (@osublake) on CodePen

 

 

[jesper.landberg 40 Likes (Newbie)]

Like this?

See the Pen 65cdc21ce5c49da45709ff9d09d0a754?editors=0010 by osublake (@osublake) on CodePen

 

Using the modifiers plugin

See the Pen vKdGAy by osublake (@osublake) on CodePen

See the Pen ZOvvOX?editors=0010 by osublake (@osublake) on CodePen

See the Pen mEpado?editors=0010 by osublake (@osublake) on CodePen

 

Hi, thanks for the answer. Looking interesting.

 

Basically this is what I'm doing

See the Pen WGrBqZ?editors=0010 by ReGGae (@ReGGae) on CodePen

 

Moving around an image. Is there a better way of doing this? Maybe using the modifiers plugin?

 

Sorry if the code is ugly/bad, did this quick and are new to es6 (and not much of a JS veteran either, yet).

[OSUblake 9,990 Likes (Superhero)]

Yep. You can use the ModifiersPlugin for that. Check this out...

 

See the Pen BLOoOP by osublake (@osublake) on CodePen

 

 

 

---

 

If you're curious, most of the demos I made for the ModifiersPlugin are based on techniques shown in these videos. The author, Keith Peters, uses canvas, but the concept is still the same for DOM elements.

 

EASING AND TWEENING PART I

 

 

 

EASING AND TWEENING PART II

 

 

Those videos build off of these videos...

 

NORMALIZATION

 

 

 

LERP

 

 

 

MAP

 

[OSUblake 9,990 Likes (Superhero)]

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

 

 

See the Pen PEVyPv by osublake (@osublake) on CodePen

 

 

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

 

 

[Victor Work 152 Likes (Specialist)]

Wow Blake, I really appreciate how helpful you are in helping the participants in the forums,

I really do leave to ask you here after you have researched a lot and have not found any solutions and it is of extreme importance these supports that you give,

I will make an outburst here if you have someone who indentify,

I started to venture into web development about a year ago and I decided to do it myself, I never worked in an agency or any other place that had someone to give a direction on front end development.

I was learning alone as the need arose and I wanted to make my projects more interactive. And thanks to you I see that my development improves every day. Sometimes it seems kind of lazy to come here to ask you something that is simple and obvious to you. But for those who are starting it is a super challenge and every detail that you show in the code of support that you make of a horizon for those who are in search of new knowledge.

Something that maybe alone would never be able to achieve.

Thank you sincerely on behalf of all these helps that you give us, it is very Important!
Thank you..  @OSUblake @Sahil and the other moderates.

[Victor Work 152 Likes (Specialist)]

Woow the pen used was highlighted in Codepen;)

[OSUblake 9,990 Likes (Superhero)]

Nice! I added a link to your CodePen profile in the description.

 

And you have some really cool demos. If you tweet something you made to @codepen they might pick it.

[Victor Work 152 Likes (Specialist)]

I am happy with the mention, but the merits are yours.
And I'm happiest to receive a compliment from this coming from a person who handles a lot.

Thank you