How to push letters by mouse pointer?

[bahaasamir]

I am trying to make a text spread effect "scatter" on mouse move. I want the mouse pointer to push the letters smoothly (based on where the pointer comes from) then revert that letter back again.

 

Here's a bit similar effect but I need it on a big title, just to clarify the idea. http://www.thecapitol.pn/onepanem/PN393H.UIU1Q2

 

[Carl]

Hello and welcome to the GreenSock forums,

 

In order to push letters away from the mouse you are going to have to determine their distance from the mouse (to see if they are affected by the mouse) and their angle from the mouse (to determine which direction they should move).

 

@Sahil recently answered a similar question but the difference is that the elements were attracted to the mouse.

Please see the demo below:

 

See the Pen LQaQPa by Sahil89 (@Sahil89) on CodePen

 

He also went to great lengths to document his approach with 2 videos which you can find in this thread (there is also a clever youtube button in the demo)

 

 

Both the site you referenced and Sahil's demo render to <canvas>. If your title is made of html elements like divs or spans; that's a whole other ball of wax, but you would still have to make similar calculations.

 

Hopefully the info in the demo, thread and videos can give you an idea of how you can approach this and what is involved. Unfortunately it is a fairly advanced effect that requires a considerable amount of code and calculations that are beyond what GSAP actually does, so its not like someone will be able to easily or quickly build that from scratch for you. Again, hopefully the info provided gets you on the right path.