animate pulse by distance

[greykrav]

greetings animation engineers, 

In the attached pen you will see the morph from the map into the logo,  you will notice that the map is composed of three parts, which you had advised me to consolidate into one path in order to do the morph into the logo which is also a single path..

But now I would like to do the following:

The map should pulse RGB at a heart rate based on distance of the mouse, and then it will morph into the logo according to its current behavior. So for example if we compare the map animation to a heartbeat, should the animation increase its rate linearly based on distance or at an accelerated rate (exponentially) how would you create such an animation? I have succeeded in animating tilts on x and y axis based on mouse positon as can be seen in many playing card demos on codepen, where you add shine and tilt to the element as controlled by mouseX and mouseY, so how would one go about it in this case? where you would be changing pulse rate based on distance.  

See the Pen mQxYOG by kravmaguy (@kravmaguy) on CodePen

[greykrav]

Guys I was thinking about this over dinner I think I might be able to solve this if I could hear some of your opinions. Imagine the icon was a heart and for the sake of argument its in the middle of the screen now. For the sake of this explanation we would use a regular mathematical graph with x and y axis. so our heart icon is located at x=0, and y=0... 

 

if rhythm= a sequence of beats, and temp= that exact sequence of beats either sped up or slowed down. Then on this animation since he want it to resemble a heartbeat it makes to increase or decrease the tempo as a function of either the increase or decrease in either Y or X.  So if this heart.. (which is a map in our case(and this map is composed of three different polygons), we would need to break up into three different paths lets call them left middle and right.. in the tween we offset the time that the animation happens so that the left path lights up first, the middle one .5 seconds later, and lastly, the right path would then light up, which happens a full second after the start of the animation... And this second that it takes to complete this animation cycle is constant.. this would be the rhythm? So we wish to control the tempo as a function of either the increase or decrease in mouseX OR mouseY.. 

and this way it doesnt matter where you place the icon.. because in any situation if your moving away from the icon either upwards, downwards, left or right, that would be increasing or decreasing either mouseX or mouseY... 

Does it make sense? How can I describe the situation above in a GSAP function? 

[Rodrigo]

Hi,

 

Is not very easy to get an idea of what exactly you want to do (for me at least), without a live sample to test and modify. Please try to provide a codepen sample using this base for the Morph SVG Plugin:

 

See the Pen RxBOrb by GreenSock (@GreenSock) on CodePen

 

Based on what you've posted the first idea that comes to my mind is using the mouse position to update the timeScale property of a TweenMax instance (in order to use the repeat: -1 and yoyo properties of that particular class):

 

https://greensock.com/docs/TweenMax/timeScale()

 

Here is an approximation of an element in the center of the screen (using flex) with an endless pulse animation. The animation's timescale is updated on the mouse move event attached to the document:

 

See the Pen XoWBdL?editors=0010 by rhernando (@rhernando) on CodePen

 

Hopefully this is enough to get you started.

 

Happy tweening!!