[Distort images]

When changing background images i notice the image that comes in is bended at the beginning and then it becomes normal when the transition finishes. 
This is happening at the same time as the fading transition takes place while changing from one image to another.

So I'm interested in the bending part. From bended to normal.

[Distort images]

I've seen this site in the showcases (https://asmobius.co.jp) and I got interested in replicating a similar effect (without the circular thing).

 

Any suggestion to point me in the right direction regarding how to create those image distortions that appear from the right and fade to the left while getting to its original shape?

Thanks!

[Is it possible to achieve this water effect with GreenSock?]

I've seen this amazing effect in this site I would really love to see if it is possible to replicate with GreenSock.
If so, could you guys point me in the right direction?

 

https://www.perceptionacme.com/

[Which default animation does TweenLite uses?]

Thanks for the info guys!

[Which default animation does TweenLite uses?]

What about the beizer parameters?
Is it possible to know which ones is using?

 

For example here are some equivalents with the beizer parameters:

 

[0.250, 0.460, 0.450, 0.940], /* outQuad */
[0.215, 0.610, 0.355, 1.000], /* outCubic */
[0.165, 0.840, 0.440, 1.000], /* outQuart */
[0.230, 1.000, 0.320, 1.000], /* outQuint */
[0.390, 0.575, 0.565, 1.000], /* outSine */
[0.190, 1.000, 0.220, 1.000], /* outExpo */
[0.075, 0.820, 0.165, 1.000], /* outCirc */
[0.175, 0.885, 0.320, 1.275], /* outBack */

 

Useful tool:

https://matthewlein.com/tools/ceaser

[Which default animation does TweenLite uses?]

I mean getting the function for it, like this:

 

easeInOutQuad: function (t, b, c, d) {
    if ((t/=d/2) < 1) return c/2*t*t + b;
    return -c/2 * ((--t)*(t-2) - 1) + b;
},
easeInCubic: function (t, b, c, d) {
    return c*(t/=d)*t*t + b;
},
easeOutCubic: function (t, b, c, d) {
    return c*((t=t/d-1)*t*t + 1) + b;
},

 

[Which default animation does TweenLite uses?]

Thanks for the answer!

I guess there's no easy way to take that same ease outside of tweenlite?
I'm playing with other animations on my own outside Tweenlite and I would like to apply the exact same easing effect so it can look similar to the tweenlite ones I use in the same page.

[Which default animation does TweenLite uses?]

If I animate a path like this:

 

var g_1 = TweenLite.to('#path', 0.5, {
  attr:{d: getPath('M2.6 2.8 L 96.3 4.8 L 98.5 98.4 L 0 100 Z')}
});

 

Which animation is TweenLite using by default?  Linear? Ease? EaseOutCubic?
It seems to me that the end part is a bit slower than the begining, but I do not mange to find this info in the docs. 

 

Thanks!

[Wave effect with svg path]

I've seen this amazing website and I noticed a nice effect when mouving the mouse around the right or left sides of the page.

They are animating an SVG path as if it was a liquid. In a wavy way.

Any tips to achieve this? I'm totally lost.
I have the path but I have no idea how to "guess" which values should I apply to it to create the wave effect:

https://jsfiddle.net/9o3f8vm4/

 

Thanks!

See the Pen by 9o3f8vm4 (@9o3f8vm4) on CodePen