Share Posted October 6, 2016 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 More sharing options...
Share Posted October 7, 2016 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 More sharing options...
Share Posted October 7, 2016 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 7 Link to comment Share on other sites More sharing options...
Author Share Posted October 8, 2016 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 More sharing options...
Share Posted October 16, 2016 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 5 Link to comment Share on other sites More sharing options...
Share Posted January 21, 2018 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 2 1 Link to comment Share on other sites More sharing options...
Share Posted January 22, 2018 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. 5 Link to comment Share on other sites More sharing options...
Share Posted January 31, 2018 Woow the pen used was highlighted in Codepen;) 4 Link to comment Share on other sites More sharing options...
Share Posted January 31, 2018 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. 2 1 Link to comment Share on other sites More sharing options...
Share Posted January 31, 2018 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 3 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now