Jump to content
Search Community

Easing to Y position set on mousemove?

jesper.landberg test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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.

Link to comment
Share on other sites

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! :)

 

:)

Link to comment
Share on other sites

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).

Link to comment
Share on other sites

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

 

  • Like 6
Link to comment
Share on other sites

  • 1 year later...

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

 

 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

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.

  • Like 5
Link to comment
Share on other sites

  • 2 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...