Jump to content
Search Community

Return to original position (over time)

SteveS test
Moderator Tag

Recommended Posts

I'm looking to create an effect that requires an image to go the direction my mouse is moving, but when I stop moving the mouse, the image interpolates back to its original position. I've setup a ticker to handle it, but I'm not sure how to actually get the behavior of moving back. Any ideas?

 

Edit: Also, any good functions for getting a mouse velocity vector?

Link to comment
Share on other sites

1 hour ago, SteveS said:

Also, any good functions for getting a mouse velocity vector?

You might want to look at:

https://greensock.com/docs/v3/Plugins/Observer

or

https://greensock.com/docs/v3/Plugins/InertiaPlugin

 

They can both track velocity. 

 

You could use the new gsap.quickTo() to animate to the mouse position. 

 

This was a fun challenge for me, so here's a helper function that might be very useful: 

See the Pen ExorRXO?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Does that help? 

  • Like 4
Link to comment
Share on other sites

Somewhat. Really I am trying to replicate this effect: https://tympanus.net/Development/DistortedPixels/index3.html

with GSAP and I got things pretty close but I'm starting to wonder if it is better to just keep it in threejs. I know how to do it in three, but I figured I would have a go in vanilla. Right now I have a grid set up, but the actual animation is pretty hefty since it requires animating 100 elements in a loop.

You can see what I have so far here: https://codesandbox.io/s/keen-browser-y374b3?file=/src/GridContainer.js

 

Basically, I have a grid of elements that I adjust the backgroundPosition of the background-image for to make sure they line up. The idea being in a frame loop I access the velocity of the mouse and the hovered element and apply a background transform that slowly goes back to normal. I know this is pretty much a different question, but I feel this is a somewhat advanced example that I'm not quite qualified for. Do you think this is something reasonably achievable with GSAP?

Link to comment
Share on other sites

I think you may be misunderstanding - Three.JS is more of a rendering layer; it's not an animation library like GSAP. So it's super popular to animate Three.JS content using GSAP. Saying "I'm not sure if I should keep it in Three.JS or use GSAP" is sorta like saying "I'm not sure if I should keep it in HTML or use CSS instead". :)

 

You can animate anything with GSAP. Absolutely you can get the effect you're asking about with GSAP. It sounds more to me like you're contemplating whether you should use standard HTML elements or Three.JS as the rendering layer and in that case I suspect you'll get the best performance from Three.JS because it leverages WebGL and doesn't have all the weight of mouse/event tracking/bubbling and all the other stuff that browsers must support for normal DOM elements. 

 

I also wouldn't recommend using background-image for what you're animating because most browsers seem to pixel snap those and they're often not GPU-accelerated. I would use a regular image wrapped in a <div> with overflow: hidden and then animate the transform of the image. You'll almost surely get better performance. 

 

I don't have time to read through all your code or do the project for you, but rest assured that it's entirely doable with GSAP whether you use Three.JS or standard elements for the rendering layer. 

 

We're happy to answer any GSAP-specific questions. If you need custom consulting, you can post in the "Jobs & Freelance" forum or contact us directly if you'd like to hire the GreenSock team. 

 

Good luck with the project!

  • Like 1
Link to comment
Share on other sites

I guess the question was more along the lines of performance. With three.js I am doing calculations in a shader, while with GSAP I'd be getting the effect with potentially hundreds of DOM nodes. I was curious whether this kind of effect is possible at the DOM level given how taxing it might be.

Link to comment
Share on other sites

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